/* On-Call Giveaway. Built on the PTO design system in app.css: every colour is one of its tokens,
   so light and dark both follow theme.js without a second set of values here. */

.ocg{ padding-bottom:6rem; }               /* room for the action bar */
.ocg-sec{ margin-top:var(--vgap); }
.ocg-head{ margin-bottom:.6rem; }
.ocg-head .sect-title{ margin:0 0 .2rem; }
.ocg-sub{ margin:.15rem 0 0; color:var(--muted); max-width:72ch; line-height:1.45; }
.ocg-muted{ color:var(--muted); }
.ocg-note{ color:var(--muted); font-size:.9em; }

/* ---- flash ---- */
.ocg-flash{ margin-top:var(--vgap); padding:.7rem .9rem; border-radius:var(--radius); border:1px solid var(--rule); background:var(--paper); }
.ocg-flash.ok{ background:var(--green-bg); color:var(--green-ink); border-color:transparent; }
.ocg-flash.warn{ background:var(--amber-bg); color:var(--amber-ink); border-color:var(--amber-line); }
.ocg-flash.bad{ background:var(--red-bg); color:var(--red-ink); border-color:transparent; }

/* ---- shift cards ---- */
.ocg-shift{ margin-bottom:.8rem; }
.ocg-shift-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem; flex-wrap:wrap; margin-bottom:.7rem; }
.ocg-shift-acts{ display:flex; gap:.5rem; flex-wrap:wrap; }
.ocg-rot{ font-weight:700; }
.ocg-range{ color:var(--muted); font-size:.92em; }
.ocg-days{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:.5rem; }
.ocg-day{ border:1px solid var(--rule); border-radius:10px; padding:.55rem .65rem; background:var(--paper); min-height:4.6rem; display:flex; flex-direction:column; gap:.25rem; }
.ocg-day.pick{ cursor:pointer; }
.ocg-day.pick:hover{ background:var(--hover); }
.ocg-day.pick:focus-visible, .ocg-row.pick:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.ocg-day.on{ border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); background:var(--hover); }
.ocg-day-top{ display:flex; align-items:baseline; gap:.4rem; }
.ocg-dow{ font-weight:700; }
.ocg-date{ color:var(--muted); }
.ocg-tick{ margin-left:auto; width:1.15rem; height:1.15rem; border:1.5px solid var(--muted); border-radius:4px; display:inline-grid; place-items:center; font-size:.8rem; line-height:1; }
.ocg-day.on .ocg-tick{ background:var(--blue); border-color:var(--blue); color:var(--on-blue); }
.ocg-day-span{ font-size:.82em; color:var(--muted); line-height:1.3; }
.ocg-day-foot{ margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .45rem; font-size:.85em; }
.ocg-who{ font-weight:600; }
/* A day card is 143px wide on a phone, so its pill wraps rather than running past the edge. */
.ocg-day .ocg-pill{ white-space:normal; line-height:1.25; }

/* ---- pills ---- */
.ocg-pill{ display:inline-block; padding:.1rem .5rem; border-radius:999px; font-size:.78rem; font-weight:600; white-space:nowrap; }
.pill-amber{ background:var(--amber-bg); color:var(--amber-ink); }
.pill-green{ background:var(--green-bg); color:var(--green-ink); }
.pill-red{ background:var(--red-bg); color:var(--red-ink); }
.pill-muted{ background:var(--track); color:var(--muted); }

/* ---- lists ---- */
.ocg-list{ margin-bottom:.8rem; padding:0; overflow:hidden; }
.ocg-list-head{ display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; padding:.7rem .9rem; border-bottom:1px solid var(--rule); }
.ocg-row{ display:flex; align-items:center; gap:.7rem; padding:.6rem .9rem; border-bottom:1px solid var(--rule); flex-wrap:wrap; }
.ocg-row:last-child{ border-bottom:0; }
.ocg-row.pick{ cursor:pointer; }
.ocg-row.pick:hover{ background:var(--hover); }
.ocg-row.on{ background:var(--hover); }
.ocg-row.locked{ color:var(--muted); }
.ocg-box{ width:1.15rem; height:1.15rem; border:1.5px solid var(--muted); border-radius:4px; display:inline-grid; place-items:center; font-size:.8rem; flex:0 0 auto; }
.ocg-row.on .ocg-box{ background:var(--blue); border-color:var(--blue); color:var(--on-blue); }
.ocg-row.locked .ocg-box{ visibility:hidden; }
.ocg-row-when{ font-weight:600; }
.ocg-row-who{ color:var(--muted); }
.ocg-row.static .ocg-pill{ margin-left:auto; }

