/* chrome
   Copyable identifiers and the left navigation rail.

   Loaded by `stylesheet_link_tag :app`, which includes every .css under
   app/assets sorted by filename — so the NUMBER PREFIX IS THE CASCADE ORDER.
   Renaming a file moves it in the cascade. */

/* ---------------- copyable identifiers ---------------- */
.copyable { display: inline-flex; align-items: center; gap: 5px; }

.copy-button {
  background: none;
  border: none;
  padding: 2px;
  border-radius: 4px;
  color: var(--ink-3);
  cursor: pointer;
  line-height: 0;
  opacity: 0;
  transition: opacity .12s ease, color .12s ease;
}
/* Present but quiet: revealed on hover or keyboard focus, so identifiers stay
   readable rather than sprouting furniture. */
.copyable:hover .copy-button,
.copy-button:focus-visible,
.page-head:hover .copy-button,
tr:hover .copy-button { opacity: 1; }
.copy-button:hover { color: var(--ink); background: var(--paper); }
.copy-button.is-copied { color: var(--ok); opacity: 1; }
.copy-button.is-copied::after {
  content: "Copied";
  font: 500 11px var(--ui);
  margin-left: 4px;
  vertical-align: middle;
}

@media (hover: none) {
  .copy-button { opacity: 1; }
}

/* Links in the eyebrow and subtitle were falling back to browser blue. */
.page-head .eyebrow a, .page-head .sub a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--line-2);
}
.page-head .eyebrow a:hover, .page-head .sub a:hover {
  color: var(--signal);
  text-decoration-color: var(--signal);
}

.step.has-error { border-color: var(--danger); }
.step-error {
  font-size: 12.5px;
  color: var(--danger);
  margin-bottom: 6px;
  line-height: 1.45;
}

/* ================= left navigation ================= */

body.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 226px;
  flex: 0 0 226px;
  background: var(--ink);
  color: rgba(255,255,255,.72);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  transition: width .14s ease, flex-basis .14s ease;
}

