/* The shared fullscreen rules live in workspace-shared.css, copied in by
   scripts/deploy.sh. This file is this console's own. */

/* --------------------------------------------------------------------------
   Company picker
   --------------------------------------------------------------------------
   A search over a hidden field. The results list overlays rather than pushing the form
   about, because several of these sit inside a card whose other fields would jump.
   -------------------------------------------------------------------------- */

.cp { position: relative; display: block; }
.cp-search { width: 100%; box-sizing: border-box; }

.cp-results {
  position: absolute;
  z-index: 20;
  left: 0; right: 0;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  max-height: 15rem;
  overflow: auto;
  background: var(--paper-lit);
  border: var(--hair) solid var(--edge);
}

.cp-results li {
  display: flex;
  align-items: baseline;
  gap: var(--sm);
  padding: var(--xs) var(--sm);
  cursor: pointer;
  border-bottom: var(--hair) solid var(--line);
}
.cp-results li:last-child { border-bottom: 0; }
.cp-results li.cp-active { background: var(--edge); color: var(--paper-lit); }

.cp-name { flex: 1 1 auto; }
.cp-state {
  flex: none;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.cp-results li.cp-active .cp-state { color: var(--paper-lit); }

.cp-chosen {
  display: flex;
  align-items: baseline;
  gap: var(--sm);
  margin: 0;
  padding: var(--xs) var(--sm);
  border: var(--hair) solid var(--line);
  background: var(--paper-sunk);
}
.cp-chosen-text { flex: 1 1 auto; }
.cp-change { flex: none; font-size: 0.6875rem; padding: var(--xs) var(--sm); min-height: 0; }

.cp-status { margin: var(--xs) 0 0; font-size: 0.75rem; color: var(--muted); }
.cp-status.cp-error { color: var(--danger); font-weight: 600; }

/* --------------------------------------------------------------------------
   Record dialog
   --------------------------------------------------------------------------
   One record, edited over the register it came from. The title and the footer stay put
   while the body scrolls, because the footer is where a refusal is read and a refusal
   the operator has to scroll to find is a refusal they will miss.
   -------------------------------------------------------------------------- */

.record-dialog {
  width: min(720px, calc(100vw - var(--md) * 2));
  max-height: min(85vh, 900px);
  padding: 0;
  border: var(--hair) solid var(--edge);
  background: var(--panel);
  color: var(--ink);
  display: flex;
  flex-direction: column;
}
.record-dialog::backdrop { background: rgb(11 13 10 / 45%); }

.record-head {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: var(--sm);
  padding: var(--md);
  border-bottom: var(--hair) solid var(--line);
}
.record-head h2 { margin: 0; font-size: 1rem; }
.record-position {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  white-space: nowrap;
}

/* The only part that scrolls. */
.record-body { flex: 1 1 auto; overflow: auto; padding: var(--md); }

.record-context {
  margin: 0 0 var(--md);
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--xs) var(--md);
  border-bottom: var(--hair) solid var(--line);
  padding-bottom: var(--md);
}
.record-context dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.record-context dd { margin: 0; }

.record-fields { display: grid; gap: var(--md); }
.record-field { display: grid; gap: var(--xs); }
.record-label { font-weight: 600; }
.record-input { width: 100%; box-sizing: border-box; }
.record-hint { font-size: 0.75rem; color: var(--muted); }

.record-field-error,
.record-result.error { color: var(--danger); font-weight: 600; }
.record-field-error { font-size: 0.75rem; }
.record-input[aria-invalid='true'] { outline: 2px solid var(--danger); outline-offset: -2px; }

.record-result { margin: var(--md) 0 0; min-height: 1.25rem; }
.record-result.ok { color: var(--ok); }

.record-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sm);
  padding: var(--md);
  border-top: var(--hair) solid var(--line);
  flex-wrap: wrap;
}
.record-spacer { flex: 1 1 auto; }
.record-dialog.is-busy .record-body { opacity: 0.6; }

/* A phone gets a sheet: full width, and the footer stays reachable above the keyboard. */
@media (max-width: 640px) {
  .record-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    margin: 0;
  }
}

/* --------------------------------------------------------------------------
   Category menus
   --------------------------------------------------------------------------
   Five buttons that fit on one line at every width, each disclosing its own screens.
   The row used to hold seventeen and wrapped onto a second line on a laptop.
   -------------------------------------------------------------------------- */

/* `overflow: visible` undoes `header nav { overflow-x: auto }` in style.css, which was
   right when this row held seventeen buttons and is fatal now: a menu is positioned
   against its category, and `overflow-x: auto` computes `overflow-y` to `auto` as well,
   so the row clipped every dropdown to its own height. Five short names do not need a
   scrolling row. */
