/* ==========================================================================
   PII Team Hub — design system
   Tokens carried over from the pii-app planning console so the two products
   feel like one: navy #004490, Spectral headings, Public Sans UI,
   IBM Plex Mono figures. Light, dark and system themes.
   ========================================================================== */
:root{
  --pii:#004490; --pii-line:#004490; --pii-tint:#E7EEF8; --pii-tint2:#D5E2F3;
  --ink:#101720; --ink2:#39465A; --muted:#67748A;
  --paper:#F3F6FA; --surface:#FFFFFF; --surface2:#EAEFF6; --surface3:#F7F9FC;
  --rule:#D7DEE9; --rule2:#BFC9D9;
  --ok:#146C43;   --ok-bg:#E3F2E9;
  --warn:#9A5B08; --warn-bg:#FBEEDC;
  --risk:#A32219; --risk-bg:#FBE7E4;
  --info:#1B5FAE; --info-bg:#E7EEF8;
  --today:#A32219;
  --c-signature:#8C1D40; --c-interfaith:#0B6E86; --c-education:#5B21B6;
  --c-social:#A8500B;    --c-volunteer:#146C43;  --c-partner:#1D4ED8;
  --c-trip:#9A2E86;      --c-internal:#4A5768;   --c-observance:#7B7367;
  --shadow-1:0 1px 2px rgba(16,23,32,.07);
  --shadow-2:0 2px 6px rgba(16,23,32,.07), 0 18px 40px -26px rgba(16,23,32,.35);
  --radius:9px;
  --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --pii:#7FB0EE; --pii-line:#2A5EA0; --pii-tint:#16263C; --pii-tint2:#1D3350;
    --ink:#E7EDF5; --ink2:#B6C2D2; --muted:#8B9AAE;
    --paper:#0C1118; --surface:#141B24; --surface2:#1C2531; --surface3:#111823;
    --rule:#26313F; --rule2:#354355;
    --ok:#5FCB8E;   --ok-bg:#12291E;
    --warn:#E7A94A; --warn-bg:#2C2113;
    --risk:#F08479; --risk-bg:#2E1815;
    --info:#7FB0EE; --info-bg:#16263C;
    --today:#F08479;
    --c-signature:#E88AA6; --c-interfaith:#4FC3DE; --c-education:#B79BF5;
    --c-social:#E9A264;    --c-volunteer:#6FD09B;  --c-partner:#7FB0EE;
    --c-trip:#E48BD2;      --c-internal:#A2B0C2;   --c-observance:#C0B7A9;
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 2px 6px rgba(0,0,0,.35), 0 18px 40px -26px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --pii:#7FB0EE; --pii-line:#2A5EA0; --pii-tint:#16263C; --pii-tint2:#1D3350;
  --ink:#E7EDF5; --ink2:#B6C2D2; --muted:#8B9AAE;
  --paper:#0C1118; --surface:#141B24; --surface2:#1C2531; --surface3:#111823;
  --rule:#26313F; --rule2:#354355;
  --ok:#5FCB8E;   --ok-bg:#12291E;
  --warn:#E7A94A; --warn-bg:#2C2113;
  --risk:#F08479; --risk-bg:#2E1815;
  --info:#7FB0EE; --info-bg:#16263C;
  --today:#F08479;
  --c-signature:#E88AA6; --c-interfaith:#4FC3DE; --c-education:#B79BF5;
  --c-social:#E9A264;    --c-volunteer:#6FD09B;  --c-partner:#7FB0EE;
  --c-trip:#E48BD2;      --c-internal:#A2B0C2;   --c-observance:#C0B7A9;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 2px 6px rgba(0,0,0,.35), 0 18px 40px -26px rgba(0,0,0,.8);
}

/* ------------------------------------------------------------ base */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
     font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;margin:0;text-wrap:balance;
            letter-spacing:-.005em}
