/* GAP BOS — shared interface.
 *
 * Mobile and desktop answer opposite questions. On a phone the app answers
 * "what is my next thing": one job, big targets. On a monitor it answers
 * "what is the state of everything, and what needs me". This sheet carries both,
 * with the rail collapsing to a top strip below 860px.
 *
 * Colour discipline: GAP's charcoal is structure, not surface — a wall of black
 * on a 27" monitor is unreadable. The brand yellow means exactly one thing,
 * "this needs you", and is never used for ordinary chrome. Job and record states
 * carry their own semantic colours, kept separate from the brand.
 */

:root {
  --paper:#F2F1EC; --surface:#FFFFFF; --sunken:#EBE9E2;
  --ink:#1A1A18; --ink-2:#57554D; --ink-3:#848177;
  --rule:#DEDBD2; --rule-2:#C8C4B8;
  --brand:#FFCE00;
  --running:#2E6B3E; --running-bg:#E6EFE7;
  --late:#B3261E;    --late-bg:#FBEAE8;
  --booked:#3D5A6C;  --booked-bg:#E7EDF0;
  --rail:#1A1A18; --rail-2:#2A2A26; --rail-ink:#A8A59C; --rail-dim:#55534B;
  --ui:'Barlow',system-ui,-apple-system,sans-serif;
  --tight:'Barlow Semi Condensed','Barlow',system-ui,sans-serif;
  --rail-w:13rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#15150F; --surface:#1D1D17; --sunken:#121210;
    --ink:#EDEBE2; --ink-2:#B0ADA2; --ink-3:#807D73;
    --rule:#2E2E26; --rule-2:#3D3C33;
    --running:#6FBF84; --running-bg:#17251A;
    --late:#F08074;   --late-bg:#2A1614;
    --booked:#8FB4C8; --booked-bg:#161F25;
    --rail:#0E0E0B; --rail-2:#1C1C18; --rail-dim:#4A483F;
  }
}
:root[data-theme="dark"] {
  --paper:#15150F; --surface:#1D1D17; --sunken:#121210;
  --ink:#EDEBE2; --ink-2:#B0ADA2; --ink-3:#807D73;
  --rule:#2E2E26; --rule-2:#3D3C33;
  --running:#6FBF84; --running-bg:#17251A;
  --late:#F08074;   --late-bg:#2A1614;
  --booked:#8FB4C8; --booked-bg:#161F25;
  --rail:#0E0E0B; --rail-2:#1C1C18; --rail-dim:#4A483F;
}