.sidebar-head {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-brand { text-decoration: none; color: #fff; flex: 1; min-width: 0; }
.sidebar-brand-name {
  font: 600 14px var(--ui);
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block;
}
.sidebar-brand-initials {
  display: none;
  font: 600 13px var(--ui);
  letter-spacing: .02em;
  color: #fff;
}

.sidebar-toggle {
  background: none; border: none; padding: 4px; cursor: pointer;
  color: rgba(255,255,255,.45); border-radius: 5px; line-height: 0;
}
.sidebar-toggle:hover { color: #fff; background: rgba(255,255,255,.08); }

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 8px;
  /* Thin, and only visible while scrolling — a default scrollbar in a dark
     rail reads as a light stripe down the edge of the app. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.16) transparent;
  scrollbar-gutter: stable;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
}
.sidebar:hover .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); }
.sidebar-nav:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); }

.nav-group + .nav-group { margin-top: 14px; }
/* Grey, but readable. These were hard to read at 10px/500 against the dark
   rail — the fix is weight and size, not colour: tinting them made them
   compete with the active item, which is the one thing here that should
   stand out. */
.nav-group-label {
  font: 600 11.5px var(--ui);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,.52);
  padding: 0 8px 7px;
}

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px;
  border-radius: 7px;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-size: 13.5px;
  white-space: nowrap;
}
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.active { background: rgba(255,255,255,.12); color: #fff; }
.nav-icon { flex: 0 0 16px; opacity: .82; }
.nav-item.active .nav-icon { opacity: 1; color: var(--primary, var(--signal)); }
.nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* A queue you work through, versus something that has gone wrong. */
.nav-count {
  font: 500 11px var(--ui);
  background: rgba(255,255,255,.16);
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  flex-shrink: 0;
}
.nav-count.is-alert { background: var(--danger); }

.sidebar-foot {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 10px 8px;
}
/* Their own name, and the way to their own account. A nav item like any
   other now rather than a dim caption — it goes somewhere, so it has to look
   like it does. */
.nav-user .nav-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-signout {
  width: 100%; background: none; border: none; cursor: pointer;
  font: inherit; font-size: 13.5px; text-align: left;
}
.nav-signout:hover { background: rgba(255,255,255,.07); }

/* Collapsed: icons only, with the title attribute doing the explaining. */
body.nav-collapsed .nav-label,
body.nav-collapsed .nav-group-label,
body.nav-collapsed .sidebar-brand-name { display: none; }
body.nav-collapsed .nav-item { justify-content: center; padding: 9px 0; }
body.nav-collapsed .nav-group + .nav-group {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
body.nav-collapsed .nav-count {
  position: absolute; margin-left: 18px; margin-top: -14px;
  padding: 0 5px; font-size: 10px;
}
body.nav-collapsed .sidebar-brand-initials { display: block; }
body.nav-collapsed .sidebar-brand { flex: 0 0 auto; }
body.nav-collapsed .sidebar-head {
  flex-direction: column; gap: 10px; padding: 14px 0 12px;
}

/* Set outright rather than through the custom property: a variable swap on the
   flex container didn't reliably re-resolve flex-basis here. */
body.nav-collapsed .sidebar {
  width: 58px;
  flex: 0 0 58px;
}

.app-body { flex: 1; min-width: 0; }
.app-main { max-width: 1240px; margin: 0 auto; padding: 26px 28px 60px; }

@media (max-width: 860px) {
  body.app-shell { display: block; }
  .sidebar {
    position: static; width: 100%; flex: none; height: auto;
    flex-direction: row; align-items: center; overflow-x: auto;
  }
  .sidebar-nav { display: flex; gap: 4px; padding: 8px; }
  .nav-group { display: flex; gap: 4px; }
  .nav-group + .nav-group { margin-top: 0; }
  .nav-group-label, .sidebar-foot { display: none; }
  .app-main { padding: 18px 16px 40px; }
}

/* The shop preview leaves the back office, so it reads a little quieter. */
.nav-item.is-external { color: rgba(255,255,255,.5); }
.nav-item.is-external:hover { color: #fff; }

/* The line above each administrative group. What is above the first is the
   work; below it is the machinery, and the two kinds of machinery are run by
   different people. Room under it so the label it introduces does not sit on
   the line.
   
   The rule REPLACES the gap between groups rather than adding to it: stacked,
   the two together pushed the last item in the rail below the fold at every
   screen size — 675px of nav in 637px of room on a 1000px window. */
.nav-rule {
  border: 0;
  border-top: 1px solid rgba(255,255,255,.10);
  margin: 6px 10px 12px;
}
.nav-rule + .nav-group { margin-top: 0; }

/* A control in the action strip that needs a word before it acts — a reason
   for calling a job off, a note on it. The summary IS the button, so it reads
   as one of the row until it is opened. Undoing the global `button` rule is
   not needed here because a summary is not a button element; what IS needed is
   list-style, or Safari draws a triangle inside the pill. */
.head-drop { position: relative; }
.head-drop > summary { list-style: none; cursor: pointer; display: inline-block; }
.head-drop > summary::-webkit-details-marker { display: none; }
.head-drop[open] > summary { background: var(--ink); color: #fff; border-color: var(--ink); }
.head-drop-body {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  width: 280px; padding: 12px;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r); box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .10));
}
.head-drop-body input, .head-drop-body textarea { width: 100%; margin: 0 0 8px; }
/* These sit on the shop's own page, where a control is pressed standing up.
   Measured at 254 x 26 before. */
.head-drop-body input[type="submit"] { min-height: 40px; }
.head-drop-body p { font-size: 11.5px; line-height: 1.4; margin: 0 0 8px; }

@media (max-width: 700px) {
  /* Nothing to hang a 280px panel off on a phone. */
  .head-drop { position: static; }
  .head-drop-body { position: static; width: auto; margin-top: 8px; }
}