h1{font-size:23px} h2{font-size:18px} h3{font-size:15px}
a{color:var(--pii)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--pii);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.tnum{font-variant-numeric:tabular-nums;font-family:var(--mono)}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hide{display:none!important}

/* ------------------------------------------------------------ masthead */
.mast{background:#004490;color:#fff;padding:0 18px;border-bottom:3px solid #012D60;
      position:sticky;top:0;z-index:40}
.mast-in{max-width:1640px;margin:0 auto;display:flex;align-items:center;gap:16px;
         min-height:58px;padding:8px 0}
.mast .mark{width:32px;height:32px;border-radius:3px;flex:none;display:block}
.mast-t{display:flex;flex-direction:column;line-height:1.15;margin-right:auto;min-width:0}
.mast-t b{font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:-.01em}
.mast-t span{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
             color:#A9C6EC;font-weight:600}
.mast-acts{display:flex;gap:7px;align-items:center}
.mbtn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);color:#fff;
      padding:6px 11px;border-radius:7px;cursor:pointer;font-weight:600;font-size:12.5px;
      white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.mbtn:hover{background:rgba(255,255,255,.22)}
.mbtn svg{width:15px;height:15px}
.who{display:flex;align-items:center;gap:8px}
.who .nm{font-size:12.5px;font-weight:600;line-height:1.1}
.who .rl{font-size:10px;color:#A9C6EC;letter-spacing:.05em;text-transform:uppercase;
         font-weight:700}
@media (max-width:760px){ .who .txt{display:none} }

/* ------------------------------------------------------------ shell + nav */
#view{min-width:0;max-width:100%}
.shell{max-width:1640px;margin:0 auto;padding:16px 18px 80px;
       display:grid;grid-template-columns:214px minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:1000px){
  /* minmax(0,1fr), never plain 1fr: a bare 1fr track is minmax(auto,1fr), so the
     column refuses to shrink below its content and the whole page scrolls
     sideways on a phone. */
  .shell{grid-template-columns:minmax(0,1fr);padding:14px 14px 76px}
}
@media (max-width:560px){
  /* On a phone the title and its actions stack; actions go full width so the
     buttons are thumb-sized rather than crammed onto one line. */
  .pagehead{flex-direction:column;gap:11px}
  .pagehead .acts{width:100%}
  .pagehead .acts .btn{flex:1 1 auto;justify-content:center}
  .pagehead p{font-size:12.5px}
  h1{font-size:21px}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* An odd number of tiles would leave the last one alone beside dead space. */
  .strip>.stat:last-child:nth-child(odd){grid-column:1/-1}
  .phead{gap:8px}
  .phead input,.phead select{width:100%!important;flex:1 1 100%}
  .seg{width:100%}
  .seg button{flex:1}
  .modal .mb{max-height:70vh}
  .modal .mf{position:sticky;bottom:0}
  .slane{grid-template-columns:1fr;gap:4px}
  .slane .when{display:flex;gap:7px;align-items:baseline;padding-top:0}
  .slane .when b{display:inline}
  .cell{min-height:74px}
  .composer{grid-template-columns:1fr}
}
.rail{position:sticky;top:74px;display:flex;flex-direction:column;gap:14px}
.navgrp{display:flex;flex-direction:column;gap:2px}
.navgrp>h4{font-family:var(--sans);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
           color:var(--muted);font-weight:700;padding:0 6px 4px}
.navi{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;cursor:pointer;
      font-size:13.5px;font-weight:500;border:0;background:none;width:100%;text-align:left;
      color:var(--ink2)}