* { box-sizing:border-box; }
html { color-scheme:light dark; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--ui);
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums; }
button, input, select, textarea { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
a { color:inherit; }

/* ------------------------------------------------------------------ shell -- */
.app { display:grid; grid-template-columns:var(--rail-w) 1fr; min-height:100vh; }
.rail { background:var(--rail); color:var(--rail-ink); display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; }
.rail .brand { padding:1.1rem 1.1rem .9rem; border-bottom:1px solid var(--rail-2); }
.rail .mark { font-family:var(--tight); font-weight:700; font-style:italic; font-size:1.15rem; color:#fff; }
.rail .mark span { background:var(--brand); color:#1A1A18; padding:0 .25rem; font-style:normal; }
.rail .who { display:block; font-size:.78rem; color:var(--rail-ink); margin-top:.25rem; }
.rail nav { padding:.6rem 0; flex:1 1 auto; overflow-y:auto; }
/* 01-05 are GAP's own BOS function taxonomy, not decorative numbering. */
.rail .grp { font-family:var(--tight); font-size:.72rem; color:var(--rail-dim); padding:.9rem 1.1rem .3rem; }
.rail nav a { display:flex; align-items:baseline; gap:.55rem; padding:.42rem 1.1rem;
  color:var(--rail-ink); text-decoration:none; font-size:.92rem; border-left:3px solid transparent; }
.rail nav a .n { font-family:var(--tight); font-size:.75rem; color:var(--rail-dim); min-width:1.1rem; }
.rail nav a:hover { color:#fff; background:var(--rail-2); }
.rail nav a.on { color:#fff; border-left-color:var(--brand); background:var(--rail-2); }
.rail .tag { margin-left:auto; font-family:var(--tight); font-size:.66rem; padding:.05rem .3rem; border-radius:2px; }
.rail .tag.beta { background:#3B3A33; color:#CFCBBE; }
.rail .tag.internal { background:var(--late); color:#fff; }
.rail .foot { border-top:1px solid var(--rail-2); padding:.7rem 1.1rem; }
.rail .foot button { background:none; border:0; color:var(--rail-ink); cursor:pointer;
  padding:.15rem 0; display:block; font-size:.8rem; }
.rail .foot button:hover { color:#fff; }

.topbar { display:flex; align-items:center; gap:1rem; padding:.85rem 1.6rem;
  border-bottom:1px solid var(--rule); background:var(--surface); position:sticky; top:0; z-index:5; }
.topbar h1 { font-family:var(--tight); font-size:1.35rem; font-weight:600; margin:0; }
.topbar h1 em { font-style:normal; color:var(--ink-3); font-weight:500; }
.topbar .spacer { margin-left:auto; }
.entity { display:flex; border:1px solid var(--rule-2); border-radius:3px; overflow:hidden; }
.entity button { background:var(--surface); border:0; padding:.3rem .7rem; font-size:.85rem;
  cursor:pointer; color:var(--ink-2); border-right:1px solid var(--rule); }
.entity button:last-child { border-right:0; }
.entity button[aria-pressed="true"] { background:var(--ink); color:var(--paper); }

.previewbar { display:none; background:var(--late); color:#fff; padding:.55rem 1.6rem;
  font-size:.85rem; align-items:center; gap:.75rem; flex-wrap:wrap; }
.previewbar.on { display:flex; }
.previewbar .short { flex-basis:100%; font-size:.8rem; opacity:.9; }
.previewbar button { margin-left:auto; background:#fff; color:var(--late); border:0;
  border-radius:3px; padding:.25rem .7rem; font-weight:600; font-size:.8rem; cursor:pointer; }

main { padding:1.4rem 1.6rem 3rem; }
.wide { max-width:1500px; }
.reading { max-width:44rem; }

/* ----------------------------------------------------------------- panels -- */
.panel { background:var(--surface); border:1px solid var(--rule); border-radius:4px; margin-bottom:1.4rem; }
.panel > h2 { font-family:var(--tight); font-size:1rem; font-weight:600; margin:0;
  padding:.7rem 1rem; border-bottom:1px solid var(--rule); display:flex; align-items:baseline; gap:.6rem; }
.panel > h2 .count { color:var(--ink-3); font-weight:500; font-size:.85rem; }
.panel > h2 .right { margin-left:auto; font-family:var(--ui); font-size:.82rem; color:var(--ink-3); font-weight:400; }
.panel .pad { padding:1rem; }

.cols { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:1.4rem; align-items:start; }
.cols > * { min-width:0; }
@media (max-width:1100px) { .cols { grid-template-columns:1fr; } }

.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule);
  border:1px solid var(--rule); border-radius:4px; overflow:hidden; margin-bottom:1.4rem; }
.stat { background:var(--surface); padding:.75rem 1rem; }
.stat .v { font-family:var(--tight); font-size:1.7rem; font-weight:700; line-height:1.1; }
.stat .v.late { color:var(--late); }
.stat .k { font-size:.82rem; color:var(--ink-3); }
@media (max-width:760px) { .stats { grid-template-columns:repeat(2,1fr); } }

/* ------------------------------------------------------------------ lists -- */
.items { display:flex; flex-direction:column; }
.item { display:grid; grid-template-columns:auto 1fr auto; gap:.1rem .7rem; align-items:start;
  padding:.65rem 1rem; border-bottom:1px solid var(--sunken); text-align:left;
  background:none; border-left:0; border-right:0; border-top:0; width:100%; cursor:pointer; }
.item:last-child { border-bottom:0; }
.item:hover { background:var(--paper); }
.pip { width:7px; height:7px; border-radius:50%; margin-top:.45rem; }
.pip.late { background:var(--late); } .pip.brand { background:var(--brand); }
.pip.calm { background:var(--rule-2); } .pip.ok { background:var(--running); }
.item .t { font-size:.92rem; }
.item .m { grid-column:2; font-size:.8rem; color:var(--ink-3); }
.item .age { font-size:.8rem; color:var(--ink-3); white-space:nowrap; }
.item .age.late { color:var(--late); font-weight:600; }

.empty { padding:1.8rem 1rem; color:var(--ink-3); font-size:.9rem; }
.empty b { display:block; color:var(--ink); font-weight:600; margin-bottom:.25rem; font-size:.95rem; }

/* ----------------------------------------------------------------- tables -- */
.tablewrap { overflow-x:auto; }
table.data { width:100%; border-collapse:collapse; font-size:.9rem; }
table.data th { font-family:var(--tight); font-weight:600; font-size:.82rem; color:var(--ink-3);
  text-align:left; padding:.5rem 1rem; border-bottom:1px solid var(--rule); white-space:nowrap; }
table.data td { padding:.5rem 1rem; border-bottom:1px solid var(--sunken); white-space:nowrap; }
table.data tr:last-child td { border-bottom:0; }
table.data tbody tr:hover td { background:var(--paper); }
table.data td.num, table.data th.num { text-align:right; }
table.data td.key { font-family:var(--tight); font-weight:600; }
table.data td .sub { display:block; font-size:.78rem; color:var(--ink-3); font-weight:400; font-family:var(--ui); }

.state { display:inline-block; font-family:var(--tight); font-size:.78rem; padding:.05rem .4rem;
  border-radius:2px; border:1px solid; }
.state.open  { color:var(--booked);  border-color:var(--booked);  background:var(--booked-bg); }
.state.done  { color:var(--running); border-color:var(--running); background:var(--running-bg); }
.state.stuck { color:var(--late);    border-color:var(--late);    background:var(--late-bg); }

/* -------------------------------------------------------------- run sheet -- */
.day { padding:.2rem 0 .9rem; }
.axis { position:relative; height:1.5rem; margin:.4rem 1rem 0 9rem; border-bottom:1px solid var(--rule); }
.axis span { position:absolute; transform:translateX(-50%); font-size:.75rem; color:var(--ink-3);
  font-family:var(--tight); }
.rows { position:relative; }
.row { display:grid; grid-template-columns:9rem 1fr; align-items:center; padding:.18rem 1rem .18rem 0; }
.row + .row { border-top:1px solid var(--sunken); }
.row .who { padding-left:1rem; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .who small { display:block; color:var(--ink-3); font-size:.75rem; }
.track { position:relative; height:2.1rem; }
.track::before { content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--sunken); }
.blk { position:absolute; top:.25rem; bottom:.25rem; border-radius:2px; padding:0 .45rem;
  font-size:.8rem; line-height:1.6rem; white-space:nowrap; overflow:hidden;
  border-left:3px solid; cursor:pointer; background:var(--booked-bg);
  border-color:var(--booked); color:var(--booked); }
.blk.running { background:var(--running-bg); border-color:var(--running); color:var(--running); font-weight:600; }
.blk.activity { background:var(--sunken); border-color:var(--rule-2); color:var(--ink-3); }
.blk:hover { filter:brightness(.97); }
/* The clock hand. Static: the line already says where we are. */
.nowline { position:absolute; top:-1.5rem; bottom:0; width:2px; background:var(--brand); z-index:2; }
.nowline::after { content:'now'; position:absolute; top:-1.15rem; left:50%; transform:translateX(-50%);
  font-family:var(--tight); font-size:.68rem; color:#1A1A18; background:var(--brand);
  padding:0 .25rem; border-radius:2px; }
.flag { margin:.7rem 1rem 0; padding:.5rem .7rem; background:var(--late-bg);
  border-left:3px solid var(--late); font-size:.86rem; color:var(--late); border-radius:2px; }

/* ------------------------------------------------------------------ forms -- */
.field { margin-bottom:.9rem; }
.field label { display:block; font-family:var(--tight); font-size:.85rem; color:var(--ink-2); margin-bottom:.2rem; }
input[type=text], input[type=search], input[type=email], input[type=date], select, textarea {
  width:100%; padding:.45rem .6rem; border:1px solid var(--rule-2); border-radius:3px;
  background:var(--surface); color:var(--ink); font-size:.92rem; }
textarea { min-height:6rem; resize:vertical; }
.btn { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .9rem; border-radius:3px;
  border:1px solid var(--rule-2); background:var(--surface); cursor:pointer; font-size:.9rem; }
.btn:hover { background:var(--paper); }
.btn.primary { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn.primary:hover { filter:brightness(1.15); }
.btn:disabled { opacity:.45; cursor:default; }

/* --------------------------------------------------------------- view as -- */
dialog.roles { border:0; border-radius:6px; padding:0; max-width:26rem; width:calc(100% - 2rem);
  background:var(--surface); color:var(--ink); }
dialog.roles::backdrop { background:rgba(26,26,24,.55); }
dialog.roles h3 { font-family:var(--tight); margin:0; padding:1rem 1.15rem .4rem; font-size:1.05rem; }
dialog.roles .hint { margin:0; padding:0 1.15rem .8rem; font-size:.85rem; color:var(--ink-3); }
dialog.roles .opts { display:flex; flex-direction:column; border-top:1px solid var(--rule); }
dialog.roles .opts button { text-align:left; background:var(--surface); border:0;
  border-bottom:1px solid var(--sunken); padding:.7rem 1.15rem; font-size:.92rem; cursor:pointer; }
dialog.roles .opts button:hover { background:var(--paper); }
dialog.roles .opts button small { display:block; color:var(--ink-3); font-size:.75rem; margin-top:.1rem; }
dialog.roles .sect { font-family:var(--tight); font-size:.78rem; color:var(--ink-3);
  padding:.6rem 1.15rem .25rem; border-top:1px solid var(--rule); background:var(--paper); }
dialog.roles .none { padding:.7rem 1.15rem; font-size:.85rem; color:var(--ink-3); }
dialog.roles .close { width:100%; padding:.7rem; border:0; background:var(--paper);
  font-weight:600; font-size:.9rem; cursor:pointer; }

/* ------------------------------------------------------------- responsive -- */
@media (max-width:860px) {
  .app { grid-template-columns:1fr; }
  .rail { position:static; height:auto; flex-direction:row; align-items:center; overflow-x:auto; }
  .rail .brand { border-bottom:0; border-right:1px solid var(--rail-2); white-space:nowrap; }
  .rail .who { display:none; }
  .rail nav { display:flex; padding:0; overflow-x:auto; }
  .rail .grp, .rail .tag, .rail nav a .n { display:none; }
  /* The footer stays. Checking what a technician sees on a phone is one of the
     main reasons to open "View as", so hiding it here defeats the point. */
  .rail .foot { border-top:0; border-left:1px solid var(--rail-2); margin-left:auto;
    display:flex; gap:.9rem; align-items:center; padding:.7rem .9rem; white-space:nowrap; }
  .rail nav a { border-left:0; border-bottom:3px solid transparent; padding:.7rem .8rem; white-space:nowrap; }
  .rail nav a.on { border-left:0; border-bottom-color:var(--brand); }
  .topbar { flex-wrap:wrap; padding:.7rem 1rem; }
  .previewbar { padding:.5rem 1rem; }
  main { padding:1rem; }
  .row { grid-template-columns:6.5rem 1fr; }
  .axis { margin-left:6.5rem; }
}
@media print {
  .rail, .topbar .entity, .previewbar { display:none; }
  .app { grid-template-columns:1fr; }
  .panel { break-inside:avoid; }
}