/* ---- cover to-do ---- */
.ocg-todo{ border-left:4px solid var(--blue); margin-bottom:.8rem; }   /* blue, the colour of a claimed day */
.ocg-todo-title{ font-weight:700; }
.ocg-cover{ display:flex; gap:.3rem 1.4rem; flex-wrap:wrap; padding:.55rem 0; border-top:1px solid var(--rule); }
.ocg-cover:first-of-type{ margin-top:.6rem; }

/* ---- buttons ---- */
.ocg-btn{ font:inherit; font-weight:600; border:0; border-radius:8px; padding:.55rem 1rem; background:var(--blue); color:var(--on-blue); cursor:pointer; min-height:40px; }
.ocg-btn:disabled{ opacity:.6; cursor:default; }
.ocg-btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--rule); }
.ocg-btn.sm{ padding:.3rem .7rem; min-height:32px; font-size:.88em; }
.ocg-link{ font:inherit; font-size:.9em; background:none; border:0; padding:.2rem; color:var(--blue); text-decoration:underline; cursor:pointer; }
:root[data-theme="dark"] .ocg-link{ color:var(--bluesub); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ocg-link{ color:var(--bluesub); } }

/* ---- action bar ---- */
.ocg-bar{ position:fixed; left:50%; bottom:1rem; transform:translateX(-50%); z-index:20; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; justify-content:center;
  background:var(--paper); border:1px solid var(--rule); border-radius:14px; box-shadow:var(--shadow); padding:.6rem .7rem .6rem 1rem; width:min(560px, calc(100vw - 32px)); }
.ocg-bar #ocg-bar-text{ font-weight:600; margin-right:auto; }
/* display:flex above beats the hidden attribute, so an empty bar showed with nothing selected. */
.ocg-bar[hidden], .ocg-flash[hidden], .ocg-sec[hidden]{ display:none; }

/* ---- management ---- */
.ocg-tbl{ width:100%; border-collapse:collapse; }
.ocg-tbl th, .ocg-tbl td{ text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--rule); vertical-align:middle; }
.ocg-tbl th{ font-size:.82em; color:var(--muted); font-weight:600; }
.ocg-acts{ white-space:nowrap; }
.ocg-sel{ font:inherit; font-size:.9em; padding:.3rem .4rem; border:1px solid var(--rule); border-radius:6px; background:var(--paper); color:var(--ink); max-width:14rem; }

.ocg-alert{ background:var(--red-bg); color:var(--red-ink); border-left:4px solid var(--danger); border-radius:4px; padding:.8rem 1rem; margin-bottom:1rem; }
.ocg-alert-title{ font-weight:700; margin-bottom:.25rem; }
.ocg-alert p{ margin:0 0 .4rem; max-width:80ch; line-height:1.45; }
.ocg-alert ul{ margin:0; padding-left:1.1rem; }
/* ---- day states (look-and-feel item 2): a coloured left edge and a light tint, so a week reads at
   a glance. Blue is mixed from the brand token because app.css has no blue tint of its own. ---- */