.navi:hover{background:var(--surface2);color:var(--ink)}
.navi[aria-current="page"]{background:var(--pii);color:#fff;font-weight:600}
.navi svg{width:16px;height:16px;flex:none}
.navi .cnt{margin-left:auto;font-family:var(--mono);font-size:10.5px;
           background:var(--surface2);color:var(--muted);border-radius:9px;padding:1px 6px;
           font-variant-numeric:tabular-nums}
.navi[aria-current="page"] .cnt{background:rgba(255,255,255,.22);color:#fff}
.btmbar{display:none}
@media (max-width:1000px){
  .btmbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;
          background:var(--surface);border-top:1px solid var(--rule);z-index:45;
          padding-bottom:env(safe-area-inset-bottom)}
  .btmi{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px 7px;
        border:0;background:none;cursor:pointer;font-size:10px;font-weight:600;color:var(--muted)}
  .btmi svg{width:19px;height:19px}
  .btmi[aria-current="page"]{color:var(--pii)}
}

/* ------------------------------------------------------------ surfaces */
.panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
       overflow:hidden;min-width:0}
.phead{display:flex;align-items:center;gap:10px;padding:11px 14px;
       border-bottom:1px solid var(--rule);background:var(--surface3);flex-wrap:wrap}
.phead h2{margin-right:auto;font-size:16px}
.pbody{padding:14px}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
      padding:13px}
.pagehead{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
          gap:12px;margin-bottom:16px}
/* Flex items default to min-width:auto, which stops them shrinking below their
   content and pushes the page sideways on a phone. Zero lets them wrap. */
.pagehead>*{min-width:0}
.pagehead p{margin:3px 0 0;font-size:13px;color:var(--muted);max-width:74ch}
.acts{display:flex;gap:7px;flex-wrap:wrap;align-items:center;min-width:0}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:9px;align-items:center;flex-wrap:wrap;min-width:0}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;
       background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);
       overflow:hidden;margin-bottom:16px}
.stat{background:var(--surface);padding:11px 14px}
.stat .k{font-size:10px;letter-spacing:.085em;text-transform:uppercase;color:var(--muted);
         font-weight:700}
.stat .v{font-family:var(--mono);font-size:21px;font-weight:600;letter-spacing:-.02em;
         font-variant-numeric:tabular-nums;margin-top:1px}
.stat .s{font-size:11.5px;color:var(--muted);margin-top:1px}
.stat.hi{background:var(--pii-tint)} .stat.hi .v{color:var(--pii)}
.empty{padding:34px 18px;text-align:center;color:var(--muted);font-size:13px}
.empty svg{width:26px;height:26px;opacity:.5;margin-bottom:7px}

