/* =====================================================================
   polish.css — loaded after theme.css.

   Direction: quiet and clinical. One typeface (IBM Plex Sans), flat surfaces with
   1px borders, small radii, a deep-blue accent, sentence-case labels. Motion is limited to
   colour/border transitions, a press state, a keyboard focus ring and a short section fade.
   Live request rows are never animated on entry (they re-render every few seconds).
   ===================================================================== */

:root{
  /* One family. The old serif and "mono" variables now resolve to the same sans. */
  --font-body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:var(--font-body);
  --font-mast:var(--font-body);
  --font-serif:var(--font-body);

  /* type scale */
  --fs-xs:12px; --fs-sm:13px; --fs-base:15px; --fs-md:16px; --fs-lg:19px; --fs-xl:24px;
  /* spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --radius:8px;
  --ease:cubic-bezier(.22,.7,.2,1);

  /* colour */
  --text-muted:#4A5A6B;
  --border:#CCD7E1;
  --accent:#0A4380; --on-accent:#FFFFFF;
  --ring:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--text-muted:#A5B6C7; --border:#2F3C49; --accent:#6FB3E0; --on-accent:#0C1117;}
}
:root[data-theme="dark"]{--text-muted:#A5B6C7; --border:#2F3C49; --accent:#6FB3E0; --on-accent:#0C1117;}

/* ---------- base ---------- */
body{font-size:var(--fs-base); line-height:1.5; -webkit-font-smoothing:antialiased;}
input, select, textarea, button{font-family:var(--font-body);}
.rtime, .ttime, .bclock, .stat-num, .log-time, .count, .roster-status, .bed, .tbed{font-variant-numeric:tabular-nums;}
::selection{background:color-mix(in srgb, var(--accent) 25%, transparent);}

/* Sentence case everywhere; the theme's tracked all-caps labels are gone. */
.mast .mw, .mast .mtag, .field label, .tag, .roster-role, .stat-label, .notif-cols, .lock-badge,
.board-tile .ttask, .board-roster-pill .rrrole, .board-top .btitle, .sec-title{text-transform:none;}

/* ---------- masthead ---------- */
.mast{padding:var(--sp-4) var(--sp-5); padding-top:max(var(--sp-4), env(safe-area-inset-top,0px)); border-bottom:2px solid var(--gold);}
.mast .mw{font-family:var(--font-body); font-size:16px; font-weight:600; letter-spacing:0; color:#fff;}
.mast .mw b{color:var(--gold); font-weight:600; letter-spacing:0;}
.mast .mtag{font-family:var(--font-body); font-size:var(--fs-sm); font-weight:400; letter-spacing:0; color:var(--gold-soft); opacity:.75;}
.home-link{display:inline-block; text-decoration:none;}
.home-link:hover{opacity:.85;}

.note{display:flex; justify-content:space-between; align-items:center; font-size:var(--fs-sm); padding:var(--sp-3) var(--sp-5); text-align:left; background:var(--surface-2);}
.note a, .note button{color:var(--accent); font:inherit; font-weight:500; text-decoration:none; background:none; border:none; padding:0; cursor:pointer;}
.note a:hover, .note button:hover{text-decoration:underline; text-underline-offset:3px;}

/* ---------- layout ---------- */
main{padding:var(--sp-5) var(--sp-5) var(--sp-7); gap:var(--sp-6);}
section{gap:var(--sp-3);}
@media (min-width:900px){
  main{padding:var(--sp-6) var(--sp-6) var(--sp-7);}
  .app.dashboard main{gap:var(--sp-5) var(--sp-6);}
}
.sec-title{font-family:var(--font-body); font-size:var(--fs-md); font-weight:600; letter-spacing:0; color:var(--text); line-height:1.3; align-items:center;}
.sec-title .count{font-family:var(--font-body); font-size:var(--fs-xs); font-weight:600; letter-spacing:0; color:var(--text-muted); background:var(--surface-2); padding:2px 9px; border-radius:999px;}

/* ---------- surfaces: flat, 1px border ---------- */
.card{padding:var(--sp-5); gap:var(--sp-5); border-radius:var(--radius); box-shadow:none;}
#newReqForm{display:flex; flex-direction:column; gap:var(--sp-5);}
.alerts-row:not(:has(> :not([hidden]))){display:none;}
#formError:empty{display:none;}
.field label{font-family:var(--font-body); font-size:var(--fs-sm); font-weight:500; letter-spacing:0; color:var(--text-muted); margin-bottom:6px;}
.field input[type=text], .field input[type=tel], .field input[type=number], .field textarea, select.loc-select{
  font-family:var(--font-body); font-size:var(--fs-base); padding:12px 13px; border-radius:var(--radius);
  transition:border-color .15s, box-shadow .15s, background-color .15s;}
select.loc-select-sm, .backdate-row input, .backdate-row select{font-family:var(--font-body);}
.field input:hover, .field textarea:hover, select.loc-select:hover{border-color:color-mix(in srgb, var(--accent) 45%, var(--border));}
.field input:focus, .field textarea:focus, select.loc-select:focus, select.loc-select-sm:focus,
.backdate-row input:focus, .backdate-row select:focus{outline:none; border-color:var(--accent); box-shadow:var(--ring); background:var(--surface);}

/* ---------- buttons ---------- */
.task-grid{gap:var(--sp-2);}
.task-btn{min-height:52px; padding:var(--sp-3) var(--sp-4); font-size:var(--fs-sm); font-weight:500; line-height:1.3; border-radius:var(--radius); transition:border-color .15s, background-color .15s, color .15s;}
.task-btn.sel{border-color:var(--accent); background:var(--gold-soft); color:var(--gold-deep); font-weight:600;}
.btn-primary, .done-btn, .complete-btn{background:var(--accent); color:var(--on-accent);}
.btn-primary{min-height:50px; font-size:var(--fs-base); font-weight:600; border-radius:var(--radius); transition:background-color .15s, opacity .15s, transform .1s;}
.btn-ghost{min-height:44px; padding:0 var(--sp-4); border-radius:var(--radius); font-weight:500; transition:border-color .15s, background-color .15s, transform .1s;}
.action-btn{border-radius:var(--radius); transition:background-color .15s, border-color .15s, opacity .15s, transform .1s;}
.claim-btn{border-color:var(--accent); color:var(--accent);}
.link-btn{font-size:var(--fs-xs); font-weight:500; color:var(--accent); text-underline-offset:3px;}
.chip-sm{font-family:var(--font-body); font-size:var(--fs-xs); font-weight:500; padding:5px 11px; border-radius:999px; transition:background-color .15s, border-color .15s;}
.tab{border-radius:var(--radius); font-weight:500; transition:background-color .15s, color .15s, border-color .15s;}
.tabs{padding:var(--sp-5) var(--sp-5) var(--sp-1); gap:var(--sp-2);}
.admin-tab{font-size:var(--fs-sm); padding:var(--sp-3) var(--sp-2); transition:color .15s, border-color .15s;}
.admin-tab.active{color:var(--accent); border-color:var(--accent);}
.switch, .switch::after{transition-timing-function:var(--ease);}

@media (hover:hover){
  .task-btn:not(.sel):hover{border-color:var(--accent);}
  .btn-primary:hover:not(:disabled), .done-btn:hover:not(:disabled), .complete-btn:hover:not(:disabled){background:color-mix(in srgb, var(--accent) 88%, #000);}
  .btn-ghost:hover{border-color:var(--accent); background:var(--gold-soft);}
  .claim-btn:hover:not(:disabled){background:var(--gold-soft);}
  .remove-btn:hover:not(:disabled){border-color:var(--urgent); color:var(--urgent);}
  .link-btn:hover{text-decoration-thickness:2px;}
  .chip-sm:hover:not(:disabled){border-color:var(--accent); background:var(--gold-soft);}
  .tab:not(.active):hover{border-color:var(--accent); color:var(--accent);}
  .admin-tab:not(.active):hover{color:var(--text);}
  .req-row{transition:border-color .15s, background-color .15s;}
  .req-row:hover{border-color:color-mix(in srgb, var(--accent) 45%, var(--border));}
  .req-row.st-urgent:hover{border-color:var(--urgent);}
  .roster-row:hover, .log-row:hover{background:var(--surface-2);}
}
.task-btn:active, .btn-primary:active:not(:disabled), .action-btn:active:not(:disabled), .btn-ghost:active, .tab:active{transform:scale(.98);}

/* keyboard focus */
:focus{outline:none;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;}
.btn-primary:focus-visible, .task-btn:focus-visible, .action-btn:focus-visible{box-shadow:var(--ring); outline:none;}

/* ---------- request rows ---------- */
.req-row{padding:var(--sp-4); gap:var(--sp-2) var(--sp-3); margin-bottom:var(--sp-2); border-radius:var(--radius); border-width:1px;}
.req-row .bed{font-size:var(--fs-md); font-weight:600; min-width:54px;}
.req-row .rinfo{flex:1 1 150px; min-width:150px;}
.req-row .rtask{font-size:var(--fs-base); font-weight:600; gap:var(--sp-2);}
.req-row .rtime{font-size:var(--fs-sm); margin-top:2px;}
.req-row .rcomment{font-size:var(--fs-sm); font-style:normal; margin-top:var(--sp-1);}
.req-row.st-urgent{border-width:1px; box-shadow:inset 3px 0 0 var(--urgent);}
.req-row.st-quiet{opacity:.85;}
.tag{font-family:var(--font-body); font-size:var(--fs-xs); font-weight:600; letter-spacing:0; padding:2px 8px; border-radius:4px;}
.req-row.claimed .tag{font-size:var(--fs-xs);}

.shift-row{padding:var(--sp-4) var(--sp-5); border-radius:var(--radius);}
.shift-row .who{font-size:var(--fs-base);}
.shift-row .who span{font-family:var(--font-body); font-size:var(--fs-sm); margin-top:2px;}
.empty{padding:var(--sp-5) var(--sp-4); font-size:var(--fs-sm); font-style:normal; border-radius:var(--radius);}
.banner, .error-banner{padding:var(--sp-3) var(--sp-4); font-size:var(--fs-sm); border-radius:var(--radius);}
.checkbox-field{padding:var(--sp-4); gap:var(--sp-3); border-radius:var(--radius);}
.alerts-row{gap:var(--sp-3); font-size:var(--fs-sm);}
.sent-line{font-size:var(--fs-md); font-weight:600; color:var(--good);}
.sent-status{font-size:var(--fs-base); margin-top:var(--sp-1); color:var(--text-muted);}

/* roster, logs, stats */
.roster-row{padding:var(--sp-3) var(--sp-2); font-size:var(--fs-sm);}
.roster-name .roster-role{font-family:var(--font-body); font-size:var(--fs-xs); font-weight:400; letter-spacing:0; margin-left:var(--sp-2);}
.roster-status{font-family:var(--font-body); font-size:var(--fs-sm); font-weight:600;}
.log-row{padding:var(--sp-3) var(--sp-2); font-size:var(--fs-sm); gap:var(--sp-4);}
.log-row .log-time{font-family:var(--font-body); font-size:var(--fs-sm);}
.stat-box{padding:var(--sp-4) var(--sp-3); border-radius:var(--radius);}
.stat-box .stat-num{font-size:var(--fs-xl); font-weight:600; line-height:1.15;}
.stat-box .stat-label{font-size:var(--fs-xs); letter-spacing:0; margin-top:var(--sp-1);}
.thresh-row{padding:var(--sp-3) 0; font-size:var(--fs-sm);}
.lock-badge{font-family:var(--font-body); font-size:var(--fs-xs); font-weight:600; letter-spacing:0;}

footer{padding:var(--sp-6) var(--sp-5) var(--sp-7); padding-bottom:max(var(--sp-7), env(safe-area-inset-bottom,0px)); font-family:var(--font-body); font-size:var(--fs-sm); line-height:1.6;}
footer a{color:var(--text-muted); text-underline-offset:3px;}
footer a:hover{color:var(--accent);}

/* ---------- dialogs ---------- */
.modal{padding:var(--sp-5) var(--sp-5) max(var(--sp-5), env(safe-area-inset-bottom,0px));}
.modal-head h2{font-family:var(--font-body); font-size:var(--fs-lg); font-weight:600; letter-spacing:0;}
.notif-master{padding:var(--sp-4); margin:var(--sp-5) 0 var(--sp-3); border-radius:var(--radius);}
.notif-cols{font-family:var(--font-body); font-size:var(--fs-sm); font-weight:600; letter-spacing:0; padding-bottom:var(--sp-2);}
.notif-row{padding:var(--sp-3) 2px; font-size:var(--fs-base);}
.notif-hint{font-size:var(--fs-sm); line-height:1.5;}

/* ---------- workroom board: same family, cool palette ---------- */
.board{background:#0A0F15; color:#E8F0F7;}
.board-top{padding:var(--sp-5) var(--sp-6); border-bottom-color:#212C37;}
.board-top .btitle{font-family:var(--font-body); font-size:22px; font-weight:600; letter-spacing:0; color:#6FB3E0;}
.board-top .bclock{font-family:var(--font-body); font-weight:500; color:#A5B6C7;}
.board-roster{padding:var(--sp-3) var(--sp-6); border-bottom-color:#212C37; background:#0D131A;}
.board-roster-empty{font-family:var(--font-body); font-style:normal; color:#A5B6C7;}
.board-roster-pill .rrname{color:#E8F0F7;}
.board-roster-pill .rrrole{font-family:var(--font-body); font-size:var(--fs-xs); letter-spacing:0; color:#A5B6C7;}
.board-roster-pill .rrstatus{font-family:var(--font-body); font-size:var(--fs-sm); font-weight:600;}
.board-roster-pill.rr-away .rrstatus{color:#B4C0CC;}
.board-grid{padding:var(--sp-6); gap:var(--sp-4);}
.board-tile{border-color:#25303B; background:#101820; padding:var(--sp-5); gap:var(--sp-2); border-radius:var(--radius);}
.board-tile .tbed{font-size:32px; font-weight:600;}
.board-tile .ttask{color:#B4C0CC; font-size:var(--fs-md); letter-spacing:0;}
.board-tile .tclaim{font-family:var(--font-body); color:#B4C0CC; font-size:var(--fs-sm);}
.board-tile .tcomment, .board-tile .tclock{font-style:normal; color:#A5B6C7; font-size:var(--fs-sm);}
.board-tile.claimed{background:#0F1B26;}
.board-tile.claimed .tclaim{font-family:var(--font-body); font-size:var(--fs-md);}
.board-tile.urgent{background:#26130F;}

/* ---------- motion (restrained) ---------- */
@keyframes rise{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
@keyframes fade-in{from{opacity:0;} to{opacity:1;}}
@keyframes sheet-up{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}

@media (prefers-reduced-motion: no-preference){
  /* static page sections only, never the live request rows */
  main > section{animation:rise .45s var(--ease) both;}
  main > section:nth-child(2){animation-delay:.05s;}
  main > section:nth-child(n+3){animation-delay:.1s;}
  @supports (animation-timeline: view()){
    main > section{animation:rise linear both; animation-timeline:view(); animation-range:entry 0% entry 30%; animation-delay:0s;}
  }
  .modal-backdrop:not([hidden]){animation:fade-in .18s ease-out both;}
  .modal-backdrop:not([hidden]) .modal{animation:sheet-up .26s var(--ease) both;}
  #sentCard:not([hidden]){animation:fade-in .3s ease-out both;}
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  .board-tile.urgent{animation:none !important;}
}

/* ---------- connection banner ---------- */
.conn-banner{background:#8A2F1F; color:#fff; font-size:var(--fs-sm); font-weight:500; padding:var(--sp-3) var(--sp-5); text-align:center; position:sticky; top:0; z-index:60;}

/* ---------- opened from an alert: single request, one Claim button ---------- */
.focus-card{background:var(--surface); border:1px solid var(--accent); border-left-width:4px; border-radius:var(--radius); padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2);}
.focus-title{font-size:var(--fs-lg); font-weight:600; line-height:1.3;}
.focus-sub{font-size:var(--fs-base); color:var(--text-muted);}
.focus-actions{display:flex; gap:var(--sp-3); align-items:center; margin-top:var(--sp-3);}
.focus-actions .btn-primary{width:auto; flex:1; min-height:52px;}
.focus-actions .btn-ghost{min-height:52px;}

/* ---------- alert setup check ---------- */
.alert-check{margin-top:var(--sp-3); padding:var(--sp-4); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); display:flex; flex-direction:column; gap:var(--sp-2);}
.alert-check-head{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap;}
.alert-check-status{font-weight:600; font-size:var(--fs-base);}
.alert-check-status.ok{color:var(--good);}
.alert-check-status.warn{color:var(--warn);}
.alert-check-head .btn-ghost{min-height:38px; font-size:var(--fs-sm);}
.alert-check-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-1); font-size:var(--fs-sm);}
.alert-check-list li{padding-left:18px; position:relative; color:var(--text);}
.alert-check-list li::before{content:""; position:absolute; left:2px; top:.5em; width:8px; height:8px; border-radius:50%;}
.alert-check-list li.ok::before{background:var(--good);}
.alert-check-list li.warn::before{background:var(--warn);}
.alert-check-result{font-size:var(--fs-sm); color:var(--text-muted); line-height:1.5;}
.alert-check-result:empty{display:none;}

/* Collapsible section headings: the disclosure arrow is a flex item, so space-between pushed the title to the far edge. */
summary.sec-title{justify-content:flex-start; gap:var(--sp-2);}
summary.sec-title::before{margin-right:0; color:var(--text-muted);}
summary.sec-title .count{margin-left:auto;}