.ocg-day{ border-left-width:4px; }
.ocg-day.st-free{ border-left-color:var(--rule); background:var(--ocg-tile, var(--paper)); }
.ocg-day.st-offered{ border-left-color:var(--amber); background:var(--amber-bg); }
.ocg-day.st-claimed{ border-left-color:var(--blue); background:color-mix(in srgb, var(--blue) 9%, var(--paper)); }
.ocg-day.st-covered{ border-left-color:var(--moss); background:var(--green-bg); }
.ocg-day.st-risk{ border-left-color:var(--danger); background:var(--red-bg); }
.ocg-day.st-past{ border-left-color:var(--rule); opacity:.55; }
.ocg-day.pick:hover{ filter:brightness(.98); }
.ocg-day.on{ border-color:var(--blue); border-left-color:var(--blue); }
.ocg-tick.none{ visibility:hidden; }                    /* keeps the slot, so tiles stay level (item 3) */
.ocg-state{ font-weight:700; font-size:.82em; }
.st-free .ocg-state, .st-past .ocg-state{ color:var(--muted); font-weight:600; }
.st-offered .ocg-state{ color:var(--amber-ink); }
.st-claimed .ocg-state{ color:var(--blue); }
.st-covered .ocg-state{ color:var(--green-ink); }
.st-risk .ocg-state{ color:var(--red-ink); }
:root[data-theme="dark"] .st-claimed .ocg-state{ color:var(--bluesub); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .st-claimed .ocg-state{ color:var(--bluesub); } }
.ocg-day-foot{ flex-direction:column; align-items:flex-start; gap:.1rem; }
/* Always two lines, so every tile's time block is the same height whatever the tile width. */
.ocg-day-span span{ display:block; white-space:nowrap; }
.ocg-day-foot .ocg-link{ padding:0; }

/* ---- summary (item 1) ---- */
.ocg-summary{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:var(--vgap); }
.ocg-stat{ display:flex; align-items:baseline; gap:.5rem; padding:.6rem .9rem; border:1px solid var(--rule); border-left:4px solid var(--rule); border-radius:4px; background:var(--paper); }
.ocg-stat b{ font-size:1.35rem; line-height:1; }
.ocg-stat span{ color:var(--muted); }
.ocg-stat.st-claimed{ border-left-color:var(--blue); }
.ocg-stat.st-offered{ border-left-color:var(--amber); }
.ocg-stat.st-covered{ border-left-color:var(--moss); }
.ocg-stat.st-free{ border-left-color:var(--muted); }

.ocg-tag{ display:inline-block; margin-left:.4rem; padding:.05rem .45rem; border:1px solid var(--rule); border-radius:4px; font-size:.78rem; font-weight:600; color:var(--muted); vertical-align:middle; }

/* ---- fixed columns (item 5) ---- */
.ocg-cols .ocg-col-row{ display:grid; grid-template-columns:3rem 4.2rem 11rem minmax(0,1fr) auto; gap:.3rem .8rem; align-items:center; padding:.6rem .9rem; border-bottom:1px solid var(--rule); }
.ocg-cols .ocg-col-row:last-child{ border-bottom:0; }
.ocg-cols-todo .ocg-col-row{ padding:.55rem 0; border-top:1px solid var(--rule); border-bottom:0; }
.c-dow{ font-weight:700; }
.c-date, .c-time{ color:var(--muted); font-variant-numeric:tabular-nums; }
.c-extra{ color:var(--muted); justify-self:end; }

.ocg-members{ margin-top:1rem; }
.ocg-members summary{ cursor:pointer; font-weight:600; padding:.3rem 0; }

/* Square corners on every control (Alex, 2026-10-14: "liking more square buttons and whatnot than
   the rounded"), at the 4px the Vacation Calendar's on-call toggles use, and 2px on the small
   check boxes as on its markers. Cards keep app.css's radius so this page sits with the others. */
.ocg .ocg-btn, .ocg-bar .ocg-btn, .ocg-pill, .ocg .fbtn, .ocg .fcount, .ocg-sel, .ocg-day, .ocg-bar, .ocg-flash{ border-radius:4px; }
.ocg-tick, .ocg-box{ border-radius:2px; }