/* ------------------------------------------------------------ controls */
.btn{border:1px solid var(--rule2);background:var(--surface);color:var(--ink2);
     padding:7px 12px;border-radius:7px;cursor:pointer;font-weight:600;font-size:12.5px;
     display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover{background:var(--surface2);color:var(--ink)}
.btn svg{width:15px;height:15px}
.btn.pri{background:var(--pii);border-color:var(--pii);color:#fff}
.btn.pri:hover{filter:brightness(1.12)}
.btn.dgr{color:var(--risk);border-color:var(--risk)}
.btn.dgr:hover{background:var(--risk-bg)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{padding:4px 9px;font-size:11.5px}
.btn.sm svg{width:13px;height:13px}
.chip{border:1px solid var(--rule2);background:var(--surface);border-radius:20px;
      padding:3px 11px;font-size:12px;font-weight:600;cursor:pointer;color:var(--ink2)}
.chip[aria-pressed="true"]{background:var(--pii);border-color:var(--pii);color:#fff}
.seg{display:flex;gap:1px;background:var(--rule);border:1px solid var(--rule);
     border-radius:7px;overflow:hidden}
.seg button{background:var(--surface);border:0;padding:5px 11px;cursor:pointer;
            font-weight:600;font-size:12.5px;color:var(--ink2)}
.seg button:hover{background:var(--surface2)}
.seg button[aria-current="true"]{background:var(--pii);color:#fff}
label.fld{display:flex;flex-direction:column;gap:4px;font-size:10.5px;font-weight:700;
          letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
input[type=text],input[type=date],input[type=time],input[type=number],input[type=email],
input[type=password],input[type=url],select,textarea{
  background:var(--surface);border:1px solid var(--rule2);border-radius:7px;padding:7px 9px;
  font-size:13.5px;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--ink);
  width:100%;font-family:var(--sans)}
textarea{resize:vertical;min-height:82px;line-height:1.55}
input:focus,select:focus,textarea:focus{border-color:var(--pii)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
@media (max-width:620px){ .grid2,.grid3{grid-template-columns:1fr} }
.badge{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:2px 9px;
       font-size:11px;font-weight:700;white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.risk{background:var(--risk-bg);color:var(--risk)}
.badge.info{background:var(--info-bg);color:var(--info)}
.badge.neutral{background:var(--surface2);color:var(--muted)}
.dot{width:9px;height:9px;border-radius:2px;flex:none;display:inline-block}
.av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
    color:#fff;font-weight:700;flex:none;font-size:11px;width:26px;height:26px}

/* ------------------------------------------------------------ tables */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:10px;letter-spacing:.085em;text-transform:uppercase;
        color:var(--muted);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--rule);
        background:var(--surface3);position:sticky;top:0;z-index:1}
.tbl td{padding:8px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl tbody tr:hover{background:var(--surface3)}
.tbl tr.clickable{cursor:pointer}
.scrollx{overflow-x:auto}

/* ------------------------------------------------------------ calendar */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal .dow{padding:6px 8px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
          color:var(--muted);font-weight:700;border-bottom:1px solid var(--rule);
          background:var(--surface3)}
.cell{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);min-height:112px;
      padding:4px 5px 6px;display:flex;flex-direction:column;gap:2px;min-width:0}
.cell:nth-child(7n+7){border-right:0}
.cell.out{background:var(--surface3)}
.cell.today{background:var(--pii-tint)}
.dn{font-family:var(--mono);font-size:11.5px;color:var(--muted);font-weight:600;
    display:flex;align-items:center;gap:5px}
.cell.today .dn{color:var(--today);font-weight:700}
.dn .td{background:var(--today);color:#fff;border-radius:10px;padding:0 6px;font-size:9px;
        letter-spacing:.06em;font-weight:700}
.ev{display:flex;gap:5px;align-items:flex-start;text-align:left;width:100%;
    background:var(--surface2);border:0;border-left:3px solid var(--cc,var(--muted));
    border-radius:3px;padding:3px 5px;cursor:pointer;font-size:11.5px;line-height:1.25;
    font-weight:600;color:var(--ink);min-width:0}
.ev:hover{background:var(--pii-tint2)}
.ev .t{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;
       -webkit-box-orient:vertical}
.ev.obs{background:none;border-left-style:dashed;font-style:italic;font-weight:500;
        color:var(--muted)}
.ev.done{opacity:.5}
.pv{display:flex;gap:5px;align-items:flex-start;text-align:left;width:100%;background:none;
    border:0;border-left:2px dotted var(--cc,var(--muted));padding:1px 5px;cursor:pointer;
    font-size:10.5px;line-height:1.25;color:var(--muted);min-width:0}
.pv:hover{color:var(--ink);background:var(--surface2)}
.pv .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv.done .t{text-decoration:line-through;opacity:.6}
.more{font-size:10.5px;color:var(--pii);background:none;border:0;cursor:pointer;
      text-align:left;padding:1px 5px;font-weight:600}

/* ------------------------------------------------------------ kanban */
.board{display:grid;grid-template-columns:repeat(4,minmax(215px,1fr));gap:12px;
       align-items:start;overflow-x:auto;padding-bottom:6px}
@media (max-width:900px){ .board{grid-template-columns:repeat(4,265px)} }
.col{background:var(--surface3);border:1px solid var(--rule);border-radius:var(--radius);
     min-height:120px}
.col>h4{font-family:var(--sans);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
        color:var(--muted);font-weight:700;padding:10px 11px 7px;display:flex;gap:7px;
        align-items:center}
.col>h4 .n{margin-left:auto;font-family:var(--mono);background:var(--surface2);
           border-radius:9px;padding:1px 6px;font-size:10px}
.col .list{display:flex;flex-direction:column;gap:7px;padding:0 8px 9px}
.tcard{background:var(--surface);border:1px solid var(--rule);border-radius:7px;padding:9px 10px;
       cursor:pointer;box-shadow:var(--shadow-1)}
.tcard:hover{border-color:var(--pii)}
.tcard .tt{font-size:12.5px;font-weight:600;line-height:1.35;margin-bottom:6px}
.tcard .meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:10.5px;
             color:var(--muted)}
.tcard.drag{opacity:.45}
.col.over{background:var(--pii-tint);border-color:var(--pii)}

/* ------------------------------------------------------------ social */
.slane{display:grid;grid-template-columns:96px minmax(0,1fr);gap:11px;padding:9px 0;
       border-bottom:1px solid var(--rule)}
.slane:last-child{border-bottom:0}
.slane .when{font-family:var(--mono);font-size:11.5px;color:var(--muted);
             font-variant-numeric:tabular-nums;padding-top:3px}
.slane .when b{display:block;color:var(--ink);font-size:12.5px;font-weight:600}
.spost{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--cc,var(--pii));
       border-radius:7px;padding:10px 11px;cursor:pointer;text-align:left;width:100%}
.spost:hover{border-color:var(--pii);background:var(--surface3)}
.spost .hd{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:5px}
.spost .hd b{font-size:12.5px}
.spost .bd{font-size:12.5px;color:var(--ink2);line-height:1.5;white-space:pre-wrap;
           display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.spost .tags{margin-top:6px;font-size:11px;color:var(--pii);font-weight:500;
             overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plat{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;
      border-radius:5px;font-size:9.5px;font-weight:800;color:#fff;flex:none}
.plat.instagram{background:#C13584} .plat.facebook{background:#1877F2}
.plat.x{background:#0F1419}         .plat.linkedin{background:#0A66C2}
.plat.bluesky{background:#0285FF}   .plat.youtube{background:#FF0000}
.composer{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:16px}
@media (max-width:980px){ .composer{grid-template-columns:1fr} }
.preview{background:var(--surface3);border:1px solid var(--rule);border-radius:var(--radius);
         padding:12px}
.preview .ph{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.preview .cap{font-size:12.5px;line-height:1.55;white-space:pre-wrap;color:var(--ink)}
.preview .cnt{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:8px;
              display:flex;justify-content:space-between}
.preview .cnt.over{color:var(--risk);font-weight:700}
.thumbs{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.thumb{width:64px;height:64px;border-radius:6px;object-fit:cover;border:1px solid var(--rule);
       background:var(--surface2);cursor:pointer}

/* ------------------------------------------------------------ modal */
.scrim{position:fixed;inset:0;background:rgba(10,16,24,.55);z-index:60;display:flex;
       align-items:flex-start;justify-content:center;padding:22px 14px;overflow-y:auto}
.modal{background:var(--surface);border-radius:12px;box-shadow:var(--shadow-2);width:100%;
       max-width:620px;margin:auto;overflow:hidden}
.modal.wide{max-width:940px}
.modal .mh{display:flex;align-items:flex-start;gap:11px;padding:14px 16px;
           border-bottom:1px solid var(--rule);background:var(--surface3)}
.modal .mh h2{margin-right:auto;font-size:17px}
.modal .mb{padding:16px;max-height:66vh;overflow-y:auto}
.modal .mf{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;
           border-top:1px solid var(--rule);background:var(--surface3);flex-wrap:wrap}
.x{background:none;border:0;cursor:pointer;color:var(--muted);padding:3px;border-radius:5px;
   line-height:0}
.x:hover{background:var(--surface2);color:var(--ink)}
.toasts{position:fixed;right:16px;bottom:16px;z-index:80;display:flex;flex-direction:column;
        gap:8px}
@media (max-width:1000px){ .toasts{bottom:70px} }
.toast{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--pii);
       border-radius:8px;box-shadow:var(--shadow-2);padding:10px 13px;font-size:13px;
       font-weight:500;max-width:330px}
.toast.warn{border-left-color:var(--warn)}
.toast.risk{border-left-color:var(--risk)}
.toast.ok{border-left-color:var(--ok)}

/* ------------------------------------------------------------ login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px}
.login .box{width:100%;max-width:392px}
.login .brand{text-align:center;margin-bottom:20px}
.login .brand img{width:56px;height:56px;border-radius:6px}
.login .brand h1{font-size:22px;margin-top:11px}
.login .brand p{color:var(--muted);font-size:12px;margin:3px 0 0;letter-spacing:.06em;
                text-transform:uppercase;font-weight:600}
.login form{display:flex;flex-direction:column;gap:11px}
.demo{background:var(--warn-bg);color:var(--warn);border-radius:7px;padding:9px 11px;
      font-size:12px;font-weight:600;margin-top:14px;line-height:1.45}
.spin{width:34px;height:34px;border:3px solid var(--pii-tint2);border-top-color:var(--pii);
      border-radius:50%;animation:sp .8s linear infinite;margin:0 auto}
@keyframes sp{to{transform:rotate(360deg)}}
.center{min-height:60vh;display:flex;flex-direction:column;align-items:center;
        justify-content:center;gap:11px;color:var(--muted);font-size:13px}
@media print{ .mast,.rail,.btmbar,.acts,.no-print{display:none!important}
              .shell{grid-template-columns:1fr;padding:0} body{background:#fff} }

/* ==========================================================================
   MOBILE OVERRIDES - last in the file on purpose.
   These share specificity with the desktop rules above, so they must come
   afterwards to win. Putting them anywhere else silently does nothing, which
   is exactly the bug this block was written to fix.
   ========================================================================== */
@media (max-width:1000px){
  .rail{display:none}
  .shell{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:760px){
  /* Button labels collapse to icons; the masthead is only 375px wide. */
  .mbtn .txt,.who .txt{display:none}
  .mbtn{padding:7px 9px}
}

@media (max-width:560px){
  /* The motto is the first thing to go: it is four words that wrap to four
     lines and push the masthead to 163px tall. */
  .mast{padding:0 12px}
  .mast-in{gap:9px;min-height:52px;padding:7px 0}
  .mast-t{flex:1 1 auto;min-width:0}
  .mast-t b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mast-t span{display:none}
  .mast .mark{width:28px;height:28px}
  .mast-acts{gap:5px;flex:none}

  .pagehead{flex-direction:column;gap:11px}
  .pagehead .acts{width:100%}
  .pagehead .acts .btn{flex:1 1 auto;justify-content:center}
  h1{font-size:21px}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .phead{gap:8px}
  .phead input,.phead select{flex:1 1 100%;width:100%}
  .seg{width:100%}
  .seg button{flex:1}
  .grid2,.grid3{grid-template-columns:1fr}
  .composer{grid-template-columns:1fr}
  .slane{grid-template-columns:1fr;gap:5px}
  .slane .when{display:flex;gap:7px;align-items:baseline;padding-top:0}
  .slane .when b{display:inline}
  .cell{min-height:76px;padding:3px 4px 5px}
  .board{grid-template-columns:repeat(4,84vw)}
  .modal{border-radius:12px}
  .modal .mb{max-height:64vh}
  .scrim{padding:10px 8px}
  /* Comfortable thumb targets - 16px on inputs also stops iOS zooming on focus. */
  .btn{padding:9px 13px}
  input,select,textarea{font-size:16px;padding:9px 11px}
  .tbl th,.tbl td{padding:9px 8px}
}