#chrome nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--xs);
  overflow: visible;
}

.nav-group { position: relative; display: inline-flex; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--xs);
  min-height: 44px;
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.nav-toggle:hover { background: var(--paper-sunk); color: var(--ink); }

/* The category holding the screen you are on. Its menu is shut, so without this the
   header says nothing about where you are. */
.nav-toggle.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
  font-weight: 700;
}

.nav-toggle[aria-expanded='true'] { background: var(--paper-sunk); color: var(--ink); }

/* Drawn rather than a glyph, so it reads at the weight of the rule work around it. */
.nav-caret {
  width: 0; height: 0;
  border-top: 4px solid currentColor;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  opacity: 0.7;
}
.nav-toggle[aria-expanded='true'] .nav-caret { transform: rotate(180deg); }

.nav-menu {
  position: absolute;
  z-index: 60;
  top: 100%;
  left: 0;
  min-width: max(100%, 11rem);
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--paper-lit);
  border: var(--hair) solid var(--edge);
  box-shadow: 0 2px 0 rgb(11 13 10 / 12%);
}

/* The last category would otherwise open off the right edge of the viewport. */
.nav-group:last-child .nav-menu { left: auto; right: 0; }

.nav-menu li { margin: 0; }
.nav-menu li + li { border-top: var(--hair) solid var(--line); }

#chrome nav .nav-menu button {
  display: block;
  width: 100%;
  text-align: left;
  min-height: 40px;
  padding: 0 var(--md);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}

#chrome nav .nav-menu button:hover { background: var(--paper-sunk); }

#chrome nav .nav-menu button[aria-current='page'] {
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--ink);
}

/* The nav is a scroll container on narrow screens, so an outset ring is clipped. */
.nav-toggle:focus-visible,
#chrome nav .nav-menu button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* Below the desktop widths five names stop fitting on a line — at 375px they wrapped
   onto five rows and still overflowed. They stay on one line and scroll instead, which is
   what `#chrome nav` is already built as: a scroll container whose scrollbar is hidden
   because the row itself is the affordance. Wrapping is the worse answer here, because a
   header five rows deep pushes the screen it is a header for off the viewport. */
/* Narrower than a laptop the five names stop fitting on one line. They tighten and wrap
   onto a second rather than scroll: a scrolling row would have to clip, and clipping is
   what hides the menus. Two rows of categories is a header; five was not. */
@media (max-width: 1023px) {
  .nav-toggle { padding: 0 8px; letter-spacing: 0.02em; }
}

@media (max-width: 600px) {
  .nav-toggle { padding: 0 6px; font-size: 0.6875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-caret { transition: none; }
}

/* --------------------------------------------------------------------------
   Disclosure panels
   --------------------------------------------------------------------------
   Square corners, hairline rules, tonal layering — DESIGN.md, not preference. The
   heading is the disclosure button; the summary beside it is the panel's standing
   claim while it is shut, so it is set at reading weight rather than as a caption.
   -------------------------------------------------------------------------- */

.panel {
  border: var(--hair) solid var(--line);
  background: var(--panel);
  margin: 0 0 var(--sm);
}

.panel + .panel { margin-top: calc(var(--sm) * -1 + var(--sm)); }

.panel > summary {
  display: flex;
  align-items: baseline;
  gap: var(--sm);
  padding: var(--sm) var(--md);
  cursor: pointer;
  list-style: none;
  border-bottom: var(--hair) solid transparent;
}

.panel[open] > summary { border-bottom-color: var(--line); }

.panel > summary::-webkit-details-marker { display: none; }

/* The marker is drawn rather than borrowed, so it reads at the same weight as the rule
   work around it and does not depend on a platform glyph. */
.panel > summary::before {
  content: '';
  flex: none;
  width: 0; height: 0;
  border-left: 6px solid var(--edge);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: translateY(-1px);
}
.panel[open] > summary::before { transform: rotate(90deg) translateX(-1px); }

.panel > summary > strong {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* The collapsed claim. It stays legible when the panel is open, because a summary that
   disappears on opening cannot be checked against what opening revealed. */
.panel-summary {
  flex: 1 1 auto;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.panel-pin {
  flex: none;
  font-size: 0.6875rem;
  padding: var(--xs) var(--sm);
  min-height: 0;
}
.panel-pin[aria-pressed='true'] {
  background: var(--edge);
  color: var(--paper-lit);
}

.panel-body { padding: var(--md); }
.panel-body > :first-child { margin-top: 0; }
.panel-body > :last-child { margin-bottom: 0; }

/* Focus must be visible on the heading itself, not only on the controls inside it. */
.panel > summary:focus-visible {
  outline: 2px solid var(--edge);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .panel > summary::before { transition: none; }
}