@media (max-width:640px){
  .ocg-cols .ocg-col-row{ grid-template-columns:2.6rem 3.8rem minmax(0,1fr); }
  .ocg-cols .c-who, .ocg-cols .c-extra{ grid-column:2 / -1; justify-self:start; }
  .ocg-days{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .ocg-tbl thead{ display:none; }
  /* app.css gives tables in .tbl-wrap min-width:520px for its sideways scroll; the stacked layout replaces that here. */
  .ocg-tbl, .ocg-tbl tbody, .ocg-tbl tr, .ocg-tbl td{ display:block; width:100%; min-width:0; }
  .ocg-tbl tr{ border-bottom:1px solid var(--rule); padding:.4rem 0; }
  .ocg-tbl td{ border:0; padding:.15rem .2rem; }
  .ocg-acts{ white-space:normal; display:flex !important; gap:.5rem; align-items:center; flex-wrap:wrap; }
}

/* ---- sections as panels, and straight coloured edges (Alex, 2026-10-14) ----
   Placed last so it wins over the rules above.

   "Straighten the rounded left border": a 4px coloured left edge on a rounded box curves at
   both ends, so every box that carries one has square left corners. The other corners keep
   the page's 4px.

   "Place all sections in a section so it doesn't feel like sections are just free floating on
   the background": each section, and the summary, sits on a paper panel. Cards inside a panel
   drop to the canvas colour without a shadow, so the order reads panel, week card, day tile
   rather than white on white. */
.ocg-day, .ocg-stat, .ocg-todo, .ocg-alert{ border-top-left-radius:0; border-bottom-left-radius:0; }

/* ================================================================================
   ONE CONTAINER, AND A COLOURED BAR PER SECTION
   ================================================================================
   Alex, 2026-10-14: "i want all of the sections in a container section", then pointed at the
   expertise profile in /who as the format: "a format like this that looks clean and organized".
   So this follows web/who.css, "A COLOUR PER SECTION, FROM ONE TOKEN". The container sits a shade
   darker than the page, each section is a white box, its header is a solid bar with an uppercase
   label and a count, and the box outline takes the bar's colour. Each section sets --sec once
   and every rule reads it.

   The bar tokens are copied from web/app.css with both themes, because the PTO pages load their
   own stylesheet and not that one. Contrast for each pair is measured in who.css. Corners are
   4px, not who.css's 10-12px, to keep Alex's preference for square controls. */
:root{
  --bar-blue:#014A73;   --on-bar-blue:#FFFFFF;
  --bar-orange:#EE7522; --on-bar-orange:#242424;
  --bar-rust:#C33E1D;   --on-bar-rust:#FFFFFF;
  --bar-slate:#565B61;  --on-bar-slate:#FFFFFF;
  --bar-char:#242424;   --on-bar-char:#FFFFFF;
  --bar-peach:#F0A878;  --on-bar-peach:#242424;
  --bar-pale:#FBE5D5;   --on-bar-pale:#242424;  --line-bar-pale:#E4B48D;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bar-blue:#8FB6CE;   --on-bar-blue:#211E19;
    --bar-orange:#F5A55A; --on-bar-orange:#211E19;
    --bar-rust:#E8836A;   --on-bar-rust:#211E19;
    --bar-slate:#A7AFB7;  --on-bar-slate:#211E19;
    --bar-char:#D5D0CA;   --on-bar-char:#211E19;
    --bar-peach:#E8C9AE;  --on-bar-peach:#211E19;
    --bar-pale:#BFA994;   --on-bar-pale:#211E19;  --line-bar-pale:#BFA994;
  }
}
:root[data-theme="dark"]{
  --bar-blue:#8FB6CE;   --on-bar-blue:#211E19;
  --bar-orange:#F5A55A; --on-bar-orange:#211E19;
  --bar-rust:#E8836A;   --on-bar-rust:#211E19;
  --bar-slate:#A7AFB7;  --on-bar-slate:#211E19;
  --bar-char:#D5D0CA;   --on-bar-char:#211E19;
  --bar-peach:#E8C9AE;  --on-bar-peach:#211E19;
  --bar-pale:#BFA994;   --on-bar-pale:#211E19;  --line-bar-pale:#BFA994;
}
.sec-blue  { --sec:var(--bar-blue);   --sec-on:var(--on-bar-blue); }
.sec-orange{ --sec:var(--bar-orange); --sec-on:var(--on-bar-orange); }
.sec-rust  { --sec:var(--bar-rust);   --sec-on:var(--on-bar-rust); }
.sec-slate { --sec:var(--bar-slate);  --sec-on:var(--on-bar-slate); }
.sec-char  { --sec:var(--bar-char);   --sec-on:var(--on-bar-char); }

/* The container holds the sections but draws nothing. Alex, 2026-10-14, after seeing the stone
   frame: the banded sections "look clean without the background", so the frame went and the
   summary got a band of its own to match them. */
.ocg-panel{ background:none; border:0; padding:0; margin-top:var(--vgap); }
.ocg-summary{ margin:0; }
.ocg-summary[hidden]{ display:none; }
.ocg-stat{ background:var(--canvas); }
.sec-peach { --sec:var(--bar-peach);  --sec-on:var(--on-bar-peach); }
.sec-pale  { --sec:var(--bar-pale);   --sec-on:var(--on-bar-pale); }
/* The pale bar is too light to outline its own box, so the box takes the bar's line colour, as
   app.css does for every bar with --line-bar-*. */
.ocg-panel .sec-pale{ border-color:var(--line-bar-pale); }

/* Swaps: one proposal per card, the two sides of it as labelled rows of day tiles. */
.ocg-swap{ border:1px solid var(--ocg-week-line); background:var(--ocg-week); border-radius:4px; padding:.75rem; margin:0 0 .75rem; }
.ocg-swap-head{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.ocg-swap-title{ font-weight:700; }
.ocg-swap-side{ margin:.6rem 0 .3rem; font-size:.88em; font-weight:600; }
.ocg-swap-acts{ display:flex; gap:.5rem; flex-wrap:wrap; }
.ocg-swap-go{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-top:.25rem; }

/* A section: a white box outlined in its colour, with the band as its top edge. Named ocg-band
   because ocg-bar is the fixed action bar at the foot of the page, and sharing the name pinned every
   section header to the bottom of the window. */
.ocg-panel .ocg-sec{ margin:0 0 .8rem; padding:0; background:var(--paper);
  border:1px solid var(--sec, var(--rule)); border-radius:4px; overflow:hidden; }
.ocg-panel .ocg-sec:last-child{ margin-bottom:0; }
.ocg-band{ display:flex; align-items:center; gap:.5rem; margin:0; padding:.55rem .9rem;
  background:var(--sec); color:var(--sec-on);
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; }
/* The count reverses out of the bar in the bar's own text colour, as in who.css. */
.ocg-band > i{ margin-left:auto; font-style:normal; font-weight:700; font-size:.72rem;
  padding:.05rem .45rem; border-radius:3px; background:var(--sec-on); color:var(--sec);
  font-variant-numeric:tabular-nums; letter-spacing:0; }
.ocg-band > i[hidden]{ display:none; }
.ocg-body{ padding:.85rem .9rem .9rem; }
.ocg-body > .ocg-sub{ margin:0 0 .7rem; }

/* Week cards inside a white section sit on the page colour, then white day tiles on them. */
.ocg-panel .card{ background:var(--ocg-week, var(--canvas)); box-shadow:none; border:1px solid var(--ocg-week-line, var(--rule)); border-radius:4px; }
.ocg-panel .card:last-child{ margin-bottom:0; }
.ocg-panel .empty{ padding:.4rem 0; }
.ocg-panel .tbl-wrap{ background:var(--paper); }
.ocg-cols-todo .ocg-col-row:first-child{ border-top:0; }
/* The section body already pads, so list rows inside it do not pad their sides again. */
.ocg-body .ocg-cols .ocg-col-row{ padding-left:0; padding-right:0; }

@media (max-width:640px){
  .ocg-panel{ padding:.6rem; }
  .ocg-body{ padding:.7rem; }
}

/* ---- week cards and day tiles (Alex, 2026-10-14) ----
   From option C2: white week cards drawn by their outline inside each white section, and day tiles
   a step off white so they still read as tiles. The week outline was darkened from #E3DCD0 to
   #C9C0B0 the same day (Alex: make that border a little darker to differentiate those sections).
   The stone container C2 also had was removed the
   same day, once the banded sections proved clean enough on the page by themselves.
   Dark values keep the same steps. */
:root{ --ocg-week:#FFFFFF; --ocg-week-line:#C9C0B0; --ocg-tile:#FAF8F4; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --ocg-week:#211E19; --ocg-week-line:#544B3F; --ocg-tile:#28241F; }
}
:root[data-theme="dark"]{ --ocg-week:#211E19; --ocg-week-line:#544B3F; --ocg-tile:#28241F; }

/* ================================================================================
   LAYOUT B (Alex, 2026-10-16, chosen from four side-by-side options): the next week open, every
   later week folded to one line. Day tiles are white with the date large, the state as text and
   a strip along the foot, so the colour sits in one place rather than tinting the whole tile.
   Friday, Saturday and Sunday carry a warm strip because they run different hours. These rules
   sit last and carry .ocg-panel so they replace the earlier tile rules without !important.
   ================================================================================ */
:root{ --ocg-we:#E2C9A6; --ocg-we-ink:#8A5A2B; --ocg-pick:#EAF1F6; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ocg-we:#6B5238; --ocg-we-ink:#E2C9A6; --ocg-pick:#1E2C36; } }
:root[data-theme="dark"]{ --ocg-we:#6B5238; --ocg-we-ink:#E2C9A6; --ocg-pick:#1E2C36; }

.ocg-panel .ocg-days{ grid-template-columns:repeat(7, minmax(0, 1fr)); gap:.5rem; }
.ocg-panel .ocg-day{ position:relative; overflow:hidden; border:1px solid var(--rule); border-radius:4px; background:var(--paper);
  padding:.6rem .65rem .9rem; min-height:0; gap:.3rem; filter:none; }
.ocg-panel .ocg-day.pick:hover{ background:var(--hover, #FBF9F5); }
.ocg-panel .ocg-day.on{ border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); background:var(--ocg-pick); }
.ocg-panel .ocg-day.st-past{ opacity:.5; }
.ocg-panel .ocg-day-top{ display:flex; align-items:center; justify-content:space-between; }
.ocg-panel .ocg-dow{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.ocg-panel .ocg-day.we .ocg-dow{ color:var(--ocg-we-ink); }
.ocg-num{ font-family:'Bricolage Grotesque', serif; font-size:1.65rem; font-weight:600; line-height:1; letter-spacing:-.02em; }
.ocg-num small{ white-space:nowrap; font-family:'Hanken Grotesk', system-ui, sans-serif; font-size:.78rem; font-weight:600; color:var(--muted); margin-left:.3rem; letter-spacing:0; }
.ocg-panel .ocg-day-span{ font-size:.78rem; color:var(--muted); line-height:1.3; }
.ocg-panel .ocg-day-foot{ flex-direction:column; align-items:flex-start; gap:.1rem; margin-top:auto; font-size:.82rem; }
.ocg-strip{ position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--rule); }
.ocg-day.we .ocg-strip{ background:var(--ocg-we); }
.ocg-day.on .ocg-strip{ background:var(--blue); }
.ocg-day.st-offered .ocg-strip{ background:var(--amber); }
.ocg-day.st-claimed .ocg-strip{ background:var(--blue); }
.ocg-day.st-covered .ocg-strip{ background:var(--moss); }
.ocg-day.st-risk .ocg-strip{ background:var(--danger); }

/* The open week. The next one gets the stronger heading. */
.ocg-panel .ocg-shift{ padding:.9rem; margin-bottom:.6rem; }
.ocg-kicker{ font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.ocg-next .ocg-kicker{ color:var(--bar-rust); }
.ocg-panel .ocg-range{ color:var(--ink); font-size:1.08rem; font-weight:600; margin-top:.15rem; }
.ocg-next .ocg-range{ font-size:1.25rem; }

/* A folded week: one line you click to open. */
.ocg-fold{ display:grid; grid-template-columns:minmax(0, 1fr) auto auto; gap:1rem; align-items:center; width:100%; text-align:left;
  font:inherit; color:inherit; background:none; border:0; border-top:1px solid var(--rule); padding:.75rem .35rem; cursor:pointer; }
.ocg-fold:hover{ background:var(--hover, #FBF9F5); }
.ocg-fold:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; }
.ocg-fold-lbl b{ font-weight:700; }
.ocg-fold-lbl span{ color:var(--muted); font-size:.9em; }
.ocg-fold-go{ color:var(--muted); font-size:.88em; white-space:nowrap; }
.ocg-dots{ display:flex; gap:4px; }
.ocg-dots i{ width:11px; height:11px; border-radius:2px; background:var(--rule); display:inline-block; }
.ocg-dots i.we{ background:var(--ocg-we); }
.ocg-dots i.st-offered{ background:var(--amber); }
.ocg-dots i.st-claimed{ background:var(--blue); }
.ocg-dots i.st-covered{ background:var(--moss); }
.ocg-dots i.st-risk{ background:var(--danger); }
.ocg-dots i.st-past{ opacity:.4; }

@media (max-width: 760px){
  .ocg-panel .ocg-days{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .ocg-fold{ grid-template-columns:minmax(0, 1fr) auto; }
  .ocg-fold-go{ display:none; }
}
@media (max-width: 420px){
  .ocg-panel .ocg-days{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}


/* Headings cleaned up (Alex, 2026-10-16). The week reads as a short date range with the handover
   hours on a quieter line beneath, and the section's instruction is one short line. */
.ocg-panel .ocg-range{ font-size:1.15rem; font-weight:600; letter-spacing:-.01em; margin-top:.2rem; line-height:1.2; }
.ocg-next .ocg-range{ font-size:1.4rem; }
.ocg-hours{ color:var(--muted); font-size:.85rem; margin-top:.15rem; }
.ocg-body > .ocg-sub{ font-size:.92rem; margin:0 0 .8rem; }

/* Tile borders, option B (Alex, 2026-10-16, chosen from four side by side). Each day carries a
   2px border in its own state color, so the state reads from across the room, and the strip along
   the foot goes because the border now does its job. */
:root{ --ocg-tile-line:#D9D1C2; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ocg-tile-line:#544B3F; } }
:root[data-theme="dark"]{ --ocg-tile-line:#544B3F; }
.ocg-panel .ocg-day{ border:2px solid var(--ocg-tile-line); padding-bottom:.65rem; }
.ocg-panel .ocg-strip{ display:none; }
.ocg-panel .ocg-day.we{ border-color:var(--ocg-we); }
.ocg-panel .ocg-day.st-offered{ border-color:var(--amber); }
.ocg-panel .ocg-day.st-claimed{ border-color:var(--blue); }
.ocg-panel .ocg-day.st-covered{ border-color:var(--moss); }
.ocg-panel .ocg-day.st-risk{ border-color:var(--danger); }
.ocg-panel .ocg-day.on{ border-color:var(--blue); box-shadow:none; }

/* Folded weeks in aligned columns (Alex, 2026-10-16): date range, rotation, day count, the day
   squares and Open each keep their own column, so every row lines up with the one above it. */
.ocg-panel .ocg-fold{ grid-template-columns:minmax(10rem, 13rem) minmax(0, 1fr) 4.5rem auto 4rem; gap:1.25rem; }
.ocg-fold-range{ font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ocg-fold-rot{ color:var(--muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ocg-fold-n{ color:var(--muted); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.ocg-panel .ocg-dots{ justify-content:flex-end; min-width:calc(7 * 11px + 6 * 4px); }
.ocg-panel .ocg-fold-go{ text-align:right; }
@media (max-width: 760px){
  .ocg-panel .ocg-fold{ grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"range dots" "rot n"; row-gap:.25rem; column-gap:.75rem; }
  .ocg-fold-range{ grid-area:range; }
  .ocg-fold-rot{ grid-area:rot; }
  .ocg-fold-n{ grid-area:n; }
  .ocg-panel .ocg-dots{ grid-area:dots; }
  .ocg-panel .ocg-fold-go{ display:none; }
}



/* ================================================================================
   PANES (Alex, 2026-10-20: organize the management and swap sections "in a clean way"). Each part
   is a box with its title and a short note on the left and its controls on the right, so no
   control sits alone on a full-width strip. Folded boxes open on their head.
   ================================================================================ */
.ocg-pane{ border:1px solid var(--ocg-week-line); border-radius:4px; background:var(--paper); margin:0 0 .75rem; }
.ocg-pane:last-child{ margin-bottom:0; }
.ocg-pane-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem 1rem; flex-wrap:wrap; padding:.75rem .9rem; }
.ocg-pane-title{ font-weight:700; font-size:1rem; }
.ocg-pane-note{ color:var(--muted); font-size:.86rem; margin-top:.1rem; }
.ocg-pane-acts{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.ocg-pane-acts .ocg-sel{ min-width:14rem; }
.ocg-pane-body{ padding:0 .9rem .9rem; }
.ocg-pane-text{ margin:0 0 .5rem; color:var(--ink); font-size:.92rem; max-width:80ch; }
.ocg-list{ margin:.25rem 0 0; padding-left:1.1rem; font-size:.92rem; }
.ocg-filters{ margin:0; }
details.ocg-fold-box > summary{ list-style:none; cursor:pointer; }
details.ocg-fold-box > summary::-webkit-details-marker{ display:none; }
details.ocg-fold-box > summary::after{ content:'▸'; color:var(--muted); margin-left:.5rem; }
details.ocg-fold-box[open] > summary::after{ content:'▾'; }
details.ocg-fold-box > summary:hover{ background:var(--hover, #FBF9F5); }
.ocg-pane-badge{ margin-left:auto; color:var(--muted); font-size:.86rem; font-variant-numeric:tabular-nums; }
.ocg-pane-warn{ border-color:var(--amber); }
.ocg-pane-warn .ocg-pane-badge{ background:var(--amber-bg); color:var(--amber-ink); padding:.05rem .45rem; border-radius:4px; font-weight:700; }
.ocg-pane .ocg-pane{ margin:.6rem 0 0; }

/* An empty list reads as a quiet note in a dashed frame rather than loose text. */
.ocg-empty{ border:1px dashed var(--rule); border-radius:4px; padding:1rem; text-align:center; color:var(--muted); font-size:.92rem; }

/* The payroll preview: four facts across the top, then the table, then the days folded. */
.ocg-facts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(11rem, 1fr)); gap:.5rem; margin:0 0 .8rem; }
.ocg-fact{ background:var(--ocg-tile); border:1px solid var(--rule); border-radius:4px; padding:.55rem .7rem; }
.ocg-fact span{ display:block; font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.ocg-fact b{ display:block; font-size:1.02rem; margin-top:.15rem; }
.ocg-fact em{ display:block; font-style:normal; color:var(--muted); font-size:.82rem; margin-top:.1rem; }
.ocg-pay-tbl td:not(:first-child), .ocg-pay-tbl th:not(:first-child){ text-align:right; font-variant-numeric:tabular-nums; }
.ocg-pay-tbl .ocg-total td{ font-weight:700; border-top:2px solid var(--rule); }
.ocg-rates{ color:var(--muted); font-size:.84rem; margin:.5rem 0 0; }
.ocg-pay-tbl td:last-child, .ocg-pay-tbl th:last-child{ padding-right:.75rem; }
.ocg-fact b{ overflow-wrap:anywhere; }

/* Management in one column (Alex, 2026-10-20, after trying two columns: "now it looks messy"),
   with each pane drawn in a 2px border so it is clear where each part starts and ends. */
.ocg-grid2{ display:grid; grid-template-columns:minmax(0, 1fr); gap:.75rem; }
.ocg-grid2 > .ocg-pane{ margin:0; border-width:2px; }
.ocg-daycell b{ display:block; font-weight:600; white-space:nowrap; }
.ocg-daycell span{ display:block; color:var(--muted); font-size:.85rem; white-space:nowrap; }

/* The actions column in Giveaways (Alex, 2026-10-23: Withdraw did not line up). The choice box
   sized itself to the longest name in each rotation, so it is now one fixed width for every row. */
.ocg-acts .ocg-sel{ width:11.5rem; max-width:100%; }
.ocg-acts .ocg-link{ margin-left:.5rem; }
.fbtn.active .fcount{ color:inherit; }