/* Mina Regular — self-hosted in this repository */
@font-face{
  font-family:"Mina";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("./fonts/Mina-Regular.woff2") format("woff2");
  /* Keep a system fallback ready if the webfont is unavailable. */
  unicode-range:U+0000-00FF,U+0980-09FF;
}
:root{
--bg:#F3F6F8;
   --panel:#ffffff;
   --panel-soft:#f8fafb;
   --ink:#17202a;
   --muted:#74808b;
   --line:#e4e8ec;
   --line-strong:#d4dbe1;
   --navy:#101828;
   --accent:#60a5fa;
   --accent-ink:#0b1b2e;
   --shadow:0 12px 35px rgba(16,24,40,.07);
}

 *{
box-sizing:border-box
}

 html{
font-family:"Mina",sans-serif
}

 body{
margin:0;background:radial-gradient(circle at 15% 10%,rgba(147,197,253,.20),transparent 28%),radial-gradient(circle at 85% 18%,rgba(134,239,172,.16),transparent 25%),radial-gradient(circle at 50% 90%,rgba(252,165,165,.13),transparent 30%),var(--bg);color:var(--ink);line-height:1.45
}

 button,input,select{
font:inherit
}

 a{
text-decoration:none;color:inherit
}

 button,a{
touch-action:manipulation
}

 .app{
min-height:100vh
}

 main{
max-width:1280px;margin:0 auto;padding:20px 24px 28px
}

 .intro{
display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:20px
}

 .kicker{
display:block;color:#85919c;font-size:9px;font-weight:950;letter-spacing:.18em
}

 .intro h1{
margin:5px 0 0;font-size:clamp(24px,2.4vw,30px);line-height:1.05;letter-spacing:-.035em;font-weight:900
}

 .intro p{
margin:9px 0 0;color:var(--muted);font-size:13px;font-weight:600
}

 .intro-meta{
text-align:right;padding-bottom:3px
}
.intro-meta span{
display:block;color:#9aa5ae;font-size:8px;font-weight:900;letter-spacing:.15em
}
.intro-meta b{
display:block;margin-top:3px;font-size:11px;color:var(--muted);font-weight:800
}

 .board{
background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.78);border-radius:20px;box-shadow:0 20px 55px rgba(31,41,55,.12),inset 0 1px 0 rgba(255,255,255,.9);overflow:hidden;backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%);position:relative
}

 .board-head{
min-height:72px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid rgba(255,255,255,.65);background:rgba(255,255,255,.2);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
}

 .legend{
display:flex;
align-items:center;
justify-content:flex-end;
gap:6px !important;
flex-wrap:wrap;
margin-top:8px !important;
}

 .legend span{
display:inline-flex;
align-items:center;
gap:4px !important;
padding:3px 7px !important;
border:1px solid rgba(255,255,255,.72);
border-radius:999px;
background:rgba(255,255,255,.42);
box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 4px 12px rgba(31,41,55,.05);
font-size:9px;
color:var(--muted);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
min-height:0 !important;
line-height:1 !important;
}

 .legend i{
width:6px !important;
height:6px !important;
border-radius:50%;
background:var(--c);
display:inline-block;
flex:0 0 6px !important;
}
.legend b{
color:var(--ink);
font-size:8px !important;
font-weight:900;
line-height:1 !important;
}
.legend small{
font-size:7px !important;
color:#8b96a0;
line-height:1 !important;
}

 .roster-wrap{
overflow-x:auto;
overflow-y:hidden;
border:0 !important;
border-radius:0 !important;
}
.day-grid,.person-row{
display:grid;grid-template-columns:126px minmax(760px,1fr);min-width:900px
}
.day-grid{
background:var(--panel-soft);border-bottom:1px solid var(--line)
}

 .person-head{
display:flex;
align-items:center;
justify-content:center;
padding:0 16px;
color:#8b96a0;
font-size:26px;
line-height:1;
border-right:1px solid var(--line);
text-shadow:0 2px 5px rgba(16,24,40,.12);
font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
}

 .days{
display:grid;grid-template-columns:repeat(7,minmax(104px,1fr))
}
.day-head{
min-height:68px;padding:10px 8px;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;border-right:1px solid var(--line);gap:1px
}
.day-head:last-child{
border-right:0
}
.day-head span{
font-size:11px;color:#8a959f;font-weight:400
}
.day-head strong{
font-size:22px;line-height:1.1;letter-spacing:-.03em;font-weight:400
}
.day-head em{
position:absolute;top:7px;right:7px;font-style:normal;font-size:7px;font-weight:950;color:#4c7119;background:#e7f7c9;border-radius:99px;padding:2px 5px
}
.day-head.is-today{
background:#fbfff3
}

 .person-row{
min-height:74px;border-bottom:1px solid var(--line)
}
.person-row:last-child{
border-bottom:0
}
.person{
display:flex !important;
align-items:flex-start !important;
padding:0 16px;
background:var(--panel);
border-right:1px solid var(--line);
flex-direction:column !important;
justify-content:center !important;
gap:5px !important;
}
.person strong{
font-size:18px;
letter-spacing:-.02em;
font-weight:400;
display:block !important;
line-height:1.15 !important;
}

 .shift-cell{
min-height:74px;display:flex;align-items:center;justify-content:center;padding:8px 7px;border-right:1px solid var(--line);background:var(--panel)
}
.shift-cell:last-child{
border-right:0
}
.shift-cell.is-today{
background:#fbfff3
}

 .shift{
width:100%;max-width:104px;min-height:46px;padding:7px 10px;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:9px;background:var(--c);color:#25313c;border:1px solid rgba(255,255,255,.35);
   border:1px solid color-mix(in srgb,var(--c) 82%,#fff);box-shadow:0 3px 8px rgba(15,23,42,.08);
   box-shadow:0 3px 8px color-mix(in srgb,var(--c) 18%,transparent)
}

 .shift b{
font-size:16px;font-weight:400;line-height:1;letter-spacing:.02em
}
.shift small{
font-size:8px;font-weight:400;opacity:.82;white-space:nowrap
}

 footer{
max-width:1280px;margin:0 auto;padding:11px 24px 18px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;color:#aeb6be;font-size:6px;font-weight:400;line-height:1.25;letter-spacing:.01em
}
footer .fun-footer{
opacity:.72
}
footer i{
display:inline-block;width:6px;height:6px;border-radius:50%;background:#9bdc54;margin-right:5px
}

 .toast{
position:fixed;left:50%;bottom:22px;z-index:20;transform:translate(-50%,12px);padding:9px 13px;border-radius:9px;background:#17202a;color:#fff;font-size:11px;opacity:0;pointer-events:none;transition:.2s
}
.toast.show{
opacity:1;transform:translate(-50%,0)
}
.toast.err{
background:#b42318
}

 body.ink-mode{
--bg:#4B4641;--panel:#625C56;--panel-soft:#59534D;--ink:#eef3f7;--muted:#92a0ad;--line:#263341;--line-strong:#344353;--navy:#070b11
}
body.ink-mode .board{
box-shadow:0 18px 50px rgba(0,0,0,.22)
}
body.ink-mode .day-head.is-today,body.ink-mode .shift-cell.is-today{
background:#28233a
}
body.ink-mode .day-head em{
color:#d9cfff;background:#40385a
}

 @media(max-width:900px){
main{
padding:28px 12px 14px
}
.intro{
align-items:flex-start;flex-direction:column;gap:14px;margin-bottom:16px
}
.intro-meta{
text-align:left;padding:0
}
.board-head{
align-items:flex-start;flex-direction:column;padding:14px
}
.legend{
justify-content:flex-start
}
.day-grid,.person-row{
grid-template-columns:112px minmax(760px,1fr);min-width:880px
}
.days{
grid-template-columns:repeat(7,minmax(104px,1fr))
}
.day-head{
min-height:60px
}
.person-row{
min-height:68px
}
.shift-cell{
min-height:68px
}
.shift{
max-width:90px
}
footer{
padding:9px 10px 15px;font-size:6px;font-weight:400;color:#b8c0c7;justify-content:center;text-align:center
}
footer span{
white-space:nowrap
}
footer span:last-child{
display:inline
}
}

 @media(max-width:520px){
.intro h1{
font-size:24px
}
.intro p{
font-size:11px
}
.legend{
gap:5px
}
.legend span{
padding:4px 6px;font-size:7px
}
.legend b{
font-size:7px;
font-weight:950;
color:#17202a;
}
.legend small{
font-size:6px;
font-weight:800;
color:#66727d;
}
.day-grid,.person-row{
grid-template-columns:88px minmax(546px,1fr);min-width:634px
}
.days{
grid-template-columns:repeat(7,minmax(78px,1fr))
}
.day-head{
min-height:58px;padding:8px 4px
}
.day-head span{
font-size:8px;font-weight:900;color:#5f6b76
}
.day-head strong{
font-size:16px;font-weight:950;color:#17202a
}
.day-head em{
top:5px;right:4px;font-size:6px;padding:2px 4px
}
.person{
padding:0 10px
}
.person strong{
font-size:13px;font-weight:950;color:#17202a
}
.person-row{
min-height:64px
}
.shift-cell{
min-height:64px;padding:7px 5px
}
.shift{
max-width:62px;min-height:38px;padding:6px 8px;border-radius:8px
}
.shift b{
font-size:13px;font-weight:950;color:#17202a
}
.person-head{
padding:0 8px;font-size:21px
}
footer{
font-size:5px
}
}

 .panel,.admin-note{
max-width:1120px;margin:0 auto 16px;padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)
}
.admin-note{
border-left:3px solid var(--accent);font-size:12px;color:var(--muted)
}
.admin-note b{
color:var(--ink)
}
.section-head{
display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px
}
.section-head h2{
margin:3px 0 0;font-size:18px
}
.form-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:12px
}
.form-grid label,.form-row label{
display:grid;gap:5px;color:var(--muted);font-size:11px;font-weight:800
}
input{
width:100%;min-height:36px;padding:7px 9px;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel-soft);color:var(--ink)
}
input:focus{
outline:2px solid rgba(200,243,107,.25);border-color:#91b94e
}
.muted{
color:var(--muted);font-size:11px
}
.actions,.form-row{
display:flex;align-items:flex-end;flex-wrap:wrap;gap:7px
}
.form-row{
margin-top:15px
}
.form-row label{
flex:1;min-width:220px
}
.primary,.actions button,.form-row button{
min-height:36px;border:1px solid var(--line-strong);border-radius:8px;padding:7px 11px;background:var(--panel-soft);color:var(--ink);cursor:pointer;font-size:11px;font-weight:800
}
.primary{
border-color:var(--accent);background:var(--accent);color:var(--accent-ink)
}
.status{
padding:4px 8px;border:1px solid var(--line);border-radius:99px;color:var(--muted);font-size:9px
}
.grid-scroll{
overflow:auto;border:1px solid var(--line);border-radius:9px
}
.grid-scroll table{
min-width:760px;border-collapse:collapse
}
.grid-scroll th,.grid-scroll td{
padding:7px;border:1px solid var(--line);text-align:center
}
.grid-scroll th{
background:var(--panel-soft);font-size:10px
}
.grid-scroll input{
min-width:62px;min-height:30px;font-size:10px
}
.edit{
border:1px solid #c8d8e1;border-radius:6px;padding:6px 10px;background:var(--panel-soft);color:var(--ink);cursor:pointer;font-weight:900
}
.remove{
display:block;margin:3px auto 0;padding:0;border:0;background:transparent;color:#c2413a;cursor:pointer;font-size:9px
}
.picker{
position:fixed;z-index:30;display:grid;gap:2px;min-width:180px;padding:5px;border:1px solid var(--line);border-radius:9px;background:var(--panel);box-shadow:var(--shadow)
}
.picker button{
padding:7px;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer
}
.picker button:hover{
background:var(--panel-soft)
}
.picker i{
display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%
}
@media(max-width:900px){
.form-grid{
grid-template-columns:repeat(2,1fr)
}
}
@media(max-width:600px){
.form-grid{
grid-template-columns:1fr
}
.panel,.admin-note{
padding:14px
}
}

@media(min-width:901px){
  .legend{
    gap:8px !important;
    margin-top:10px !important;
  }
  .legend span{
    gap:5px !important;
    padding:5px 9px !important;
    font-size:10px;
    min-height:22px !important;
  }
  .legend i{
    width:7px !important;
    height:7px !important;
    flex-basis:7px !important;
  }
  .legend b{
    font-size:9px !important;
  }
  .legend small{
    font-size:8px !important;
  }
}

@media(min-width:901px){

  body::before{
content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:.095;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.32' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.95'/%3E%3C/svg%3E");
    background-size:420px 420px;
    mix-blend-mode:multiply;
}

  body.ink-mode::before{
opacity:.12;mix-blend-mode:screen
}

  .app{
position:relative;z-index:1
}
}

@media(min-width:901px){
body:not(.ink-mode) .board:hover{
box-shadow:0 24px 65px rgba(31,41,55,.14),inset 0 1px 0 rgba(255,255,255,.95)
}
body:not(.ink-mode) .day-head:hover,body:not(.ink-mode) .shift-cell:hover{
background:rgba(255,255,255,.34)
}
body.ink-mode{
background:radial-gradient(circle at 15% 10%,rgba(59,130,246,.10),transparent 28%),#4B4641
}
body.ink-mode .board{
background:rgba(17,26,36,.66);border-color:rgba(255,255,255,.10);box-shadow:0 24px 70px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.08)
}
body.ink-mode .board-head{
background:rgba(255,255,255,.04);border-bottom-color:rgba(255,255,255,.08)
}
body.ink-mode .legend span{
background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10)
}
}

@media(max-width:900px){

  html,body{
scroll-behavior:auto;overscroll-behavior-x:none
}

  body{
background:var(--bg)
}

  .board,.board-head,.legend span{
backdrop-filter:none;-webkit-backdrop-filter:none
}

  .board{
background:var(--panel);box-shadow:0 8px 22px rgba(16,24,40,.07)
}

  .board-head{
background:var(--panel);box-shadow:none
}

  .legend span{
background:var(--panel-soft);box-shadow:none
}

  .roster-wrap{
-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scroll-behavior:auto;
    scrollbar-width:none;
    will-change:scroll-position;
    contain:layout paint;
}

  .roster-wrap::-webkit-scrollbar{
display:none
}

  .day-grid,.person-row{
will-change:transform
}

  .shift-cell,.day-head,.person{
contain:paint
}

  .toast{
transition:none
}
}

@media(max-width:520px){

  .roster-wrap{
transform:translateZ(0);-webkit-transform:translateZ(0)
}

  .day-grid,.person-row{
backface-visibility:hidden;-webkit-backface-visibility:hidden
}
}

@media(min-width:901px){

  
  body:not(.ink-mode){
background:
      radial-gradient(circle at 10% 8%,rgba(96,165,250,.24),transparent 27%),
      radial-gradient(circle at 90% 12%,rgba(239,68,68,.17),transparent 25%),
      radial-gradient(circle at 48% 88%,rgba(96,165,250,.13),transparent 30%),
      radial-gradient(circle at 78% 72%,rgba(239,68,68,.08),transparent 24%),
      #f2f5f9;
}

  body.ink-mode{
background:
      radial-gradient(circle at 12% 8%,rgba(255,214,181,.16),transparent 30%),
      radial-gradient(circle at 88% 16%,rgba(201,123,112,.10),transparent 28%),
      radial-gradient(circle at 50% 90%,rgba(255,236,214,.08),transparent 32%),
      #4B4641;
}

  .board{
background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(247,250,253,.54));
    border-color:rgba(255,255,255,.88);
    box-shadow:0 26px 75px rgba(31,41,55,.15),inset 0 1px 0 rgba(255,255,255,.96),inset 1px 0 0 rgba(96,165,250,.08);
}

  .board-head{
background:linear-gradient(90deg,rgba(255,255,255,.38),rgba(96,165,250,.07),rgba(239,68,68,.06));
}

  .legend span{
background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(245,248,252,.30));
    border-color:rgba(255,255,255,.88);
}

  .person-head{
background:linear-gradient(180deg,rgba(96,165,250,.06),rgba(239,68,68,.035));
}

  .day-grid{
background:linear-gradient(90deg,rgba(96,165,250,.045),rgba(255,255,255,.38),rgba(239,68,68,.035));
}

  
  .day-head.is-today,.shift-cell.is-today{
background:#f3efff;
}

  .day-head.is-today .day-head strong{
color:#3f3560;
}

  .day-head em{
color:#5b4b83;background:#eee7ff;
}

  .shift{
box-shadow:0 5px 14px color-mix(in srgb,var(--c) 24%,transparent),inset 0 1px 0 rgba(255,255,255,.42);
}

  body.ink-mode .board{
background:linear-gradient(135deg,rgba(18,28,40,.76),rgba(22,25,39,.62));
    border-color:rgba(255,255,255,.13);
    box-shadow:0 28px 80px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.10),inset 1px 0 0 rgba(59,130,246,.10);
}

  body.ink-mode .board-head{
background:linear-gradient(90deg,rgba(255,255,255,.045),rgba(59,130,246,.07),rgba(239,68,68,.055));
}

  body.ink-mode .legend span{
background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(59,130,246,.035));
}

  body.ink-mode .person-head{
background:linear-gradient(180deg,rgba(59,130,246,.07),rgba(239,68,68,.04));
}
}

@media(max-width:900px){

  
  .day-head.is-today,
  .shift-cell.is-today{
background:#f3efff !important;
}

  .day-head.is-today .day-head strong{
color:#3f3560 !important;
}

  .day-head em{
color:#5b4b83 !important;background:#eee7ff !important;
}
}

@media(max-width:900px){

  
  body.ink-mode .day-head.is-today,
  body.ink-mode .shift-cell.is-today{
background:#28233a !important;
}

  body.ink-mode .day-head em{
color:#d9cfff !important;background:#40385a !important;
}
}

@media(max-width:900px){

  
  body.ink-mode .kicker,
  body.ink-mode .intro-meta span,  body.ink-mode .day-head span,
  body.ink-mode .legend small{
color:#aeb9c5
}

  body.ink-mode .intro-meta b,
  body.ink-mode .legend b,
  body.ink-mode .day-head strong,
  body.ink-mode .person strong{
color:#eef3f7
}

  body.ink-mode .day-head strong,
  body.ink-mode .person strong,
  body.ink-mode .shift b{
color:#f4f7fa
}

  body.ink-mode .day-head.is-today,
  body.ink-mode .shift-cell.is-today{
background:#28233a
}

  body.ink-mode .person,
  body.ink-mode .shift-cell{
background:var(--panel)
}

  body.ink-mode .day-grid{
background:var(--panel-soft)
}

  body.ink-mode .legend span{
color:#c4ced8;background:#1a2530;border-color:#334250
}

  body.ink-mode .legend b{
color:#f1f5f8
}

  body.ink-mode .day-head em{
color:#d9cfff;background:#40385a
}

  body.ink-mode .person-head{
color:#aeb9c5
}
}

@media(min-width:901px){

  
  .roster-wrap{
-webkit-overflow-scrolling:touch;
overscroll-behavior-x:contain;
/* Wheel input is smoothed in JS; keep scroll position updates immediate. */
scroll-behavior:auto;
scrollbar-width:thin;
contain:layout style;
transform:translateZ(0);
-webkit-transform:translateZ(0);
}

  .person-head,
  .person{
position:sticky;
    left:0;
    z-index:4;
}

  .person-head{
z-index:6;
}

  .person{
box-shadow:8px 0 14px rgba(16,24,40,.055);
}

  body.ink-mode .person{
box-shadow:8px 0 16px rgba(0,0,0,.16);
}

  .day-grid,
  .person-row{
will-change:auto;
}

  .shift-cell,
  .day-head,
  .person{
contain:layout paint;
}
}

@media(max-width:900px){

  
  .day-grid .days .day-head:nth-child(1),
  .day-grid .days .day-head:nth-child(8),
  .day-grid .days .day-head:nth-child(15),
  .day-grid .days .day-head:nth-child(22),
  .day-grid .days .day-head:nth-child(29),
  .person-row .days .shift-cell:nth-child(1),
  .person-row .days .shift-cell:nth-child(8),
  .person-row .days .shift-cell:nth-child(15),
  .person-row .days .shift-cell:nth-child(22),
  .person-row .days .shift-cell:nth-child(29){
border-left:2px solid #8a96a3;
}

  .day-grid .days .day-head:nth-child(7),
  .day-grid .days .day-head:nth-child(14),
  .day-grid .days .day-head:nth-child(21),
  .day-grid .days .day-head:nth-child(28),
  .day-grid .days .day-head:nth-child(32),
  .person-row .days .shift-cell:nth-child(7),
  .person-row .days .shift-cell:nth-child(14),
  .person-row .days .shift-cell:nth-child(21),
  .person-row .days .shift-cell:nth-child(28),
  .person-row .days .shift-cell:nth-child(32){
border-right:2px solid #8a96a3;
}

  body.ink-mode .day-grid .days .day-head:nth-child(1),
  body.ink-mode .day-grid .days .day-head:nth-child(8),
  body.ink-mode .day-grid .days .day-head:nth-child(15),
  body.ink-mode .day-grid .days .day-head:nth-child(22),
  body.ink-mode .day-grid .days .day-head:nth-child(29),
  body.ink-mode .person-row .days .shift-cell:nth-child(1),
  body.ink-mode .person-row .days .shift-cell:nth-child(8),
  body.ink-mode .person-row .days .shift-cell:nth-child(15),
  body.ink-mode .person-row .days .shift-cell:nth-child(22),
  body.ink-mode .person-row .days .shift-cell:nth-child(29){
border-left-color:#657384;
}

  body.ink-mode .day-grid .days .day-head:nth-child(7),
  body.ink-mode .day-grid .days .day-head:nth-child(14),
  body.ink-mode .day-grid .days .day-head:nth-child(21),
  body.ink-mode .day-grid .days .day-head:nth-child(28),
  body.ink-mode .day-grid .days .day-head:nth-child(32),
  body.ink-mode .person-row .days .shift-cell:nth-child(7),
  body.ink-mode .person-row .days .shift-cell:nth-child(14),
  body.ink-mode .person-row .days .shift-cell:nth-child(21),
  body.ink-mode .person-row .days .shift-cell:nth-child(28),
  body.ink-mode .person-row .days .shift-cell:nth-child(32){
border-right-color:#657384;
}
}

@media(max-width:900px){

  .day-head.week-start,
  .shift-cell.week-start{
border-left:2px solid #8a96a3 !important;
}

  .day-head.week-end,
  .shift-cell.week-end{
border-right:2px solid #8a96a3 !important;
}

  body.ink-mode .day-head.week-start,
  body.ink-mode .shift-cell.week-start{
border-left-color:#657384 !important;
}

  body.ink-mode .day-head.week-end,
  body.ink-mode .shift-cell.week-end{
border-right-color:#657384 !important;
}
}

@media(min-width:901px){

  
  .day-grid .days .day-head:nth-child(1),
  .day-grid .days .day-head:nth-child(8),
  .day-grid .days .day-head:nth-child(15),
  .day-grid .days .day-head:nth-child(22),
  .day-grid .days .day-head:nth-child(29),
  .person-row .days .shift-cell:nth-child(1),
  .person-row .days .shift-cell:nth-child(8),
  .person-row .days .shift-cell:nth-child(15),
  .person-row .days .shift-cell:nth-child(22),
  .person-row .days .shift-cell:nth-child(29),
  .day-grid .days .day-head:nth-child(7),
  .day-grid .days .day-head:nth-child(14),
  .day-grid .days .day-head:nth-child(21),
  .day-grid .days .day-head:nth-child(28),
  .day-grid .days .day-head:nth-child(32),
  .person-row .days .shift-cell:nth-child(7),
  .person-row .days .shift-cell:nth-child(14),
  .person-row .days .shift-cell:nth-child(21),
  .person-row .days .shift-cell:nth-child(28),
  .person-row .days .shift-cell:nth-child(32){
border-left:1px solid var(--line) !important;
    border-right:1px solid var(--line) !important;
}

  .day-head.week-start,
  .shift-cell.week-start{
border-left:3px solid rgba(16,24,40,.55) !important;
}

  .day-head.week-end,
  .shift-cell.week-end{
border-right:3px solid rgba(16,24,40,.55) !important;
}

  body.ink-mode .day-head.week-start,
  body.ink-mode .shift-cell.week-start{
border-left-color:rgba(255,255,255,.40) !important;
}

  body.ink-mode .day-head.week-end,
  body.ink-mode .shift-cell.week-end{
border-right-color:rgba(255,255,255,.40) !important;
}
}

@media(max-width:900px){

  .day-grid .days .day-head:nth-child(1),
  .day-grid .days .day-head:nth-child(8),
  .day-grid .days .day-head:nth-child(15),
  .day-grid .days .day-head:nth-child(22),
  .day-grid .days .day-head:nth-child(29),
  .person-row .days .shift-cell:nth-child(1),
  .person-row .days .shift-cell:nth-child(8),
  .person-row .days .shift-cell:nth-child(15),
  .person-row .days .shift-cell:nth-child(22),
  .person-row .days .shift-cell:nth-child(29),
  .day-grid .days .day-head:nth-child(7),
  .day-grid .days .day-head:nth-child(14),
  .day-grid .days .day-head:nth-child(21),
  .day-grid .days .day-head:nth-child(28),
  .day-grid .days .day-head:nth-child(32),
  .person-row .days .shift-cell:nth-child(7),
  .person-row .days .shift-cell:nth-child(14),
  .person-row .days .shift-cell:nth-child(21),
  .person-row .days .shift-cell:nth-child(28),
  .person-row .days .shift-cell:nth-child(32){
border-left:1px solid var(--line) !important;
    border-right:1px solid var(--line) !important;
}

  .day-head.week-start,
  .shift-cell.week-start{
border-left:2px solid #8a96a3 !important;
}

  .day-head.week-end,
  .shift-cell.week-end{
border-right:2px solid #8a96a3 !important;
}

  body.ink-mode .day-head.week-start,
  body.ink-mode .shift-cell.week-start{
border-left-color:#657384 !important;
}

  body.ink-mode .day-head.week-end,
  body.ink-mode .shift-cell.week-end{
border-right-color:#657384 !important;
}
}

@media(min-width:901px){

  
  .roster-wrap{
scrollbar-width:auto;scrollbar-color:#9aa6b2 #e7ebef;
}

  .roster-wrap::-webkit-scrollbar{
height:14px;
}

  .roster-wrap::-webkit-scrollbar-track{
background:#e7ebef;border-radius:10px;
}

  .roster-wrap::-webkit-scrollbar-thumb{
background:#9aa6b2;border-radius:10px;border:2px solid #e7ebef;
}

  .roster-wrap::-webkit-scrollbar-thumb:hover{
background:#788695;
}

  body.ink-mode .roster-wrap{
scrollbar-color:#667586 #1a2530;
}

  body.ink-mode .roster-wrap::-webkit-scrollbar-track{
background:#1a2530;
}

  body.ink-mode .roster-wrap::-webkit-scrollbar-thumb{
background:#667586;border-color:#1a2530;
}

  body.ink-mode .roster-wrap::-webkit-scrollbar-thumb:hover{
background:#8190a0;
}
}

.current-shift i{
width:6px !important;
height:6px !important;
border-radius:50%;
background:var(--current-color,#64748b);
box-shadow:0 0 0 3px color-mix(in srgb,var(--current-color,#64748b) 13%,transparent) !important;
flex:0 0 auto;
}

@media(min-width:901px){

  .intro h1{
font-size:34px !important;line-height:1.12 !important
}

  .intro p{
font-size:14px !important;line-height:1.55 !important
}

  .intro-meta span{
font-size:10px !important
}

  .intro-meta b{
font-size:13px !important
}


  .legend span{
font-size:12px !important
}

  .legend b{
font-size:10px !important
}

  .legend small{
font-size:9px !important
}

  .day-head strong{
font-size:17px !important;line-height:1.15 !important
}

  .day-head span{
font-size:13px !important
}

  .day-head em{
font-size:10px !important
}

  .person strong{
font-size:17px !important;line-height:1.2 !important
}

  .duty-status b{
font-size:9px !important
}

  .shift b{
font-size:18px !important;line-height:1 !important
}

  .shift small{
font-size:9px !important;line-height:1.2 !important
}

  footer,.site-footer{
font-size:10px !important
}
}

.duty-status{
display:inline-flex !important;
align-items:center !important;
width:max-content !important;
max-width:100% !important;
margin:0 !important;
padding:3px 7px !important;
border-radius:999px !important;
font-size:8px !important;
font-weight:700 !important;
line-height:1 !important;
letter-spacing:.02em !important;
white-space:nowrap !important;
opacity:.72 !important;
}

.duty-status b{
font-size:8px !important;
font-weight:700 !important;
opacity:.88 !important;
}

@media(min-width:901px){

  .person{
gap:6px !important;
}

  .person strong{
font-size:17px !important;
}

  .duty-status{
padding:4px 8px !important;
    font-size:9px !important;
}

  .duty-status b{
font-size:9px !important;
}
}

@media(max-width:900px){

  .person{
gap:4px !important;
}

  .duty-status{
padding:3px 6px !important;
    font-size:7px !important;
}

  .duty-status b{
font-size:7px !important;
}
}

.person-name{
display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  min-width:0 !important;
}

.name-active-dot{
flex:0 0 auto !important;
display:inline-block !important;
width:5px !important;
height:5px !important;
border-radius:50% !important;
background:var(--status-color,#64748b) !important;
box-shadow:
    0 0 0 2px color-mix(in srgb,var(--status-color,#64748b) 18%,transparent),
    0 0 12px color-mix(in srgb,var(--status-color,#64748b) 92%,transparent),
    0 0 26px color-mix(in srgb,var(--status-color,#64748b) 64%,transparent),
    0 0 44px color-mix(in srgb,var(--status-color,#64748b) 42%,transparent),
    0 0 64px color-mix(in srgb,var(--status-color,#64748b) 22%,transparent) !important;
animation:activeDutyPulse 1.8s ease-in-out infinite !important;
}

@keyframes activeDutyPulse{

  0%,100%{
opacity:.76;
    transform:scale(.9);
    box-shadow:
      0 0 0 2px color-mix(in srgb,var(--status-color,#64748b) 15%,transparent),
      0 0 10px color-mix(in srgb,var(--status-color,#64748b) 78%,transparent),
      0 0 22px color-mix(in srgb,var(--status-color,#64748b) 50%,transparent),
      0 0 40px color-mix(in srgb,var(--status-color,#64748b) 32%,transparent),
      0 0 58px color-mix(in srgb,var(--status-color,#64748b) 18%,transparent);
}

  50%{
opacity:1;
    transform:scale(1.06);
    box-shadow:
      0 0 0 2px color-mix(in srgb,var(--status-color,#64748b) 22%,transparent),
      0 0 14px color-mix(in srgb,var(--status-color,#64748b) 100%,transparent),
      0 0 30px color-mix(in srgb,var(--status-color,#64748b) 70%,transparent),
      0 0 50px color-mix(in srgb,var(--status-color,#64748b) 44%,transparent),
      0 0 72px color-mix(in srgb,var(--status-color,#64748b) 24%,transparent);
}
}

@media(min-width:901px){

  .duty-status{
font-size:8px !important;
    padding:3px 7px !important;
}

  .duty-status b{
font-size:8px !important;
}
}

@media(max-width:900px){

  .duty-status{
font-size:7px !important;
    padding:3px 6px !important;
}

  .duty-status b{
font-size:7px !important;
}
}

@media(min-width:901px){

  .footer-switch{
display:none !important;
}
}

body.ink-mode .today-jump{
  background:rgba(255,255,255,.07) !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 5px 16px rgba(0,0,0,.18) !important;
  color:#e2e8f0 !important;
}

body.ink-mode .today-jump:hover,
body.ink-mode .today-jump:focus-visible{
  background:rgba(255,255,255,.11) !important;
  border-color:rgba(96,165,250,.38) !important;
  color:#f1f5f9 !important;
}

@media(max-width:900px){

  .intro h1{
font-size:28px !important;line-height:1.15 !important
}

  .intro p{
font-size:14px !important;line-height:1.55 !important
}

  .intro-meta span{
font-size:10px !important
}

  .intro-meta b{
font-size:13px !important
}


  .legend span{
font-size:11px !important
}

  .legend b{
font-size:10px !important
}

  .legend small{
font-size:9px !important
}

  .day-head strong{
font-size:16px !important;line-height:1.15 !important
}

  .day-head span{
font-size:12px !important
}

  .day-head em{
font-size:9px !important
}

  .person strong{
font-size:16px !important;line-height:1.2 !important
}

  .duty-status{
font-size:8px !important
}

  .duty-status b{
font-size:8px !important
}

  .shift b{
font-size:17px !important;line-height:1 !important
}

  .shift small{
font-size:9px !important;line-height:1.2 !important
}
}

@media(max-width:900px){

  .updated-meta,
  .update-meta,
  .last-updated,
  .updated-info{
font-size:6px !important;
    line-height:1.2 !important;
    font-weight:500 !important;
    letter-spacing:.01em !important;
    opacity:.58 !important;
}
}

@media(max-width:900px){

  .intro-meta{
gap:3px !important;
    font-size:6px !important;
    line-height:1.1 !important;
    font-weight:500 !important;
    opacity:.58 !important;
}

  .intro-meta span,
  .intro-meta b{
font-size:6px !important;
    line-height:1.1 !important;
    font-weight:500 !important;
    letter-spacing:.01em !important;
}
}

@media(max-width:900px){

  .site-footer{
display:flex !important;
    flex-direction:column !important;
    gap:.5em !important;
}
  .footer-switch{
font-size:12px !important;
    line-height:1.3 !important;
}

  .footer-fun{
font-size:9px !important;
    line-height:1.3 !important;
}
}

@media(max-width:900px){

  .site-footer{
text-align:center !important;
}

  .footer-switch{
font-size:12px !important;
    font-weight:700 !important;
    line-height:1.35 !important;
}

  .footer-divider{
display:block !important;
    width:50% !important;
    height:1px !important;
    margin:4px auto !important;
    background:currentColor !important;
    opacity:.22 !important;
    border:0 !important;
}

  .footer-fun{
font-size:10px !important;
    font-weight:500 !important;
    line-height:1.35 !important;
    opacity:.68 !important;
}
}

@media(min-width:901px){

  .legend span{
font-size:10px !important
}

  .legend b{
font-size:8px !important
}

  .legend small{
font-size:7px !important
}

  .shift small{
font-size:8px !important
}
}

@media(max-width:900px){

  .legend span{
font-size:6px !important
}

  .legend b{
font-size:6px !important
}

  .legend small{
font-size:5px !important
}

  .shift small{
font-size:7px !important
}
}

@media(max-width:900px){

  .legend{
width:100% !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:4px !important;
    overflow:hidden !important;
    white-space:nowrap !important;
}

  .legend span{
flex:0 0 auto !important;
    padding:3px 5px !important;
    gap:3px !important;
    white-space:nowrap !important;
}

  .legend i{
width:5px !important;height:5px !important;flex:0 0 5px !important
}
}

@media(max-width:900px){

  .legend{
display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    width:100% !important;
    gap:4px !important;
    align-items:center !important;
    overflow:visible !important;
}

  .legend span{
min-width:0 !important;
    width:100% !important;
    box-sizing:border-box !important;
    justify-content:center !important;
    padding:3px 3px !important;
    gap:3px !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    font-size:6.5px !important;
    line-height:1.15 !important;
}

  .legend i{
width:5px !important;height:5px !important;flex:0 0 5px !important
}

  .legend b{
font-size:6.5px !important;flex:0 0 auto !important
}

  .legend small{
font-size:5.5px !important;overflow:hidden !important;text-overflow:clip !important
}
}

.day-grid,
.person-row{
position:relative !important;
border-bottom:1px solid rgba(148,163,184,.24) !important;
border:0 !important;
}

.day-grid .person-head,
.day-grid .day-head,
.person-row .person,
.person-row .shift-cell{
border:0 !important;
border-right:1px solid rgba(148,163,184,.14) !important;
border-bottom:1px solid rgba(148,163,184,.14) !important;
border-top:0 !important;
border-left:0 !important;
}

.day-grid .person-head,
.person-row .person{
border-left:0 !important;
}

.day-grid .day-head:first-child,
.person-row .shift-cell:first-child{
border-left:1px solid rgba(148,163,184,.26) !important;
}

.day-grid .day-head:last-child,
.person-row .shift-cell:last-child{
border-right:0 !important;
}

body.ink-mode .day-grid .person-head,
body.ink-mode .day-grid .day-head,
body.ink-mode .person-row .person,
body.ink-mode .person-row .shift-cell{
border-color:rgba(148,163,184,.20) !important;
border-right-color:rgba(148,163,184,.11) !important;
border-bottom-color:rgba(148,163,184,.11) !important;
}

body.ink-mode .roster-wrap{
border-color:rgba(148,163,184,.22) !important;
}

@media(max-width:900px){

  .day-grid .person-head,
  .day-grid .day-head,
  .person-row .person,
  .person-row .shift-cell{
border-color:rgba(148,163,184,.22) !important;
}

  .roster-wrap{
border-color:rgba(100,116,139,.24) !important;
}

  body.ink-mode .day-grid .person-head,
  body.ink-mode .day-grid .day-head,
  body.ink-mode .person-row .person,
  body.ink-mode .person-row .shift-cell{
border-color:rgba(148,163,184,.18) !important;
}
}

body.ink-mode .day-grid,
body.ink-mode .person-row{
border-bottom-color:rgba(148,163,184,.18) !important;
}

@media(max-width:900px){

  .day-grid .person-head,
  .day-grid .day-head,
  .person-row .person,
  .person-row .shift-cell{
border-top:0 !important;
    border-bottom:0 !important;
    border-left:0 !important;
    border-right:1px solid rgba(148,163,184,.20) !important;
}

  .day-grid,
  .person-row{
border-bottom:1px solid rgba(148,163,184,.20) !important;
}

  .day-grid .day-head:last-child,
  .person-row .shift-cell:last-child{
border-right:0 !important
}

  .roster-wrap{
border:0 !important
}

  body.ink-mode .day-grid .person-head,
  body.ink-mode .day-grid .day-head,
  body.ink-mode .person-row .person,
  body.ink-mode .person-row .shift-cell{
border-right-color:rgba(148,163,184,.16) !important;
}

  body.ink-mode .day-grid,
  body.ink-mode .person-row{
border-bottom-color:rgba(148,163,184,.16) !important;
}
}

@media(max-width:900px){

  .roster-wrap{
border:1px solid rgba(148,163,184,.24) !important;
    border-radius:0 !important;
}

  .day-grid .person-head,
  .day-grid .day-head,
  .person-row .person,
  .person-row .shift-cell{
border:1px solid rgba(148,163,184,.22) !important;
}

  body.ink-mode .roster-wrap{
border-color:rgba(148,163,184,.18) !important;
}

  body.ink-mode .day-grid .person-head,
  body.ink-mode .day-grid .day-head,
  body.ink-mode .person-row .person,
  body.ink-mode .person-row .shift-cell{
border-color:rgba(148,163,184,.16) !important;
}
}

@media(max-width:900px){

  .day-grid,
  .person-row{
border-bottom:0 !important;
}

  .day-grid .person-head,
  .day-grid .day-head,
  .person-row .person,
  .person-row .shift-cell{
border-color:rgba(148,163,184,.22) !important;
    border-width:1px !important;
    border-style:solid !important;
}

  body.ink-mode .day-grid .person-head,
  body.ink-mode .day-grid .day-head,
  body.ink-mode .person-row .person,
  body.ink-mode .person-row .shift-cell{
border-color:rgba(148,163,184,.16) !important;
}
}

@media(max-width:900px){

  .roster-wrap{
border:0 !important;
}

  .day-grid,
  .person-row{
border:0 !important;
}

  .day-grid .person-head,
  .day-grid .day-head,
  .person-row .person,
  .person-row .shift-cell{
border:0 !important;
}
}

@media(max-width:900px){

  .roster-wrap,
  .roster-wrap *,
  .day-grid,
  .person-row,
  .day-grid .person-head,
  .day-grid .day-head,
  .person-row .person,
  .person-row .shift-cell{
border:0 !important;
    border-top:0 !important;
    border-right:0 !important;
    border-bottom:0 !important;
    border-left:0 !important;
    outline:0 !important;
}
}

@media(max-width:900px){
  .roster-wrap,
  .day-grid,
  .person-row{
border:0 !important;
}

  .day-grid .person-head,
  .day-grid .day-head,
  .person-row .person,
  .person-row .shift-cell{
border:0 !important;
    border-right:1px solid rgba(148,163,184,.14) !important;
    border-bottom:1px solid rgba(148,163,184,.14) !important;
}

  .day-grid .person-head,
  .person-row .person{
border-left:0 !important;
}

  .day-grid .day-head:last-child,
  .person-row .shift-cell:last-child{
border-right:0 !important;
}

  body.ink-mode .day-grid .person-head,
  body.ink-mode .day-grid .day-head,
  body.ink-mode .person-row .person,
  body.ink-mode .person-row .shift-cell{
border-right-color:rgba(148,163,184,.11) !important;
    border-bottom-color:rgba(148,163,184,.11) !important;
}
}

.day-head.week-start,
.shift-cell.week-start{
border-left:3px solid rgba(71,85,105,.55) !important;
}

.day-head.week-end,
.shift-cell.week-end{
border-right:3px solid rgba(71,85,105,.55) !important;
}

body.ink-mode .day-head.week-start,
body.ink-mode .shift-cell.week-start{
border-left-color:rgba(226,232,240,.42) !important;
}

body.ink-mode .day-head.week-end,
body.ink-mode .shift-cell.week-end{
border-right-color:rgba(226,232,240,.42) !important;
}

@media(max-width:900px){

  .day-head.week-start,
  .shift-cell.week-start{
border-left:2px solid rgba(71,85,105,.50) !important;
}

  .day-head.week-end,
  .shift-cell.week-end{
border-right:2px solid rgba(71,85,105,.50) !important;
}

  body.ink-mode .day-head.week-start,
  body.ink-mode .shift-cell.week-start{
border-left-color:rgba(226,232,240,.38) !important;
}

  body.ink-mode .day-head.week-end,
  body.ink-mode .shift-cell.week-end{
border-right-color:rgba(226,232,240,.38) !important;
}
}

@media(max-width:900px){

  .legend{
display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    min-width:0 !important;
    gap:4px !important;
    overflow:hidden !important;
    align-items:center !important;
}

  .legend span{
flex:1 1 0 !important;
    min-width:0 !important;
    width:auto !important;
    max-width:none !important;
    box-sizing:border-box !important;
    justify-content:center !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    padding:3px 2px !important;
    gap:2px !important;
}

  .legend i{
flex:0 0 5px !important;
    width:5px !important;
    height:5px !important;
}

  .legend b{
flex:0 0 auto !important
}

  .legend small{
min-width:0 !important;
    overflow:hidden !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
}
}

@media(max-width:900px){

  .legend{
gap:5px !important;
    overflow:visible !important;
}

  .legend span{
flex:1 1 0 !important;
    padding:4px 5px !important;
    min-width:0 !important;
}
}

@media(max-width:900px){

  .legend{
gap:5px !important;
}

  .legend span{
padding:4px 5px !important;
    gap:3px !important;
    font-size:8px !important;
    line-height:1.2 !important;
}

  .legend i{
width:6px !important;
    height:6px !important;
    flex:0 0 6px !important;
}

  .legend b{
font-size:8px !important;
    font-weight:800 !important;
}

  .legend small{
font-size:7px !important;
    line-height:1.2 !important;
    overflow:visible !important;
    text-overflow:clip !important;
}
}

@media(max-width:900px){

  .legend{
gap:3px !important;
    margin-top:5px !important;
}

  .legend span{
padding:2px 3px !important;
    gap:2px !important;
    border-radius:999px !important;
}

  .legend i{
width:4px !important;
    height:4px !important;
    flex:0 0 4px !important;
}

  .legend b{
font-size:6px !important
}

  .legend small{
font-size:5px !important
}
}

@media(max-width:900px){

  .legend{
display:flex !important;
    width:100% !important;
    gap:3px !important;
    margin:4px 0 !important;
    padding:0 !important;
    align-items:center !important;
    justify-content:space-between !important;
    overflow:visible !important;
}

  .legend span{
flex:1 1 0 !important;
    min-width:0 !important;
    width:auto !important;
    padding:2px 2px !important;
    gap:2px !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:4px !important;
    background:transparent !important;
    justify-content:center !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    font-size:6px !important;
    line-height:1 !important;
}

  .legend i{
width:4px !important;
    height:4px !important;
    flex:0 0 4px !important;
}

  .legend b{
font-size:6px !important;
    font-weight:800 !important;
}

  .legend small{
display:none !important;
}
}

@media(max-width:900px){

  .legend span{
padding:2px 2px !important;
    gap:2px !important;
    font-size:5.8px !important;
}

  .legend i{
width:4px !important;
    height:4px !important;
    flex:0 0 4px !important;
}

  .legend b{
font-size:6px !important;
}

  .legend small{
display:inline !important;
    font-size:5px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:visible !important;
}
}

.day-grid .day-head{
background:rgba(30,64,175,.055) !important;
  box-shadow:inset 0 -1px 0 rgba(30,64,175,.07);
}

.day-grid .day-head span,
.day-grid .day-head strong{
color:#334155;
}

body.ink-mode .day-grid .day-head{
background:rgba(30,64,175,.13) !important;
  box-shadow:inset 0 -1px 0 rgba(96,165,250,.10);
}

body.ink-mode .day-grid .day-head span,
body.ink-mode .day-grid .day-head strong{
color:#dbe7f5;
}

.day-grid .day-head.is-today{
background:#f3efff !important;
}

body.ink-mode .day-grid .day-head.is-today{
background:#28233a !important;
}

@keyframes themeButtonRipple{
    0%{opacity:.55;transform:scale(.72);}
    100%{opacity:0;transform:scale(1.72);}
  }

  @keyframes themeButtonIcon{
    0%{transform:rotate(0) scale(1);}
    28%{transform:rotate(-16deg) scale(1.12);}
    58%{transform:rotate(10deg) scale(1.04);}
    100%{transform:rotate(0) scale(1);}
  }
}

/* Desktop — 24-hour progress strictly on the outer outline */
@media(min-width:901px){

  body.ink-mode .today-jump{
    border-color:rgba(248,113,113,.12) !important;
    background:linear-gradient(rgba(17,24,39,.88),rgba(17,24,39,.88)) !important;
  }

  body.ink-mode .today-jump::after{
    background:conic-gradient(
      from -90deg,
      #f87171 0 var(--day-remaining),
      rgba(248,113,113,.13) var(--day-remaining) 100%
    );
  }

  body.ink-mode .today-jump:hover,
  body.ink-mode .today-jump:focus-visible{
    background:linear-gradient(rgba(17,24,39,.88),rgba(17,24,39,.88)) !important;
    box-shadow:
      0 6px 18px rgba(0,0,0,.20),
      0 0 8px rgba(248,113,113,.08) !important;
  }
}

/* Mobile — compact Today pill with 24-hour progress outline */
@media(max-width:900px){

  body.ink-mode .today-jump{
    background:#182235 !important;
    border-color:rgba(248,113,113,.20) !important;
    color:#e2e8f0 !important;
    box-shadow:0 4px 12px rgba(0,0,0,.16) !important;
  }

  body.ink-mode .today-jump::after{
    background:conic-gradient(
      from -90deg,
      #f87171 0 var(--day-remaining),
      rgba(248,113,113,.14) var(--day-remaining) 100%
    );
  }
}

/* Mobile — larger, readable legend letters while keeping all 5 items on one line */
@media(max-width:900px){
  .legend{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    width:100% !important;
    gap:3px !important;
    align-items:center !important;
    overflow:visible !important;
    white-space:nowrap !important;
  }

  .legend span{
    min-width:0 !important;
    width:100% !important;
    box-sizing:border-box !important;
    justify-content:center !important;
    padding:3px 2px !important;
    gap:3px !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    font-size:8px !important;
    line-height:1.1 !important;
  }

  .legend i{
    width:6px !important;
    height:6px !important;
    flex:0 0 6px !important;
  }

  .legend b{
    font-size:9px !important;
    font-weight:900 !important;
    flex:0 0 auto !important;
    line-height:1 !important;
  }

  .legend small{
    font-size:6.5px !important;
    line-height:1 !important;
    overflow:hidden !important;
    text-overflow:clip !important;
  }
}

/* Mobile — give the compact legend enough vertical room for clear text */
@media(max-width:900px){
  .legend{
    min-height:26px !important;
    height:auto !important;
    align-items:center !important;
  }

  .legend span{
    min-height:24px !important;
    height:24px !important;
    padding:4px 2px !important;
    align-items:center !important;
    line-height:1.15 !important;
  }

  .legend b{
    line-height:1.15 !important;
  }

  .legend small{
    line-height:1.15 !important;
  }
}

/* Mobile — two-row shift legend for clear, unclipped information */
@media(max-width:900px){
  .legend{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-template-rows:repeat(2,auto) !important;
    width:100% !important;
    gap:5px !important;
    align-items:stretch !important;
    overflow:visible !important;
  }

  .legend span{
    width:100% !important;
    min-width:0 !important;
    min-height:38px !important;
    height:auto !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:5px 4px !important;
    gap:4px !important;
    overflow:visible !important;
    white-space:nowrap !important;
    line-height:1.1 !important;
  }

  .legend i{
    width:7px !important;
    height:7px !important;
    flex:0 0 7px !important;
  }

  .legend b{
    font-size:10px !important;
    font-weight:900 !important;
    line-height:1.1 !important;
    flex:0 0 auto !important;
  }

  .legend small{
    font-size:7px !important;
    line-height:1.15 !important;
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
  }

  .legend span:nth-child(4){
    grid-column:1;
  }

  .legend span:nth-child(5){
    grid-column:2;
  }
}

/* Mobile — tighter two-row legend */
@media(max-width:900px){
  .legend{
    gap:2px !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    margin:0 !important;
  }

  .legend span{
    min-height:27px !important;
    height:27px !important;
    padding:2px 3px !important;
    gap:3px !important;
    line-height:1 !important;
  }

  .legend i{
    width:5px !important;
    height:5px !important;
    flex-basis:5px !important;
  }

  .legend b{
    font-size:8.5px !important;
    line-height:1 !important;
  }

  .legend small{
    font-size:6px !important;
    line-height:1 !important;
  }
}

/* Mobile — ultra-compact two-row legend alignment */
@media(max-width:900px){
  .legend{
    row-gap:0 !important;
    column-gap:2px !important;
    grid-template-rows:repeat(2,24px) !important;
  }

  .legend span{
    min-height:24px !important;
    height:24px !important;
    padding:1px 2px !important;
    gap:2px !important;
  }

  .legend b{
    font-size:8.5px !important;
  }

  .legend small{
    font-size:6.5px !important;
  }

  .legend span:nth-child(4),
  .legend span:nth-child(5){
    align-self:center !important;
  }
}

/* Mobile — slightly larger legend color dots */
@media(max-width:900px){
  .legend i{
    width:7px !important;
    height:7px !important;
    flex:0 0 7px !important;
  }
}

/* Mobile — make legend color dots visibly larger and balanced */
@media(max-width:900px){
  .legend i{
    width:8px !important;
    height:8px !important;
    min-width:8px !important;
    min-height:8px !important;
    flex:0 0 8px !important;
    display:inline-block !important;
    border-radius:50% !important;
  }
}

/* Mobile — final compact two-row legend layout */
@media(max-width:900px){
  .legend{
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    grid-template-rows:24px 24px !important;
    column-gap:2px !important;
    row-gap:0 !important;
    width:100% !important;
    align-items:center !important;
  }

  .legend span{
    min-width:0 !important;
    width:100% !important;
    height:24px !important;
    min-height:24px !important;
    padding:1px 2px !important;
    gap:2px !important;
    overflow:visible !important;
    justify-content:center !important;
  }

  .legend span:nth-child(1),
  .legend span:nth-child(2),
  .legend span:nth-child(3){
    grid-column:auto / span 2 !important;
  }

  .legend span:nth-child(4){
    grid-column:2 / span 2 !important;
  }

  .legend span:nth-child(5){
    grid-column:4 / span 2 !important;
  }

  .legend i{
    width:8px !important;
    height:8px !important;
    min-width:8px !important;
    min-height:8px !important;
    flex:0 0 8px !important;
  }

  .legend b{
    font-size:8.5px !important;
    font-weight:900 !important;
  }

  .legend small{
    font-size:6.5px !important;
    white-space:nowrap !important;
    overflow:visible !important;
    line-height:1 !important;
  }
}

/* Mobile — reliable CSS chevron separator for shift legend */
@media(max-width:900px){
  .legend .legend-sep{
    display:inline-block !important;
    width:5px !important;
    height:5px !important;
    margin:0 1px !important;
    border-top:1.5px solid currentColor !important;
    border-right:1.5px solid currentColor !important;
    transform:rotate(45deg) !important;
    flex:0 0 5px !important;
    vertical-align:middle !important;
  }

  .legend small{
    display:inline-flex !important;
    align-items:center !important;
    gap:1px !important;
  }
}

/* Mobile — final clean compact legend */
@media(max-width:900px){
  .legend{
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    grid-template-rows:22px 22px !important;
    gap:0 !important;
    width:100% !important;
    margin:0 !important;
    align-items:center !important;
  }

  .legend span{
    grid-column:auto / span 2 !important;
    width:100% !important;
    min-width:0 !important;
    height:22px !important;
    min-height:22px !important;
    padding:0 2px !important;
    margin:0 !important;
    gap:2px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:visible !important;
    white-space:nowrap !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .legend span:nth-child(4){
    grid-column:2 / span 2 !important;
  }

  .legend span:nth-child(5){
    grid-column:4 / span 2 !important;
  }

  .legend i{
    width:7px !important;
    height:7px !important;
    min-width:7px !important;
    min-height:7px !important;
    flex:0 0 7px !important;
  }

  .legend b{
    font-size:8.5px !important;
    font-weight:900 !important;
    line-height:1 !important;
  }

  .legend small{
    display:inline !important;
    font-size:6.5px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:visible !important;
  }

  .legend .legend-sep{
    display:none !important;
  }
}

/* Mobile — compact bold dash between shift and time */
@media(max-width:900px){
  .legend .legend-dash{
    display:inline-block !important;
    margin:0 2px !important;
    font-size:8px !important;
    font-weight:900 !important;
    line-height:1 !important;
  }
}

/* Mobile — tighten legend item spacing */
@media(max-width:900px){
  .legend{
    column-gap:0 !important;
    row-gap:0 !important;
  }

  .legend span{
    gap:1px !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .legend i{
    margin-right:1px !important;
  }

  .legend .legend-dash{
    margin:0 1px !important;
    font-size:8px !important;
    font-weight:900 !important;
  }
}
/* Mobile — slightly larger updated timestamp */
@media(max-width:900px){
  .updated,
  .update-time,
  #updated,
  #updatedAt,
  .last-updated{
    font-size:10px !important;
  }
}
/* Mobile — exact updated timestamp sizing */
@media(max-width:900px){
  #updated{
    font-size:6px !important;
  }

  .updated-badge,
  .updated-label{
    font-size:8px !important;
  }
}
/* Mobile — exact UPDATED label size */
@media(max-width:900px){
  .intro-meta > span{
    font-size:8px !important;
  }
}
/* Mobile — keep legend indicators close together */
@media(max-width:900px){
  .legend{
    grid-template-columns:repeat(6,minmax(0,auto)) !important;
    justify-content:center !important;
    column-gap:0 !important;
  }
  .legend span{
    width:auto !important;
    padding:0 !important;
    margin:0 !important;
    gap:1px !important;
  }
  .legend span:nth-child(4){grid-column:2 / span 2 !important;}
  .legend span:nth-child(5){grid-column:4 / span 2 !important;}
}
/* Mobile — precise legend spacing */
@media(max-width:900px){
  .legend{
    column-gap:4px !important;
  }
  .legend span{
    padding-left:1px !important;
    padding-right:1px !important;
    gap:2px !important;
  }
}
/* Mobile — adjust legend outer spacing */
@media(max-width:900px){
  .legend{
    column-gap:6px !important;
  }
  .legend span{
    padding-left:2px !important;
    padding-right:2px !important;
  }
}
/* Mobile — 8px legend color dots */
@media(max-width:900px){
  .legend i{
    width:8px !important;
    height:8px !important;
    min-width:8px !important;
    min-height:8px !important;
    flex-basis:8px !important;
  }
}
/* Mobile — 10px legend color dots */
@media(max-width:900px){
  .legend i{
    width:10px !important;
    height:10px !important;
    min-width:10px !important;
    min-height:10px !important;
    flex-basis:10px !important;
  }
}
/* Mobile — lift the currently active shift in the legend */
@media(max-width:900px){
  .legend span.active-shift{
    transform:translateY(-3px);
    filter:drop-shadow(0 3px 4px rgba(15,23,42,.18));
    transition:transform .25s ease,filter .25s ease;
  }

  .legend span.active-shift i{
    box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 8px var(--c);
  }

  .legend span.active-shift b{
    font-weight:1000 !important;
  }
}
/* Mobile — active legend item: no glow, lift the whole item */
@media(max-width:900px){
  .legend span.active-shift{
    transform:translateY(-3px);
    filter:none !important;
    padding:2px 4px !important;
    border-radius:7px;
    background:color-mix(in srgb,var(--c) 18%,transparent) !important;
    box-shadow:0 2px 7px rgba(15,23,42,.10) !important;
    border:1px solid color-mix(in srgb,var(--c) 38%,transparent) !important;
  }

  .legend span.active-shift i{
    box-shadow:none !important;
  }

  .legend span.active-shift b,
  .legend span.active-shift small{
    font-weight:900 !important;
  }
}
/* Mobile — active legend: clean lift only */
@media(max-width:900px){
  .legend span.active-shift{
    transform:translateY(-3px);
    filter:none !important;
    padding:0 2px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  .legend span.active-shift i{
    box-shadow:none !important;
  }
}
/* Mobile — active legend lift: 4px */
@media(max-width:900px){
  .legend span.active-shift{
    transform:translateY(-4px);
  }
}
/* Mobile — active legend: subtle time-based underline */
@media(max-width:900px){
  .legend span.active-shift{
    transform:none !important;
    filter:none !important;
    padding:0 2px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    position:relative;
  }

  .legend span.active-shift::after{
    content:"";
    position:absolute;
    left:12%;
    right:12%;
    bottom:-2px;
    height:1px;
    border-radius:999px;
    background:color-mix(in srgb,var(--c) 45%,transparent);
    opacity:.55;
  }

  .legend span.active-shift i{
    box-shadow:none !important;
  }
}
/* Mobile — neutral active legend underline */
@media(max-width:900px){
  .legend span.active-shift::after{
    background:rgba(100,116,139,.32) !important;
    opacity:.55 !important;
  }
}
/* Mobile — ensure active legend underline is visible */
@media(max-width:900px){
  .legend span.active-shift{
    transform:none !important;
    position:relative;
    border-bottom:1px solid rgba(100,116,139,.32) !important;
    padding-bottom:1px !important;
  }
  .legend span.active-shift::after{
    display:none !important;
  }
}
/* Mobile — place active legend underline directly against the legend */
@media(max-width:900px){
  .legend span.active-shift{
    padding-bottom:0 !important;
    border-bottom:1px solid rgba(100,116,139,.32) !important;
  }
}
/* Mobile — active underline follows the legend item's actual width */
@media(max-width:900px){
  .legend span.active-shift{
    width:max-content !important;
    justify-self:center !important;
    border-bottom:1px solid rgba(100,116,139,.32) !important;
  }
}
/* Mobile — remove active legend underline */
@media(max-width:900px){
  .legend span.active-shift{
    transform:none !important;
    border:0 !important;
    padding:0 2px !important;
    background:transparent !important;
    box-shadow:none !important;
    filter:none !important;
  }
  .legend span.active-shift::after{
    display:none !important;
    content:none !important;
  }
}
/* Mobile — refined active shift details */
@media(max-width:900px){
  .legend span.active-shift{
    transform:none !important;
    border:0 !important;
    padding:0 2px !important;
    background:transparent !important;
    box-shadow:none !important;
    filter:none !important;
  }

  .legend span.active-shift b{
    font-weight:1000 !important;
    transform:translateY(-1px);
  }

  .legend span.active-shift small{
    opacity:1 !important;
    color:#334155 !important;
    font-weight:800 !important;
  }

  body.ink-mode .legend span.active-shift small{
    color:#e2e8f0 !important;
  }

  .legend span.active-shift i{
    box-shadow:none !important;
  }
}
/* Mobile — remove active shift micro position adjustment */
@media(max-width:900px){
  .legend span.active-shift b{
    transform:none !important;
  }
}
/* Mobile — make the active shift visibly clearer, still subtle */
@media(max-width:900px){
  .legend span.active-shift b{
    font-size:9.5px !important;
    font-weight:1000 !important;
    color:#0f172a !important;
  }

  .legend span.active-shift small{
    font-size:7px !important;
    font-weight:900 !important;
    color:#475569 !important;
    opacity:1 !important;
  }

  body.ink-mode .legend span.active-shift b{
    color:#f8fafc !important;
  }

  body.ink-mode .legend span.active-shift small{
    color:#cbd5e1 !important;
  }
}
/* Mobile — make active legend text visibly bold on phone rendering */
@media(max-width:900px){
  .legend span.active-shift b{
    font-weight:900 !important;
    -webkit-text-stroke:.18px currentColor;
    text-shadow:none !important;
  }
  .legend span.active-shift small{
    font-weight:800 !important;
    -webkit-text-stroke:.08px currentColor;
  }
}
/* Mobile — exact active legend typography */
@media(max-width:900px){
  .legend span.active-shift b{
    font-size:9.5px !important;
    font-weight:1000 !important;
  }
  .legend span.active-shift small{
    font-size:8px !important;
    font-weight:1000 !important;
  }
}

/* Desktop — active shift typography + updated metadata */
@media (min-width:901px){
  #legend span{
    font-size:14px !important;
    gap:7px !important;
    padding:7px 11px !important;
    min-height:30px !important;
  }

  #legend span b{
    font-size:12px !important;
    font-weight:850 !important;
  }

  #legend span small{
    font-size:10px !important;
    font-weight:700 !important;
  }

  #legend span.active-shift{
    position:relative;
    transform:translateY(-1px);
  }

  #legend span.active-shift b{
    font-size:12px !important;
    font-weight:950 !important;
    line-height:1 !important;
    -webkit-text-stroke:.2px currentColor;
  }

  #legend span.active-shift small{
    font-size:10px !important;
    font-weight:900 !important;
    line-height:1 !important;
    opacity:1 !important;
    -webkit-text-stroke:.08px currentColor;
  }

  #legend span.active-shift i{
    box-shadow:0 0 0 1px rgba(255,255,255,.72),0 0 7px color-mix(in srgb,var(--c) 32%,transparent);
  }

  .intro-meta{
    padding-bottom:3px;
  }

  .intro-meta > span{
    font-size:9px !important;
    font-weight:900 !important;
    letter-spacing:.14em !important;
    line-height:1 !important;
  }

  .intro-meta > b,
  .intro-meta #updated{
    margin-top:3px !important;
    font-size:10px !important;
    font-weight:850 !important;
    line-height:1.1 !important;
  }

  body.ink-mode #legend span.active-shift i{
    box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 7px color-mix(in srgb,var(--c) 30%,transparent);
  }
}

/* Desktop — responsive side spacing, matched to header */
  main,
  footer{
    width:calc(100% - clamp(40px, 10vw, 220px));
    max-width:none;
    margin-left:auto;
    margin-right:auto;
  }

@keyframes cctvRedPulsePC{
  0%,100%{background-color:#7f1d1d;}
  50%{background-color:#dc2626;}
}

/* Today button — desktop outer progress outline */
@media(min-width:901px){
  .today-jump{
    --day-remaining:100%;
    position:relative;
    isolation:isolate;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    min-height:36px;
    height:36px;
    margin:0 !important;
    padding:7px 16px !important;
    border:0 !important;
    border-radius:999px !important;
    outline:0 !important;
    background:rgba(255,255,255,.78) !important;
    color:#334155 !important;
    font-size:14px !important;
    font-weight:850 !important;
    letter-spacing:.025em !important;
    line-height:1 !important;
    cursor:pointer !important;
    -webkit-appearance:none;
    appearance:none;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    box-shadow:0 5px 16px rgba(31,41,55,.07) !important;
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease !important;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }

  .today-jump::before{
    content:"";
    position:absolute;
    inset:-3px;
    padding:3px;
    border-radius:inherit;
    pointer-events:none;
    z-index:0;
    background:conic-gradient(
      from -90deg,
      #ef4444 0 var(--day-remaining),
      rgba(239,68,68,.12) var(--day-remaining) 100%
    );
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
  }

  .today-jump::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    z-index:1;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.70);
  }

  .today-jump:hover,
  .today-jump:focus-visible{
    transform:translateY(-1px);
    background:rgba(255,255,255,.86) !important;
    outline:none !important;
    box-shadow:0 7px 18px rgba(31,41,55,.10),0 0 10px rgba(239,68,68,.08) !important;
  }

  .today-jump:active{
    transform:scale(.985) !important;
  }

  body.ink-mode .today-jump{
    background:rgba(17,24,39,.92) !important;
    color:#e2e8f0 !important;
    box-shadow:0 5px 16px rgba(0,0,0,.18) !important;
  }

  body.ink-mode .today-jump::before{
    background:conic-gradient(
      from -90deg,
      #f87171 0 var(--day-remaining),
      rgba(248,113,113,.13) var(--day-remaining) 100%
    );
  }

  body.ink-mode .today-jump:hover,
  body.ink-mode .today-jump:focus-visible{
    background:rgba(17,24,39,.96) !important;
    box-shadow:0 7px 18px rgba(0,0,0,.22),0 0 10px rgba(248,113,113,.08) !important;
  }
}

@media(max-width:900px){
  .today-jump{
    --day-remaining:100%;
    position:relative;
    isolation:isolate;
  }

  .today-jump::after{
    content:"";
    position:absolute;
    inset:-2px;
    padding:1px;
    border-radius:inherit;
    pointer-events:none;
    z-index:0;
    background:conic-gradient(
      from -90deg,
      #ef4444 0 var(--day-remaining),
      rgba(239,68,68,.13) var(--day-remaining) 100%
    );
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
  }

  .today-jump{
    min-height:30px;
    height:30px;
    padding:5px 12px !important;
    border-radius:11px !important;
    background:rgba(255,255,255,.72) !important;
    border-color:rgba(239,68,68,.22) !important;
    color:#334155 !important;
    font-size:11px !important;
    font-weight:800 !important;
    box-shadow:0 4px 12px rgba(15,23,42,.07) !important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    overflow:visible !important;
    clip-path:none !important;
    -webkit-clip-path:none !important;
  }

  .today-jump::after{
    inset:-2px;
    padding:1px;
    z-index:0;
    background:conic-gradient(
      from -90deg,
      #ef4444 0 var(--day-remaining),
      rgba(239,68,68,.13) var(--day-remaining) 100%
    );
  }

  .today-jump:active{transform:scale(.97) !important}

  body.ink-mode .today-jump{
    background:#182235 !important;
    border-color:rgba(248,113,113,.20) !important;
    color:#e2e8f0 !important;
    box-shadow:0 4px 12px rgba(0,0,0,.16) !important;
  }
}

/* Desktop — PC interaction polish */
@media (min-width:901px) and (pointer:fine){
  .person-row{
    transition:background-color .18s ease,box-shadow .18s ease;
  }

  .person-row:hover .person,
  .person-row:hover .shift-cell{
    background:rgba(255,255,255,.34);
  }

  .person-row:hover .person{
    box-shadow:inset 3px 0 0 rgba(96,165,250,.42);
  }

  .person-row:hover .shift{
    transform:translateY(-1px);
    box-shadow:0 7px 16px color-mix(in srgb,var(--c) 28%,transparent),inset 0 1px 0 rgba(255,255,255,.48);
  }

  .shift{
    transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
  }

  .day-head{
    transition:background-color .18s ease,transform .18s ease;
  }

  .day-head:hover{
    background:rgba(255,255,255,.55);
  }

  .legend span{
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  }

  .legend span:hover{
    transform:translateY(-1px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 14px rgba(31,41,55,.08);
  }

  #legend span.active-shift{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 5px 14px rgba(31,41,55,.10);
  }

  #legend span.active-shift i{
    animation:desktopActiveDot 2.4s ease-in-out infinite;
  }

  .roster-wrap.is-dragging{
    cursor:grabbing;
    user-select:none;
  }

  .roster-wrap:not(.is-dragging){
    cursor:grab;
  }

  body.ink-mode .person-row:hover .person,
  body.ink-mode .person-row:hover .shift-cell{
    background:rgba(255,255,255,.045);
  }

  body.ink-mode .person-row:hover .person{
    box-shadow:inset 3px 0 0 rgba(96,165,250,.35);
  }

  body.ink-mode .day-head:hover{
    background:rgba(255,255,255,.07);
  }
}

@keyframes desktopActiveDot{
  0%,100%{transform:scale(1);opacity:.82;}
  50%{transform:scale(1.22);opacity:1;}
}

/* Desktop — ChatGPT-inspired neutral workspace theme */
@media (min-width:901px){
  :root{
    --bg:#f7f7f8;
    --panel:#ffffff;
    --panel-soft:#f9f9f9;
    --ink:#2f2f2f;
    --muted:#6b6b6b;
    --line:#e5e5e5;
    --line-strong:#d9d9d9;
    --navy:#202123;
    --accent:#10a37f;
    --accent-ink:#ffffff;
  }

  body:not(.ink-mode){
    background:
      radial-gradient(circle at 14% 12%,rgba(0,0,0,.028),transparent 28%),
      radial-gradient(circle at 84% 76%,rgba(0,0,0,.018),transparent 30%),
      #f7f7f8;
    color:#2f2f2f;
  }

  /* Fine paper-like grain, kept subtle so text stays crisp */
  body::before{
    opacity:.055;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
    background-size:180px 180px;
    mix-blend-mode:multiply;
  }

  .board{
    background:rgba(255,255,255,.94) !important;
    border:1px solid #e5e5e5 !important;
    border-radius:14px !important;
    box-shadow:0 8px 28px rgba(0,0,0,.055),0 1px 2px rgba(0,0,0,.035) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .board-head{
    min-height:68px;
    background:#ffffff !important;
    border-bottom:1px solid #e5e5e5 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }


  .legend{
    gap:7px !important;
  }

  .legend span{
    background:#f7f7f8 !important;
    border:1px solid #e5e5e5 !important;
    color:#6b6b6b !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .legend span:hover{
    background:#eeeeee !important;
    box-shadow:none !important;
    transform:translateY(-1px);
  }

  .legend b{
    color:#2f2f2f !important;
  }

  .legend small{
    color:#7a7a7a !important;
  }

  .legend span.active-shift{
    background:#ececec !important;
    border-color:#d8d8d8 !important;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.025) !important;
  }

  .legend span.active-shift i{
    box-shadow:0 0 0 2px rgba(16,163,127,.12) !important;
  }

  .person-head{
    background:#f7f7f8 !important;
    border-right:1px solid #e5e5e5 !important;
    color:#6b6b6b !important;
    text-shadow:none !important;
  }

  .day-grid{
    background:#f7f7f8 !important;
    border-bottom:1px solid #e5e5e5 !important;
  }

  .day-head{
    background:#f7f7f8 !important;
    border-right:1px solid #e5e5e5 !important;
  }

  .day-head span{
    color:#777 !important;
  }

  .day-head strong{
    color:#2f2f2f !important;
  }

  .day-head:hover{
    background:#eeeeee !important;
  }

  .day-head.is-today,
  .shift-cell.is-today{
    background:#f1f1f1 !important;
  }

  .day-head.is-today .day-head strong{
    color:#2f2f2f !important;
  }

  .day-head em{
    color:#4f4f4f !important;
    background:#e9e9e9 !important;
  }

  .person,
  .shift-cell{
    background:#ffffff !important;
    border-color:#e5e5e5 !important;
  }

  .person-row:hover .person,
  .person-row:hover .shift-cell{
    background:#f7f7f7 !important;
  }

  .person-row:hover .person{
    box-shadow:inset 3px 0 0 rgba(16,163,127,.55) !important;
  }

  .person strong{
    color:#2f2f2f !important;
  }

  .shift{
    border:1px solid color-mix(in srgb,var(--c) 62%,#fff) !important;
    box-shadow:0 3px 8px color-mix(in srgb,var(--c) 12%,transparent) !important;
  }

  .shift:hover{
    filter:brightness(.985);
  }

  .intro p,
  .intro-meta b{
    color:#6b6b6b !important;
  }

  .kicker,
  .intro-meta > span{
    color:#8a8a8a !important;
  }

  .today-jump{
    background:#ffffff !important;
    color:#2f2f2f !important;
    border-color:#e5e5e5 !important;
    box-shadow:0 3px 10px rgba(0,0,0,.045) !important;
  }

  .today-jump::before{
    background:conic-gradient(
      from -90deg,
      #10a37f 0 var(--day-remaining),
      #e8e8e8 var(--day-remaining) 100%
    ) !important;
  }

  .today-jump:hover,
  .today-jump:focus-visible{
    background:#f7f7f7 !important;
    box-shadow:0 5px 14px rgba(0,0,0,.07) !important;
  }

  footer{
    color:#8a8a8a !important;
  }

  /* Keep the ink-mode theme structurally similar, but use the same restrained UI language */
  body.ink-mode{
    background:#171717 !important;
  }

  body.ink-mode::before{
    opacity:.075;
    mix-blend-mode:screen;
  }

  body.ink-mode .board{
    background:#212121 !important;
    border-color:#343434 !important;
    box-shadow:0 10px 30px rgba(0,0,0,.25) !important;
  }

  body.ink-mode .board-head,
  body.ink-mode .person,
  body.ink-mode .shift-cell{
    background:#212121 !important;
  }

  body.ink-mode .day-grid,
  body.ink-mode .person-head,
  body.ink-mode .day-head{
    background:#1b1b1b !important;
    border-color:#343434 !important;
  }

  body.ink-mode .day-head span,
  body.ink-mode .kicker,
  body.ink-mode .intro-meta > span{
    color:#9b9b9b !important;
  }

  body.ink-mode .day-head strong,
  body.ink-mode .person strong{
    color:#ececec !important;
  }

  body.ink-mode .day-head.is-today,
  body.ink-mode .shift-cell.is-today{
    background:#292929 !important;
  }

  body.ink-mode .legend span{
    background:#2a2a2a !important;
    border-color:#3a3a3a !important;
  }

  body.ink-mode .legend b{
    color:#ececec !important;
  }

  body.ink-mode .legend small,
  body.ink-mode .intro p,
  body.ink-mode .intro-meta b{
    color:#a0a0a0 !important;
  }

  body.ink-mode .legend span.active-shift{
    background:#333333 !important;
    border-color:#444 !important;
  }

  body.ink-mode .today-jump{
    background:#2a2a2a !important;
    color:#ececec !important;
    border-color:#3a3a3a !important;
  }

  body.ink-mode .today-jump::before{
    background:conic-gradient(
      from -90deg,
      #19c37d 0 var(--day-remaining),
      #414141 var(--day-remaining) 100%
    ) !important;
  }
}

/* Desktop — slightly thicker scrollbar for easier PC scrolling */
@media (min-width:901px){
  .roster-wrap{
    scrollbar-width:auto;
    scrollbar-color:#b8b8b8 #ededed;
  }

  .roster-wrap::-webkit-scrollbar{
    height:12px;
  }

  .roster-wrap::-webkit-scrollbar-track{
    background:#ededed;
    border-radius:999px;
  }

  .roster-wrap::-webkit-scrollbar-thumb{
    background:#b8b8b8;
    border:3px solid #ededed;
    border-radius:999px;
  }

  .roster-wrap::-webkit-scrollbar-thumb:hover{
    background:#999;
  }

  body.ink-mode .roster-wrap{
    scrollbar-color:#666 #2a2a2a;
  }

  body.ink-mode .roster-wrap::-webkit-scrollbar-track{
    background:#2a2a2a;
  }

  body.ink-mode .roster-wrap::-webkit-scrollbar-thumb{
    background:#666;
    border-color:#2a2a2a;
  }

  body.ink-mode .roster-wrap::-webkit-scrollbar-thumb:hover{
    background:#777;
  }
}

/* Desktop — B shift soft sage tone */
@media (min-width:901px){
  .shift-b{
    --c:#8FAF9A !important;
  }
}

/* Mobile — ChatGPT-inspired neutral workspace theme */
@media (max-width:900px){
  :root{
    --bg:#f7f7f8;
    --panel:#ffffff;
    --panel-soft:#f9f9f9;
    --ink:#2f2f2f;
    --muted:#6b6b6b;
    --line:#e5e5e5;
    --line-strong:#d9d9d9;
    --navy:#202123;
    --accent:#10a37f;
    --accent-ink:#ffffff;
  }

  body:not(.ink-mode){
    background:
      radial-gradient(circle at 12% 10%,rgba(0,0,0,.022),transparent 30%),
      radial-gradient(circle at 88% 78%,rgba(0,0,0,.015),transparent 32%),
      #f7f7f8;
    color:#2f2f2f;
  }

  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
    background-size:180px 180px;
    mix-blend-mode:multiply;
  }

  .app{
    position:relative;
    z-index:1;
  }

  .board{
    background:#ffffff !important;
    border:1px solid #e5e5e5 !important;
    border-radius:14px !important;
    box-shadow:0 7px 22px rgba(0,0,0,.05) !important;
  }

  .board-head{
    background:#ffffff !important;
    border-bottom:1px solid #e5e5e5 !important;
  }


  .legend{
    gap:6px !important;
  }

  .legend span{
    background:#f7f7f8 !important;
    border:1px solid #e5e5e5 !important;
    color:#6b6b6b !important;
    box-shadow:none !important;
  }

  .legend span:hover{
    background:#eeeeee !important;
    box-shadow:none !important;
  }

  .legend b{
    color:#2f2f2f !important;
  }

  .legend small{
    color:#7a7a7a !important;
  }

  .legend span.active-shift{
    background:#ececec !important;
    border-color:#d8d8d8 !important;
  }

  .legend span.active-shift i{
    box-shadow:0 0 0 2px rgba(16,163,127,.10) !important;
  }

  .person-head{
    background:#f7f7f8 !important;
    border-right-color:#e5e5e5 !important;
    color:#6b6b6b !important;
    text-shadow:none !important;
  }

  .day-grid{
    background:#f7f7f8 !important;
    border-bottom-color:#e5e5e5 !important;
  }

  .day-head{
    background:#f7f7f8 !important;
    border-right-color:#e5e5e5 !important;
  }

  .day-head span{
    color:#777 !important;
  }

  .day-head strong{
    color:#2f2f2f !important;
  }

  .day-head:hover{
    background:#eeeeee !important;
  }

  .day-head.is-today,
  .shift-cell.is-today{
    background:#f1f1f1 !important;
  }

  .day-head.is-today .day-head strong{
    color:#2f2f2f !important;
  }

  .day-head em{
    color:#4f4f4f !important;
    background:#e9e9e9 !important;
  }

  .person,
  .shift-cell{
    background:#ffffff !important;
    border-color:#e5e5e5 !important;
  }

  .person-row:hover .person,
  .person-row:hover .shift-cell{
    background:#f7f7f7 !important;
  }

  .person strong{
    color:#2f2f2f !important;
  }

  .shift{
    border-color:color-mix(in srgb,var(--c) 62%,#fff) !important;
    box-shadow:0 3px 8px color-mix(in srgb,var(--c) 12%,transparent) !important;
  }

  .intro p,
  .intro-meta b{
    color:#6b6b6b !important;
  }

  .kicker,
  .intro-meta > span{
    color:#8a8a8a !important;
  }

  .today-jump{
    background:#ffffff !important;
    color:#2f2f2f !important;
    border-color:#e5e5e5 !important;
    box-shadow:0 3px 10px rgba(0,0,0,.045) !important;
  }

  .today-jump:hover,
  .today-jump:focus-visible{
    background:#f7f7f7 !important;
    box-shadow:0 5px 14px rgba(0,0,0,.07) !important;
  }

  footer{
    color:#8a8a8a !important;
  }

  body.ink-mode{
    background:#171717 !important;
  }

  body.ink-mode::before{
    opacity:.055;
    mix-blend-mode:screen;
  }

  body.ink-mode .board{
    background:#212121 !important;
    border-color:#343434 !important;
    box-shadow:0 8px 24px rgba(0,0,0,.24) !important;
  }

  body.ink-mode .board-head,
  body.ink-mode .person,
  body.ink-mode .shift-cell{
    background:#212121 !important;
  }

  body.ink-mode .day-grid,
  body.ink-mode .person-head,
  body.ink-mode .day-head{
    background:#1b1b1b !important;
    border-color:#343434 !important;
  }

  body.ink-mode .day-head span,
  body.ink-mode .kicker,
  body.ink-mode .intro-meta > span{
    color:#9b9b9b !important;
  }

  body.ink-mode .day-head strong,
  body.ink-mode .person strong{
    color:#ececec !important;
  }

  body.ink-mode .day-head.is-today,
  body.ink-mode .shift-cell.is-today{
    background:#292929 !important;
  }

  body.ink-mode .legend span{
    background:#2a2a2a !important;
    border-color:#3a3a3a !important;
  }

  body.ink-mode .legend b{
    color:#ececec !important;
  }

  body.ink-mode .legend small,
  body.ink-mode .intro p,
  body.ink-mode .intro-meta b{
    color:#a0a0a0 !important;
  }

  body.ink-mode .legend span.active-shift{
    background:#333333 !important;
    border-color:#444 !important;
  }

  body.ink-mode .today-jump{
    background:#2a2a2a !important;
    color:#ececec !important;
    border-color:#3a3a3a !important;
  }
}

/* Shift palette — time-based colors, shared by desktop and mobile */
.shift.shift-a{--c:#1D4ED8 !important;color:#fff !important;}
.shift.shift-b{--c:#C85A0A !important;color:#fff !important;}
.shift.shift-c{--c:#B91C1C !important;color:#fff !important;}
.shift.shift-off{--c:#475569 !important;color:#B91C1C !important;}
.shift.shift-l{--c:#6D28D9 !important;color:#fff !important;}

.picker .shift-a{background:linear-gradient(145deg,rgba(200,90,10,.28),rgba(255,229,205,.92));color:#7A2F00;border-color:rgba(216,151,60,.88);}
.picker .shift-b{background:linear-gradient(145deg,rgba(185,28,28,.28),rgba(255,220,220,.92));color:#7F1D1D;border-color:rgba(185,28,28,.88);}
.picker .shift-c{background:linear-gradient(145deg,rgba(71,85,105,.34),rgba(226,232,240,.92));color:#334155;border-color:rgba(71,85,105,.88);}
.picker .shift-off{background:linear-gradient(145deg,rgba(71,85,105,.30),rgba(226,232,240,.92));color:#334155;border-color:rgba(71,85,105,.88);}
.picker .shift-l{background:linear-gradient(145deg,rgba(109,40,217,.25),rgba(237,233,254,.92));color:#5B21B6;border-color:rgba(109,40,217,.88);}

body.ink-mode .picker .shift-a{background:linear-gradient(145deg,rgba(216,151,60,.30),rgba(102,76,35,.46));color:#f7d18e;}
body.ink-mode .picker .shift-b{background:linear-gradient(145deg,rgba(189,99,47,.30),rgba(99,52,34,.48));color:#f0b59a;}
body.ink-mode .picker .shift-c{background:linear-gradient(145deg,rgba(39,62,71,.62),rgba(64,86,96,.48));color:#d7e3e8;}
body.ink-mode .picker .shift-off{background:linear-gradient(145deg,rgba(216,201,155,.28),rgba(88,80,51,.42));color:#eee2b9;}
body.ink-mode .picker .shift-l{background:linear-gradient(145deg,rgba(164,36,59,.30),rgba(91,31,45,.48));color:#f2a9b9;}

/* Mobile — final edge spacing (consolidated) */
@media (max-width:900px){
  main{
    width:100% !important;
    max-width:none !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .board{
    width:calc(100% - 10px) !important;
    max-width:none !important;
    margin-left:5px !important;
    margin-right:5px !important;
    box-sizing:border-box !important;
    border-radius:0 !important;
  }
  .legend{column-gap:5px !important;}
}

/* Mobile — today/updated edge balance */
@media (max-width:900px){
  .intro{
    width:calc(100% - 10px) !important;
    margin-left:5px !important;
    margin-right:5px !important;
  }
  .intro-meta{
    width:100% !important;
  }
}

/* Mobile — today/updated edge balance: 8px */
@media (max-width:900px){
  .intro{
    width:calc(100% - 16px) !important;
    margin-left:8px !important;
    margin-right:8px !important;
  }
}

/* Final palette — Soft Pastel Shift Colors */
.shift.shift-a{
  --c:#F6B6AD !important;
  color:#17202A !important;
  border-color:#E39B91 !important;
}
.shift.shift-b{
  --c:#F8DE7E !important;
  color:#17202A !important;
  border-color:#D6B94F !important;
}
.shift.shift-c{
  --c:#A9D8E9 !important;
  color:#17202A !important;
  border-color:#7BB8CF !important;
}
.shift.shift-off{
  --c:#B7E4C7 !important;
  color:#17202A !important;
  border-color:#8FD0A4 !important;
}
.shift.shift-l{
  --c:#D8C8EA !important;
  color:#17202A !important;
  border-color:#B9A8D2 !important;
}

.picker .shift-a{background:#F6B6AD !important;color:#17202A !important;border-color:#E39B91 !important;}
.picker .shift-b{background:#F8DE7E !important;color:#17202A !important;border-color:#D6B94F !important;}
.picker .shift-c{background:#A9D8E9 !important;color:#17202A !important;border-color:#7BB8CF !important;}
.picker .shift-off{background:#B7E4C7 !important;color:#17202A !important;border-color:#8FD0A4 !important;}
.picker .shift-l{background:#D8C8EA !important;color:#17202A !important;border-color:#B9A8D2 !important;}

.shift{
  box-shadow:0 3px 10px rgba(31,41,55,.10),inset 0 1px 0 rgba(255,255,255,.58) !important;
}

body.ink-mode .shift.shift-a{--c:#F6B6AD !important;color:#17202A !important;border-color:#E39B91 !important;}
body.ink-mode .shift.shift-b{--c:#F8DE7E !important;color:#17202A !important;border-color:#D6B94F !important;}
body.ink-mode .shift.shift-c{--c:#A9D8E9 !important;color:#17202A !important;border-color:#7BB8CF !important;}
body.ink-mode .shift.shift-off{--c:#B7E4C7 !important;color:#17202A !important;border-color:#8FD0A4 !important;}
body.ink-mode .shift.shift-l{--c:#D8C8EA !important;color:#17202A !important;border-color:#B9A8D2 !important;}

body.ink-mode .picker .shift-a{background:#F6B6AD !important;color:#17202A !important;border-color:#E39B91 !important;}
body.ink-mode .picker .shift-b{background:#F8DE7E !important;color:#17202A !important;border-color:#D6B94F !important;}
body.ink-mode .picker .shift-c{background:#A9D8E9 !important;color:#17202A !important;border-color:#7BB8CF !important;}
body.ink-mode .picker .shift-off{background:#B7E4C7 !important;color:#17202A !important;border-color:#8FD0A4 !important;}
body.ink-mode .picker .shift-l{background:#D8C8EA !important;color:#17202A !important;border-color:#B9A8D2 !important;}

/* Legend — text-only with shift color squares */
.legend span.shift-a,
.legend span.shift-b,
.legend span.shift-c,
.legend span.shift-off,
.legend span.shift-l{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:var(--ink) !important;
  padding:2px 3px !important;
  border-radius:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.legend span.shift-a i,
.legend span.shift-b i,
.legend span.shift-c i,
.legend span.shift-off i,
.legend span.shift-l i{
  width:9px !important;
  height:9px !important;
  min-width:9px !important;
  min-height:9px !important;
  flex:0 0 9px !important;
  border-radius:2px !important;
  display:inline-block !important;
  box-shadow:inset 0 0 0 1px rgba(23,32,42,.16),0 1px 3px rgba(31,41,55,.08) !important;
}

.legend span.shift-a i{background:#F6B6AD !important;}
.legend span.shift-b i{background:#F8DE7E !important;}
.legend span.shift-c i{background:#A9D8E9 !important;}
.legend span.shift-off i{background:#B7E4C7 !important;}
.legend span.shift-l i{background:#D8C8EA !important;}

body.ink-mode .legend span.shift-a,
body.ink-mode .legend span.shift-b,
body.ink-mode .legend span.shift-c,
body.ink-mode .legend span.shift-off,
body.ink-mode .legend span.shift-l{
  color:#17202A !important;
}

/* Active legend shift — subtle time-aware emphasis */
.legend span.active-shift b{
  font-size:10px !important;
  font-weight:950 !important;
  color:#17202A !important;
}

@media(max-width:520px){
  .legend span.active-shift b{
    font-size:8px !important;
    font-weight:950 !important;
  }
}

body.ink-mode .legend span.active-shift b{
  color:#17202A !important;
}

/* Subtle background grain — lightweight and mobile-friendly */
body:not(.ink-mode)::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='1' seed='17'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  background-size:160px 160px;
  opacity:.045;
}

@media(max-width:900px){
  body:not(.ink-mode)::before{
    background-size:140px 140px;
    opacity:.032;
  }
}

@media(prefers-reduced-motion:reduce){
  body:not(.ink-mode)::before{
    opacity:.028;
  }
}

/* Final theme warmth — soft warm-neutral cast for visual comfort */
body:not(.ink-mode){
  background:#FAF7F4 !important;
  color:#2B2927 !important;
}

html body:not(.ink-mode) .board{
  background:#F9EEE8 !important;
  border-color:#E2D7D1 !important;
  box-shadow:
    0 10px 28px rgba(70,48,40,.07),
    inset 0 1px 0 rgba(255,255,255,.82) !important;
}

body:not(.ink-mode) .board-head{
  background:#F9EEE8 !important;
  border-bottom-color:#E2D7D1 !important;
}

body:not(.ink-mode) .day-grid,
body:not(.ink-mode) .person-head,
body:not(.ink-mode) .day-head{
  background:#F2EFEC !important;
}

body:not(.ink-mode) .person,
body:not(.ink-mode) .shift-cell{
  background:#FFFCF9 !important;
  border-color:#DED8D3 !important;
}

body:not(.ink-mode) .day-head{
  border-right-color:#DED8D3 !important;
}

body:not(.ink-mode) .day-head.is-today,
body:not(.ink-mode) .shift-cell.is-today{
  background:#F8F0EA !important;
}

body:not(.ink-mode) .day-head.is-today .day-head strong{
  color:#684B45 !important;
}

body:not(.ink-mode) .day-head em{
  color:#76514A !important;
  background:#F1DDD7 !important;
}

body:not(.ink-mode) .legend small,
body:not(.ink-mode) .intro p,
body:not(.ink-mode) .intro-meta b,
body:not(.ink-mode) .kicker,
body:not(.ink-mode) .intro-meta span{
  color:#776E69 !important;
}

body:not(.ink-mode) .legend b,
body:not(.ink-mode) .day-head strong,
body:not(.ink-mode) .person strong{
  color:#2B2927 !important;
}

body:not(.ink-mode) .today-jump{
  color:#3A302D !important;
  border-color:#D8D0CB !important;
  background:#F7F2EF !important;
}

body:not(.ink-mode) .today-jump::before{
  background:conic-gradient(from -90deg,#C97B70 0 var(--day-remaining),#E4DDD8 var(--day-remaining) 100%) !important;
}

body.ink-mode{
  --bg:#4B4641 !important;
  --panel:#625C56 !important;
  --panel-soft:#59534D !important;
  --ink:#FFF6EF !important;
  --muted:#D8CBC1 !important;
  --line:#7A726A !important;
  --line-strong:#8E837A !important;
  background:
    radial-gradient(circle at 12% 8%,rgba(201,123,112,.10),transparent 28%),
    radial-gradient(circle at 88% 14%,rgba(217,151,60,.06),transparent 25%),
    #4B4641 !important;
}

body.ink-mode .board{
  background:#625C56 !important;
  border-color:#7D756D !important;
  box-shadow:
    0 18px 50px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,244,238,.06) !important;
}

body.ink-mode .board-head,
body.ink-mode .person,
body.ink-mode .shift-cell{
  background:#625C56 !important;
}

body.ink-mode .day-grid,
body.ink-mode .person-head,
body.ink-mode .day-head{
  background:#59534D !important;
  border-color:#7A726A !important;
}

body.ink-mode .day-head.is-today,
body.ink-mode .shift-cell.is-today{
  background:#2F2925 !important;
}

body.ink-mode .day-head.is-today .day-head strong{
  color:#FFF6EF !important;
}

body.ink-mode .day-head em{
  color:#E6D2CC !important;
  background:#46352F !important;
}

body.ink-mode .legend span{
  background:transparent !important;
  border:0 !important;
}

body.ink-mode .legend b,
body.ink-mode .day-head strong,
body.ink-mode .person strong{
  color:#FFF8F2 !important;
}

body.ink-mode .legend small,
body.ink-mode .intro p,
body.ink-mode .intro-meta b,
body.ink-mode .kicker,
body.ink-mode .intro-meta span{
  color:#B9AEA4 !important;
}

body.ink-mode .today-jump{
  background:#68615A !important;
  color:#FFF8F2 !important;
  border-color:#887D74 !important;
}

body.ink-mode .today-jump::before{
  background:conic-gradient(from -90deg,#C97B70 0 var(--day-remaining),#81786F var(--day-remaining) 100%) !important;
}

@media(max-width:900px){
  body:not(.ink-mode){background:#F8F2E7 !important;}
  body:not(.ink-mode) .day-grid,
  body:not(.ink-mode) .person-head,
  body:not(.ink-mode) .day-head{background:#F2EFEC !important;}
  body:not(.ink-mode) .person,
  body:not(.ink-mode) .shift-cell{background:#FFFCF9 !important;}
  body:not(.ink-mode) .day-head.is-today,
  body:not(.ink-mode) .shift-cell.is-today{background:#F8F0EA !important;}
  body:not(.ink-mode) .legend span{background:#F7F2EF !important;border-color:#DED8D3 !important;}
}

/* Final light polish — lighter board + clean legend squares */
html body:not(.ink-mode) .board,
html body:not(.ink-mode) .board-head{
  background:#FCF6F2 !important;
}

html body:not(.ink-mode) .legend span.shift-a,
html body:not(.ink-mode) .legend span.shift-b,
html body:not(.ink-mode) .legend span.shift-c,
html body:not(.ink-mode) .legend span.shift-off,
html body:not(.ink-mode) .legend span.shift-l,
html body.ink-mode .legend span.shift-a,
html body.ink-mode .legend span.shift-b,
html body.ink-mode .legend span.shift-c,
html body.ink-mode .legend span.shift-off,
html body.ink-mode .legend span.shift-l{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}

html body:not(.ink-mode) .legend span.shift-a i,
html body:not(.ink-mode) .legend span.shift-b i,
html body:not(.ink-mode) .legend span.shift-c i,
html body:not(.ink-mode) .legend span.shift-off i,
html body:not(.ink-mode) .legend span.shift-l i,
html body.ink-mode .legend span.shift-a i,
html body.ink-mode .legend span.shift-b i,
html body.ink-mode .legend span.shift-c i,
html body.ink-mode .legend span.shift-off i,
html body.ink-mode .legend span.shift-l i{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

@media(max-width:900px){
  html body:not(.ink-mode) .legend span.shift-a,
  html body:not(.ink-mode) .legend span.shift-b,
  html body:not(.ink-mode) .legend span.shift-c,
  html body:not(.ink-mode) .legend span.shift-off,
  html body:not(.ink-mode) .legend span.shift-l{
    background:transparent !important;
    border:0 !important;
  }
}

/* Final board background color */
html body:not(.ink-mode) .board,
html body:not(.ink-mode) .board-head{
  background:#FFF8F4 !important;
}

/* Final roster board corner radius */
html body:not(.ink-mode) .board,
html body:not(.ink-mode) .board-head,
html body.ink-mode .board,
html body.ink-mode .board-head{
  border-radius:2px !important;
}

/* Match shift-cell white with the roster board tone */
html body:not(.ink-mode) .shift-cell{
  background:#FFF8F4 !important;
}

/* Today column — clear highlight + protected header space for “আজ” */
.day-head.is-today{
  padding-top:22px !important;
  padding-bottom:8px !important;
  box-shadow:inset 1.5px 0 0 #C97B70, inset -1.5px 0 0 #C97B70 !important;
  z-index:1;
}

.day-head.is-today em{
  top:5px !important;
  right:6px !important;
  z-index:3 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

.shift-cell.is-today{
  box-shadow:inset 1.5px 0 0 rgba(201,123,112,.72), inset -1.5px 0 0 rgba(201,123,112,.72) !important;
}

body.ink-mode .day-head.is-today{
  box-shadow:inset 1.5px 0 0 #C97B70, inset -1.5px 0 0 #C97B70 !important;
}

body.ink-mode .shift-cell.is-today{
  box-shadow:inset 1.5px 0 0 rgba(201,123,112,.78), inset -1.5px 0 0 rgba(201,123,112,.78) !important;
}

@media(max-width:520px){
  .day-head.is-today{
    padding-top:18px !important;
    padding-bottom:7px !important;
  }
  .day-head.is-today em{
    top:4px !important;
    right:4px !important;
  }
}

/* Today column — stronger warm glass highlight */
html body:not(.ink-mode) .day-head.is-today,
html body:not(.ink-mode) .shift-cell.is-today{
  background:rgba(255,225,214,.62) !important;
  -webkit-backdrop-filter:blur(7px) saturate(115%);
  backdrop-filter:blur(7px) saturate(115%);
}

html body:not(.ink-mode) .day-head.is-today{
  border-top:1px solid rgba(201,123,112,.38) !important;
  border-bottom:1px solid rgba(201,123,112,.28) !important;
  box-shadow:
    inset 2px 0 0 rgba(201,123,112,.9),
    inset -2px 0 0 rgba(201,123,112,.9),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(255,255,255,.34) !important;
}

html body:not(.ink-mode) .shift-cell.is-today{
  box-shadow:
    inset 2px 0 0 rgba(201,123,112,.72),
    inset -2px 0 0 rgba(201,123,112,.72),
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(201,123,112,.08) !important;
}

html body:not(.ink-mode) .day-head.is-today em{
  background:rgba(255,255,255,.48) !important;
  border:1px solid rgba(201,123,112,.34) !important;
  box-shadow:0 2px 8px rgba(139,74,63,.12), inset 0 1px 0 rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

html body.ink-mode .day-head.is-today,
html body.ink-mode .shift-cell.is-today{
  background:rgba(111,69,58,.30) !important;
  -webkit-backdrop-filter:blur(7px) saturate(115%);
  backdrop-filter:blur(7px) saturate(115%);
}

html body.ink-mode .day-head.is-today{
  box-shadow:
    inset 2px 0 0 rgba(201,123,112,.95),
    inset -2px 0 0 rgba(201,123,112,.95),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

html body.ink-mode .shift-cell.is-today{
  box-shadow:
    inset 2px 0 0 rgba(201,123,112,.78),
    inset -2px 0 0 rgba(201,123,112,.78),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Lightweight shift-cell touch feedback — scroll-first */
.shift-cell{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:transform 120ms ease-out, filter 120ms ease-out, opacity 120ms ease-out !important;
}

.shift-cell:active{
  transform:scale(.985) !important;
  filter:brightness(.97) saturate(1.03) !important;
  opacity:.96 !important;
}

@media (hover:hover) and (pointer:fine){
  .shift-cell:hover{
    filter:brightness(.985) saturate(1.02) !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .shift-cell{
    transition:none !important;
  }
  .shift-cell:active{
    transform:none !important;
  }
}

/* Live duty indicator — color-only breathing dot, no glow */
.name-active-dot{
  width:6px !important;
  height:6px !important;
  min-width:6px !important;
  min-height:6px !important;
  flex:0 0 6px !important;
  background:var(--status-color,#64748b) !important;
  box-shadow:none !important;
  filter:none !important;
  transform-origin:center !important;
  animation:liveDutyDot 4s ease-in-out infinite !important;
}

@keyframes liveDutyDot{
  0%,100%{
    transform:scale(.8333);
  }
  50%{
    transform:scale(1.33);
  }
}

@media (prefers-reduced-motion:reduce){
  .name-active-dot{
    animation:none !important;
    transform:scale(1) !important;
  }
}

/* Touch devices — cell-only feedback; never highlight the whole roster row */
@media (hover:none), (pointer:coarse){
  .person-row:hover .person,
  .person-row:hover .shift-cell{
    background:#FFF8F4 !important;
    box-shadow:none !important;
  }

  body.ink-mode .person-row:hover .person,
  body.ink-mode .person-row:hover .shift-cell{
    background:#625C56 !important;
    box-shadow:none !important;
  }

  /* Preserve the existing Today-column highlight on touch */
  html body:not(.ink-mode) .person-row:hover .shift-cell.is-today{
    background:rgba(255,225,214,.62) !important;
    box-shadow:
      inset 2px 0 0 rgba(201,123,112,.72),
      inset -2px 0 0 rgba(201,123,112,.72),
      inset 0 1px 0 rgba(255,255,255,.38),
      inset 0 -1px 0 rgba(201,123,112,.08) !important;
  }

  html body.ink-mode .person-row:hover .shift-cell.is-today{
    background:rgba(111,69,58,.30) !important;
    box-shadow:
      inset 2px 0 0 rgba(201,123,112,.78),
      inset -2px 0 0 rgba(201,123,112,.78),
      inset 0 1px 0 rgba(255,255,255,.06) !important;
  }
}

/* Header — light warm-neutral theme */
.topbar{
  height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 max(14px,calc((100vw - 1440px)/2));
  background:#D4D4D4;
  color:#2B2927;
  border-bottom:1px solid #B8B0AA;
  box-shadow:0 7px 22px rgba(51,88,110,.10);
  position:relative;
  z-index:5;
}
.brand{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}
.brand-mark{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:7px;
  color:#fff;
  font-size:15px;
  font-weight:1000;
  line-height:1;
  animation:cctvRedSwitch 5s ease-in-out infinite;
}
.brand-copy{min-width:0}
.brand-copy strong{
  display:block;
  font-size:12px;
  font-weight:850;
  letter-spacing:.02em;
  white-space:nowrap;
  color:#2B2927;
}
.top-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
.status-live{
  display:flex;
  align-items:center;
  gap:6px;
  color:#665E59;
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
}
.status-live i{
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:#7DB84A;
  box-shadow:0 0 0 4px rgba(125,184,74,.10);
}
.icon-btn,.admin-link{
  position:relative;
  isolation:isolate;
  border:1px solid #D5CAC3;
  border-radius:4px;
  background:#FBF6F2;
  color:#403A36;
  min-height:30px;
  padding:6px 9px;
  cursor:pointer;
  font-size:11px;
  box-shadow:0 2px 7px rgba(70,48,40,.05);
}
.icon-btn::after,.admin-link::after{
  content:"";
  position:absolute;
  inset:-2px;
  border:1px solid rgba(94,82,74,.20);
  border-radius:6px;
  pointer-events:none;
}
.icon-btn{width:30px;padding:0;font-size:15px}
.admin-link{font-weight:800}
.icon-btn#theme{
  overflow:visible;
}
.icon-btn#theme:focus-visible,
.admin-link:focus-visible{
  outline:2px solid rgba(201,123,112,.42);
  outline-offset:2px;
}

/* Header C color is independent from ink-mode mode and shift colors */
@keyframes cctvRedSwitch{
  0%,100%{background-color:#C9433B}
  50%{background-color:#FF2B1A}
}

/* Mobile header */
@media(max-width:900px){
  .topbar{
    height:44px;
    padding:0 12px;
    background:#D4D4D4;
    border:0;
    border-bottom:1px solid #B8B0AA;
    border-radius:0;
    box-shadow:0 4px 14px rgba(70,48,40,.08);
    overflow:hidden;
  }
  .brand{gap:8px}
  .brand-mark{
    width:28px;
    height:28px;
    flex:0 0 28px;
    border-radius:2px;
    font-size:14px;
    font-weight:1000;
  }
  .brand-copy strong{
    font-size:12px;
    line-height:1;
    letter-spacing:.045em;
    color:#2B2927;
  }
  .top-actions{gap:6px;margin-left:8px}
  .status-live{display:none}
  .admin-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:0 8px;
    border-radius:4px;
    border:1px solid #D7CCC5;
    background:#FBF6F2;
    color:#514944;
    font-size:9px;
    font-weight:850;
    letter-spacing:.025em;
    line-height:1;
    white-space:nowrap;
  }
  .icon-btn#theme{
    width:30px;
    min-height:30px;
    border-radius:4px;
    border:1px solid #D7CCC5;
    background:#FBF6F2;
    color:#4B433E;
    font-size:15px;
    line-height:1;
  }
  .icon-btn#theme.theme-clicked{
    transform:scale(1.06);
    box-shadow:0 0 0 1px rgba(201,123,112,.10),0 0 15px rgba(201,123,112,.18),0 4px 12px rgba(70,48,40,.10);
  }
  .icon-btn#theme.theme-clicked::before{
    content:"";
    position:absolute;
    inset:-5px;
    border:1px solid rgba(201,123,112,.24);
    border-radius:7px;
    transform:scale(1);
    opacity:1;
    pointer-events:none;
  }
  .icon-btn#theme:active{transform:scale(.94)}
  body.ink-mode .topbar{
    background:#59534D;
    border-bottom-color:#706860;
    box-shadow:0 5px 18px rgba(0,0,0,.22);
  }
  body.ink-mode .brand-copy strong{color:#FFF8F2}
  body.ink-mode .admin-link{
    background:#6B645D;
    color:#F8EEE7;
    border-color:#80776F;
  }
  body.ink-mode .admin-link::after,
  body.ink-mode .icon-btn::after{
    border-color:rgba(232,223,217,.16);
  }
  body.ink-mode .icon-btn#theme{
    background:#6B645D;
    color:#F8EEE7;
    border-color:#80776F;
  }
  body.ink-mode .status-live{color:#D9CCC2}
}


/* Eye-comfort warm theme — balanced contrast, soft neutral warmth */
html body:not(.ink-mode){
  background:#F7F3EE !important;
  color:#332F2C !important;
}

html body:not(.ink-mode) .board,
html body:not(.ink-mode) .board-head{
  background:#FCF8F4 !important;
  border-color:#E4DCD5 !important;
}

html body:not(.ink-mode) .day-grid,
html body:not(.ink-mode) .person-head,
html body:not(.ink-mode) .day-head{
  background:#F0ECE7 !important;
}

html body:not(.ink-mode) .person,
html body:not(.ink-mode) .shift-cell{
  background:#FCF8F4 !important;
  border-color:#E1DAD4 !important;
}

html body:not(.ink-mode) .day-head.is-today,
html body:not(.ink-mode) .shift-cell.is-today{
  background:rgba(255,224,211,.48) !important;
}

html body:not(.ink-mode) .legend b,
html body:not(.ink-mode) .day-head strong,
html body:not(.ink-mode) .person strong{
  color:#332F2C !important;
}

html body:not(.ink-mode) .legend small,
html body:not(.ink-mode) .intro p,
html body:not(.ink-mode) .intro-meta b,
html body:not(.ink-mode) .kicker,
html body:not(.ink-mode) .intro-meta span{
  color:#766D67 !important;
}

html body:not(.ink-mode) .today-jump{
  background:#F8F4F0 !important;
  border-color:#DDD4CD !important;
  color:#403934 !important;
}

html body.ink-mode{
  --bg:#4B4641 !important;
  --panel:#625C56 !important;
  --panel-soft:#59534D !important;
  --ink:#FFF6EF !important;
  --muted:#D8CBC1 !important;
  --line:#7A726A !important;
  --line-strong:#8E837A !important;
  background:#4B4641 !important;
}

html body.ink-mode .board{
  background:#625C56 !important;
  border-color:#7D756D !important;
  box-shadow:0 18px 50px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,244,238,.055) !important;
}

html body.ink-mode .board-head,
html body.ink-mode .person,
html body.ink-mode .shift-cell{
  background:#5D5751 !important;
}

html body.ink-mode .day-grid,
html body.ink-mode .person-head,
html body.ink-mode .day-head{
  background:#59534D !important;
  border-color:#7A726A !important;
}

html body.ink-mode .day-head.is-today,
html body.ink-mode .shift-cell.is-today{
  background:rgba(118,82,68,.24) !important;
}

html body.ink-mode .legend b,
html body.ink-mode .day-head strong,
html body.ink-mode .person strong{
  color:#FFF6EF !important;
}

html body.ink-mode .legend small,
html body.ink-mode .intro p,
html body.ink-mode .intro-meta b,
html body.ink-mode .kicker,
html body.ink-mode .intro-meta span{
  color:#D8CBC1 !important;
}

html body.ink-mode .today-jump{
  background:#68615A !important;
  color:#FFF7F0 !important;
  border-color:#887D74 !important;
}

/* Keep shift colors and header CCTV red independent from the warm theme. */


/* Admin live-roster navigation */
.back{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:6px 10px;
  border:1px solid #D5CAC3;
  border-radius:4px;
  background:#FBF6F2;
  color:#403A36;
  font-size:11px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 2px 7px rgba(70,48,40,.05);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.back::after{
  content:"";
  position:absolute;
  inset:-2px;
  border:1px solid rgba(94,82,74,.20);
  border-radius:6px;
  pointer-events:none;
}
.back:hover{transform:translateY(-1px);box-shadow:0 3px 9px rgba(70,48,40,.09)}
.back:active{transform:scale(.97)}
.back:focus-visible{outline:2px solid rgba(201,123,112,.42);outline-offset:2px}
body.ink-mode .back{background:#6B645D;color:#F8EEE7;border-color:#80776F}
body.ink-mode .back::after{border-color:rgba(232,223,217,.16)}
@media(max-width:900px){
  .back{min-height:28px;padding:0 8px;border-radius:4px;font-size:9px;letter-spacing:.025em}
}


/* Admin panel — visual polish only; functionality unchanged */
.admin-note,
.panel{
  border-radius:14px;
  border-color:#E1D9D2;
  background:#FFFCF9;
  box-shadow:0 8px 24px rgba(70,48,40,.055),inset 0 1px 0 rgba(255,255,255,.8);
}
.admin-note{
  border-left:3px solid #C97B70;
  background:#FBF4F0;
}
.section-head{margin-bottom:14px}
.eyebrow{
  color:#8A7D76;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
}
.section-head h2{color:#332F2C;letter-spacing:-.02em}
.form-grid label,.form-row label{color:#756A64}
input{
  border-color:#DCD3CC;
  border-radius:7px;
  background:#F8F4F0;
  box-shadow:inset 0 1px 2px rgba(70,48,40,.035);
  transition:border-color .14s ease,box-shadow .14s ease,background .14s ease;
}
input:hover{border-color:#CFC3BB}
input:focus{
  outline:2px solid rgba(201,123,112,.16);
  border-color:#C97B70;
  background:#FFFCF9;
  box-shadow:0 0 0 1px rgba(201,123,112,.08);
}
.primary,.actions button,.form-row button{
  border-color:#D8CEC7;
  border-radius:7px;
  background:#F8F3EF;
  color:#433B37;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease,border-color .12s ease;
}
.primary{
  border-color:#C97B70;
  background:#C97B70;
  color:#fff;
  box-shadow:0 3px 10px rgba(201,123,112,.18);
}
.primary:hover,.actions button:hover,.form-row button:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(70,48,40,.08)}
.primary:active,.actions button:active,.form-row button:active{transform:scale(.98)}
.status{background:#F7F2EE;border-color:#DDD4CD;color:#756A64}
.grid-scroll{border-color:#DDD5CE;border-radius:10px;box-shadow:inset 0 1px 2px rgba(70,48,40,.025)}
.grid-scroll th{background:#F1ECE7;color:#4B433E}
.grid-scroll th,.grid-scroll td{border-color:#E0D9D3}
.grid-scroll input{background:#FBF8F5}
.edit{
  border-color:#D7CDC6;
  border-radius:6px;
  background:#F7F2EE;
  color:#433B37;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.edit:hover{background:#FFF9F5}
.remove{color:#B24A42}
.editor-meta{border-color:#DDD4CD;border-radius:9px;background:#F7F2EE}
.change-summary{border-color:rgba(201,123,112,.25);background:rgba(201,123,112,.07)}

/* Admin header: visually matches the live board without altering controls */
.topbar .brand-icon{
  width:30px;height:30px;display:grid;place-items:center;flex:0 0 30px;
  border-radius:6px;background:#C97B70;color:#fff;font-size:15px;line-height:1;
  box-shadow:0 3px 9px rgba(70,48,40,.10);
}
.topbar .brand > div strong{color:#332F2C;font-size:12px;font-weight:900;letter-spacing:.015em}
.topbar .brand > div small{display:block;margin-top:1px;color:#756A64;font-size:8px;font-weight:700;letter-spacing:.025em}
body:not(.ink-mode) .topbar .back{background:#FBF6F2;color:#403A36;border-color:#D5CAC3}
body.ink-mode .topbar{background:#59534D;border-bottom-color:#706860;color:#FFF7F0;box-shadow:0 5px 18px rgba(0,0,0,.22)}
body.ink-mode .topbar .brand > div strong{color:#FFF8F2}
body.ink-mode .topbar .brand > div small{color:#D2C4BA}
body.ink-mode .topbar .brand-icon{background:#9D5F58;color:#FFF5F1;box-shadow:none}
body.ink-mode .topbar .icon-btn{background:#6B645D;color:#F8EEE7;border-color:#80776F}
body.ink-mode .topbar .back{background:#6B645D;color:#F8EEE7;border-color:#80776F}

body.ink-mode .admin-note,
body.ink-mode .panel{
  background:#5D5751;
  border-color:#746B63;
  box-shadow:0 12px 30px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,244,238,.035);
}
body.ink-mode .admin-note{background:#29231F;border-left-color:#B56E65}
body.ink-mode .section-head h2,
body.ink-mode .topbar .brand > div strong{color:#FFF8F2}
body.ink-mode .eyebrow,
body.ink-mode .form-grid label,
body.ink-mode .form-row label{color:#D2C4BA}
body.ink-mode input{background:#514B45;border-color:#81786F;color:#FFF7F0}
body.ink-mode input:hover{border-color:#5A4D45}
body.ink-mode input:focus{border-color:#B56E65;background:#231F1C;outline-color:rgba(181,110,101,.20)}
body.ink-mode .primary{background:#A9655D;border-color:#A9655D;color:#FFF6F3;box-shadow:0 3px 12px rgba(0,0,0,.18)}
body.ink-mode .actions button,
body.ink-mode .form-row button{background:#6B645D;color:#F8EEE7;border-color:#81786F}
body.ink-mode .actions button:hover,
body.ink-mode .form-row button:hover{background:#746C64}
body.ink-mode .status{background:#59534D;border-color:#81786F;color:#D2C4BA}
body.ink-mode .grid-scroll{border-color:#7C736A}
body.ink-mode .grid-scroll th{background:#59534D;color:#F8EEE7}
body.ink-mode .grid-scroll th,
body.ink-mode .grid-scroll td{border-color:#766E66}
body.ink-mode .grid-scroll input{background:#59534D}
body.ink-mode .edit{background:#6B645D;border-color:#81786F;color:#F8EEE7}
body.ink-mode .edit:hover{background:#746C64}
body.ink-mode .editor-meta{background:#59534D;border-color:#7C736A}
body.ink-mode .change-summary{background:rgba(181,110,101,.09);border-color:rgba(181,110,101,.28)}
body.ink-mode .picker{background:#5D5751;border-color:#7C736A;box-shadow:0 18px 50px rgba(0,0,0,.42)}
body.ink-mode .picker .shift-option{background:#59534D;color:#F8EEE7;border-color:#766E66}
body.ink-mode footer{color:#BDAFA5}

@media(max-width:600px){
  .admin-note,.panel{margin-bottom:12px}
  .section-head{gap:10px}
  .section-head h2{font-size:17px}
  .topbar .brand-icon{width:28px;height:28px;flex-basis:28px;border-radius:5px;font-size:14px}
  .topbar .brand > div strong{font-size:11px}
  .topbar .brand > div small{font-size:7px}
}


/* Roster title — dedicated title treatment */
#duty-roster-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin:3px 0 0;
  padding:0;
  color:#332F2C !important;
  font-family:"Mina",sans-serif !important;
  font-size:21px !important;
  font-weight:700 !important;
  letter-spacing:-.015em;
  line-height:1.2 !important;
  text-rendering:optimizeLegibility;
}
#duty-roster-title > span{
  display:inline-block;
  color:#C9433B;
  font-family:Georgia,serif;
  font-size:22px;
  font-weight:400;
  line-height:1;
  transform:translateY(-1px);
}
body.ink-mode #duty-roster-title{
  color:#FFF7F0 !important;
}
body.ink-mode #duty-roster-title > span{
  color:#C96A61;
}
@media(max-width:520px){
  #duty-roster-title{
    gap:6px;
    font-size:16px !important;
  }
  #duty-roster-title > span{
    font-size:18px;
  }
}


/* Browser compatibility + low-overhead rendering safeguards.
   These declarations intentionally do not alter the existing design. */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  font-synthesis:none;
}
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{
  max-width:100%;
}
@media(max-width:900px){
  /* Avoid reserving a compositor layer for every scrolling element. */
  .roster-wrap,
  .day-grid,
  .person-row{
    will-change:auto;
  }
}
@supports (scrollbar-gutter:stable){
  .roster-wrap{
    scrollbar-gutter:stable;
  }
}
@media(prefers-reduced-motion:reduce){
  .name-active-dot{
    animation:none !important;
  }
  .toast{
    transition:none !important;
  }
}


/* Graceful fallbacks for browsers without backdrop-filter support.
   Supported browsers keep the existing glass effect unchanged. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .board,.topbar,.today-jump,.icon-btn,.admin-link,.status-live{background:rgba(255,255,255,.92)}
  body.ink-mode .board,body.ink-mode .topbar,body.ink-mode .today-jump,body.ink-mode .icon-btn,body.ink-mode .admin-link,body.ink-mode .status-live{background:rgba(93,87,81,.97)}
}


/* Mobile shift cells — balanced PC visual language */
@media(max-width:900px){
  .shift-cell{
    padding:7px 7px !important;
    background:#FCF8F4 !important;
    border-right:1px solid #D8D0C9 !important;
    border-bottom:1px solid #E1DAD4 !important;
  }
  .shift{
    max-width:90px !important;
    min-height:42px !important;
    padding:7px 9px !important;
    border-radius:9px !important;
    border:1px solid color-mix(in srgb,var(--c) 82%,#fff) !important;
    box-shadow:
      0 4px 10px color-mix(in srgb,var(--c) 20%,transparent),
      inset 0 1px 0 rgba(255,255,255,.48) !important;
  }
  .shift b{
    font-size:14px !important;
    font-weight:700 !important;
  }
}
@media(max-width:520px){
  .shift-cell{
    padding:6px 6px !important;
    border-right:1px solid #D8D0C9 !important;
  }
  .shift{
    max-width:70px !important;
    min-height:40px !important;
    padding:6px 8px !important;
    border-radius:9px !important;
    box-shadow:
      0 4px 10px color-mix(in srgb,var(--c) 20%,transparent),
      inset 0 1px 0 rgba(255,255,255,.48) !important;
  }
  .shift b{
    font-size:13px !important;
    font-weight:700 !important;
  }
  body.ink-mode .shift-cell{
    background:#5D5751 !important;
    border-right-color:#766E66 !important;
    border-bottom-color:#766E66 !important;
  }
}


/* Final balanced "dim-light" theme
   Purpose: reduce the light-mode brightness without turning the UI into a
   conventional ink-mode/negative theme. Shift colors and header C animation stay untouched. */
html body.ink-mode{
  --bg:#D7D1CB !important;
  --panel:#E6E0DA !important;
  --panel-soft:#DDD7D1 !important;
  --ink:#403B37 !important;
  --muted:#706862 !important;
  --line:#B8B0A9 !important;
  --line-strong:#A9A19A !important;
  --navy:#403B37 !important;
  background:
    radial-gradient(circle at 12% 8%,rgba(255,244,232,.30),transparent 30%),
    radial-gradient(circle at 88% 16%,rgba(201,123,112,.08),transparent 28%),
    linear-gradient(180deg,#DDD7D1 0%,#D7D1CB 100%) !important;
  color:var(--ink) !important;
}

html body.ink-mode .board{
  background:rgba(230,224,218,.88) !important;
  border-color:rgba(255,255,255,.70) !important;
  box-shadow:0 18px 45px rgba(70,60,52,.12),inset 0 1px 0 rgba(255,255,255,.72) !important;
}

html body.ink-mode .board-head{
  background:rgba(239,234,229,.64) !important;
  border-bottom-color:rgba(184,176,169,.72) !important;
}

html body.ink-mode .day-grid,
html body.ink-mode .person-head,
html body.ink-mode .day-head{
  background:#DDD7D1 !important;
  border-color:#B8B0A9 !important;
}

html body.ink-mode .person,
html body.ink-mode .shift-cell{
  background:#E6E0DA !important;
  border-color:#C0B8B1 !important;
}

html body.ink-mode .day-head span,
html body.ink-mode .legend small,
html body.ink-mode .intro p,
html body.ink-mode .intro-meta b,
html body.ink-mode .kicker,
html body.ink-mode .intro-meta span{
  color:#706862 !important;
}

html body.ink-mode .legend b,
html body.ink-mode .day-head strong,
html body.ink-mode .person strong,
html body.ink-mode .shift b{
  color:#403B37 !important;
}

html body.ink-mode .legend span{
  color:#5F5852 !important;
  background:rgba(247,243,239,.62) !important;
  border-color:#C6BEB7 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 3px 8px rgba(70,60,52,.035) !important;
}

html body.ink-mode .day-head.is-today,
html body.ink-mode .shift-cell.is-today{
  background:rgba(201,164,143,.16) !important;
}

html body.ink-mode .day-head em{
  color:#735A4D !important;
  background:#E8D9D0 !important;
}

html body.ink-mode .person-head{
  color:#746B64 !important;
  text-shadow:none !important;
}

html body.ink-mode .today-jump{
  background:#E1DBD5 !important;
  border-color:#BDB5AE !important;
  color:#4A433E !important;
  box-shadow:0 3px 10px rgba(70,60,52,.06) !important;
}

html body.ink-mode .topbar{
  background:#D2CCC6 !important;
  color:#403B37 !important;
  border-bottom-color:#B5ADA6 !important;
  box-shadow:0 5px 16px rgba(70,60,52,.08) !important;
}

html body.ink-mode .brand-copy strong,
html body.ink-mode .topbar .brand > div strong{
  color:#403B37 !important;
}

html body.ink-mode .admin-link,
html body.ink-mode .icon-btn#theme,
html body.ink-mode .back,
html body.ink-mode .topbar .icon-btn{
  background:#E9E3DE !important;
  color:#4B443F !important;
  border-color:#C5BDB6 !important;
}

html body.ink-mode .status-live{
  color:#706862 !important;
}

html body.ink-mode .admin-note,
html body.ink-mode .panel{
  background:#E6E0DA !important;
  border-color:#C2BAB3 !important;
  box-shadow:0 10px 26px rgba(70,60,52,.08),inset 0 1px 0 rgba(255,255,255,.72) !important;
}

html body.ink-mode .admin-note{
  background:#E9E1DB !important;
}

html body.ink-mode input{
  background:#F0EBE6 !important;
  color:#403B37 !important;
  border-color:#C2BAB3 !important;
}

html body.ink-mode .primary{
  background:#B96F66 !important;
  border-color:#B96F66 !important;
  color:#FFF9F6 !important;
}

html body.ink-mode .actions button,
html body.ink-mode .form-row button,
html body.ink-mode .edit{
  background:#E9E3DE !important;
  color:#4B443F !important;
  border-color:#C5BDB6 !important;
}

html body.ink-mode .status{
  background:#E4DED8 !important;
  border-color:#C2BAB3 !important;
  color:#706862 !important;
}

html body.ink-mode .grid-scroll th{
  background:#DDD7D1 !important;
  color:#4B443F !important;
}

html body.ink-mode .grid-scroll th,
html body.ink-mode .grid-scroll td{
  border-color:#C2BAB3 !important;
}

html body.ink-mode .grid-scroll input{
  background:#F0EBE6 !important;
}

html body.ink-mode .picker{
  background:#E6E0DA !important;
  border-color:#BDB5AE !important;
  box-shadow:0 16px 36px rgba(70,60,52,.14) !important;
}

html body.ink-mode .picker button{
  color:#403B37 !important;
}

html body.ink-mode .picker button:hover{
  background:#DDD7D1 !important;
}

@media(max-width:900px){
  html body.ink-mode .topbar{
    background:#D2CCC6 !important;
    border-bottom-color:#B5ADA6 !important;
    box-shadow:0 4px 14px rgba(70,60,52,.08) !important;
  }
  html body.ink-mode .board{
    background:#E6E0DA !important;
    box-shadow:0 8px 22px rgba(70,60,52,.08) !important;
  }
  html body.ink-mode .board-head{
    background:#E6E0DA !important;
  }
  html body.ink-mode .legend span{
    background:#EDE8E3 !important;
    box-shadow:none !important;
  }
  html body.ink-mode .day-grid,
  html body.ink-mode .person-head,
  html body.ink-mode .day-head{
    background:#DDD7D1 !important;
  }
  html body.ink-mode .person,
  html body.ink-mode .shift-cell{
    background:#E6E0DA !important;
  }
}

@media(prefers-reduced-motion:reduce){
  html body.ink-mode .board,
  html body.ink-mode .topbar{
    transition:none !important;
  }
}

/* Preserve the existing header C animation exactly. */




/* =========================================================
   INK MODE — Kindle / e-paper inspired
   Flat paper, ink typography, hairline rules.
   ========================================================= */
html body.ink-mode{
  --bg:#E2E0D8 !important;
  --panel:#F3F2EC !important;
  --panel-soft:#EAE8E0 !important;
  --ink:#222222 !important;
  --muted:#5A5954 !important;
  --line:#B9B7B0 !important;
  --line-strong:#92918B !important;
  --navy:#222222 !important;
  --shadow:none !important;
  background:#E2E0D8 !important;
  color:#222222 !important;
}

/* The page is paper; the roster is a single sheet. */
html body.ink-mode .board{
  background:#F3F2EC !important;
  border:1px solid #B9B7B0 !important;
  border-radius:10px !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html body.ink-mode .board-head{
  background:#EAE8E0 !important;
  border-bottom:1px solid #92918B !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html body.ink-mode .day-grid,
html body.ink-mode .person-head,
html body.ink-mode .day-head{
  background:#EAE8E0 !important;
  border-color:#B9B7B0 !important;
}
html body.ink-mode .person,
html body.ink-mode .shift-cell{
  background:#F3F2EC !important;
  border-color:#B9B7B0 !important;
}

/* Typography carries hierarchy instead of shadows/gradients. */
html body.ink-mode .legend span{
  background:transparent !important;
  border:1px solid #B9B7B0 !important;
  box-shadow:none !important;
  color:#3B3A36 !important;
}
html body.ink-mode .legend b,
html body.ink-mode .day-head strong,
html body.ink-mode .person strong,
html body.ink-mode .shift b,
html body.ink-mode #duty-roster-title{
  color:#222222 !important;
}
html body.ink-mode .legend small,
html body.ink-mode .day-head span,
html body.ink-mode .intro p,
html body.ink-mode .intro-meta b,
html body.ink-mode .kicker,
html body.ink-mode .intro-meta span{
  color:#5A5954 !important;
}
html body.ink-mode .person-head{
  color:#4D4C47 !important;
  text-shadow:none !important;
}

/* Today: a quiet paper-gray state, not a glow. */
html body.ink-mode .day-head.is-today,
html body.ink-mode .shift-cell.is-today{
  background:#DAD8D0 !important;
}
html body.ink-mode .day-head em{
  color:#222222 !important;
  background:#C8C6BF !important;
}

/* Controls: printed/outlined rather than floating. */
html body.ink-mode .today-jump,
html body.ink-mode .admin-link,
html body.ink-mode .icon-btn#theme,
html body.ink-mode .topbar .icon-btn,
html body.ink-mode .back{
  background:#F3F2EC !important;
  color:#222222 !important;
  border:1px solid #92918B !important;
  box-shadow:none !important;
}
html body.ink-mode .topbar{
  background:#EAE8E0 !important;
  color:#222222 !important;
  border-bottom:1px solid #92918B !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html body.ink-mode .brand-copy strong,
html body.ink-mode .topbar .brand > div strong{
  color:#222222 !important;
}
html body.ink-mode .status-live{
  color:#4D4C47 !important;
}

/* Admin follows the same paper sheet. */
html body.ink-mode .admin-note,
html body.ink-mode .panel{
  background:#F3F2EC !important;
  border-color:#B9B7B0 !important;
  box-shadow:none !important;
}
html body.ink-mode input,
html body.ink-mode .grid-scroll input{
  background:#F3F2EC !important;
  color:#222222 !important;
  border-color:#92918B !important;
  box-shadow:none !important;
}
html body.ink-mode .primary{
  background:#222222 !important;
  border-color:#222222 !important;
  color:#F3F2EC !important;
  box-shadow:none !important;
}
html body.ink-mode .actions button,
html body.ink-mode .form-row button,
html body.ink-mode .edit{
  background:#EAE8E0 !important;
  color:#222222 !important;
  border-color:#92918B !important;
  box-shadow:none !important;
}
html body.ink-mode .status{
  background:#EAE8E0 !important;
  color:#4D4C47 !important;
  border-color:#92918B !important;
}
html body.ink-mode .grid-scroll th{
  background:#EAE8E0 !important;
  color:#222222 !important;
}
html body.ink-mode .grid-scroll th,
html body.ink-mode .grid-scroll td{
  border-color:#B9B7B0 !important;
}
html body.ink-mode .picker{
  background:#F3F2EC !important;
  border-color:#92918B !important;
  box-shadow:none !important;
}
html body.ink-mode .picker button{
  color:#222222 !important;
}
html body.ink-mode .picker button:hover{
  background:#EAE8E0 !important;
}
html body.ink-mode footer{
  color:#5A5954 !important;
}

/* Remove visual "e-ink" tricks that would look like web gradients on LCD. */
html body.ink-mode .shift{
  box-shadow:none !important;
  text-shadow:none !important;
}
html body.ink-mode .shift-cell .shift{
  filter:none !important;
}
@media(max-width:900px){
  html body.ink-mode .topbar,
  html body.ink-mode .board,
  html body.ink-mode .board-head,
  html body.ink-mode .day-grid,
  html body.ink-mode .person-head,
  html body.ink-mode .day-head,
  html body.ink-mode .person,
  html body.ink-mode .shift-cell{
    box-shadow:none !important;
  }
}

/* Keep motion out of Ink Mode itself; existing roster scrolling remains functional. */
html body.ink-mode .board,
html body.ink-mode .topbar{
  transition:none !important;
}


/* =========================================================
   INK PRINT EDITION — final visual layer
   Everything becomes a printed-paper/book interface.
   The header C mark is intentionally excluded so its existing
   red animation and behavior remain exactly as-is.
   ========================================================= */
html body.ink-mode{
  --bg:#E7E4DA !important;
  --panel:#F5F2E8 !important;
  --panel-soft:#ECE9DE !important;
  --ink:#171717 !important;
  --muted:#5B5953 !important;
  --line:#B9B6AC !important;
  --line-strong:#85827A !important;
  --navy:#171717 !important;
  background:#E7E4DA !important;
  color:#171717 !important;
  background-image:none !important;
}

/* Paper page */
html body.ink-mode .app{
  background:#E7E4DA !important;
}
html body.ink-mode main{
  background:transparent !important;
}
html body.ink-mode .board{
  background:#F5F2E8 !important;
  border:1px solid #AFACA2 !important;
  border-radius:3px !important;
  box-shadow:0 2px 5px rgba(35,32,27,.08) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html body.ink-mode .board-head{
  background:#ECE9DE !important;
  border-bottom:2px solid #77746C !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Printed header — C mark excluded on purpose */
html body.ink-mode .topbar{
  background:#E7E4DA !important;
  color:#171717 !important;
  border-bottom:2px solid #77746C !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html body.ink-mode .brand-copy strong,
html body.ink-mode .topbar .brand > div strong{
  color:#171717 !important;
}
html body.ink-mode .status-live{
  color:#4A4842 !important;
}
html body.ink-mode .status-live i{
  background:#171717 !important;
  box-shadow:none !important;
}
html body.ink-mode .admin-link,
html body.ink-mode .icon-btn#theme,
html body.ink-mode .topbar .icon-btn,
html body.ink-mode .back{
  background:transparent !important;
  color:#252420 !important;
  border:1px solid #85827A !important;
  border-radius:3px !important;
  box-shadow:none !important;
}

/* Roster title and metadata */
html body.ink-mode #duty-roster-title,
html body.ink-mode .intro h1{
  color:#171717 !important;
  text-shadow:none !important;
}
html body.ink-mode #duty-roster-title > span{
  color:#171717 !important;
}
html body.ink-mode .kicker,
html body.ink-mode .intro p,
html body.ink-mode .intro-meta span,
html body.ink-mode .intro-meta b{
  color:#5B5953 !important;
}

/* Today control: printed label */
html body.ink-mode .today-jump{
  background:#F5F2E8 !important;
  color:#171717 !important;
  border:1px solid #85827A !important;
  border-radius:3px !important;
  box-shadow:none !important;
}

/* Legend: monochrome printed labels */
html body.ink-mode .legend span{
  background:#F5F2E8 !important;
  color:#252420 !important;
  border:1px solid #AAA79E !important;
  border-radius:3px !important;
  box-shadow:none !important;
}
html body.ink-mode .legend b,
html body.ink-mode .legend small{
  color:#252420 !important;
}
html body.ink-mode .legend i{
  background:#252420 !important;
  box-shadow:none !important;
  border-color:#252420 !important;
}

/* Roster grid: paper + rules */
html body.ink-mode .day-grid,
html body.ink-mode .person-head,
html body.ink-mode .day-head{
  background:#ECE9DE !important;
  border-color:#AFACA2 !important;
  box-shadow:none !important;
}
html body.ink-mode .person,
html body.ink-mode .shift-cell{
  background:#F5F2E8 !important;
  border-color:#B9B6AC !important;
  box-shadow:none !important;
}
html body.ink-mode .day-head{
  border-bottom:1px solid #85827A !important;
}
html body.ink-mode .day-head span,
html body.ink-mode .day-head strong,
html body.ink-mode .person strong,
html body.ink-mode .person-head{
  color:#171717 !important;
  text-shadow:none !important;
}
html body.ink-mode .day-head span{
  font-size:.9em !important;
  letter-spacing:.02em;
}
html body.ink-mode .day-head strong{
  font-weight:700 !important;
}
html body.ink-mode .day-head.is-today,
html body.ink-mode .shift-cell.is-today{
  background:#DDD9CD !important;
}
html body.ink-mode .day-head em{
  background:#171717 !important;
  color:#F5F2E8 !important;
  border-radius:2px !important;
  box-shadow:none !important;
}

/* Shift blocks become ink stamps — no colored UI, no shadows */
html body.ink-mode .shift-cell .shift{
  background:#E2DFD5 !important;
  color:#171717 !important;
  border:1px solid #85827A !important;
  border-radius:2px !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
}
html body.ink-mode .shift-cell .shift b,
html body.ink-mode .shift-cell .shift small{
  color:#171717 !important;
  opacity:1 !important;
}

/* Duty status: simple printed annotation */
html body.ink-mode .duty-status{
  background:transparent !important;
  color:#4A4842 !important;
  border-color:#AAA79E !important;
  border-radius:2px !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
html body.ink-mode .name-active-dot{
  background:#171717 !important;
  box-shadow:none !important;
}

/* Admin: same paper/book language */
html body.ink-mode .admin-note,
html body.ink-mode .panel{
  background:#F5F2E8 !important;
  color:#171717 !important;
  border:1px solid #AFAAA2 !important;
  border-color:#AFAAA2 !important;
  border-radius:3px !important;
  box-shadow:none !important;
}
html body.ink-mode input,
html body.ink-mode .grid-scroll input{
  background:#F5F2E8 !important;
  color:#171717 !important;
  border:1px solid #85827A !important;
  border-radius:2px !important;
  box-shadow:none !important;
}
html body.ink-mode .primary{
  background:#171717 !important;
  color:#F5F2E8 !important;
  border:1px solid #171717 !important;
  border-radius:2px !important;
  box-shadow:none !important;
}
html body.ink-mode .actions button,
html body.ink-mode .form-row button,
html body.ink-mode .edit{
  background:#ECE9DE !important;
  color:#171717 !important;
  border:1px solid #85827A !important;
  border-radius:2px !important;
  box-shadow:none !important;
}
html body.ink-mode .status{
  background:#ECE9DE !important;
  color:#4A4842 !important;
  border:1px solid #AAA79E !important;
  border-radius:2px !important;
  box-shadow:none !important;
}
html body.ink-mode .grid-scroll th{
  background:#ECE9DE !important;
  color:#171717 !important;
}
html body.ink-mode .grid-scroll th,
html body.ink-mode .grid-scroll td{
  border-color:#AAA79E !important;
}
html body.ink-mode .picker{
  background:#F5F2E8 !important;
  border:1px solid #85827A !important;
  border-radius:3px !important;
  box-shadow:2px 3px 8px rgba(35,32,27,.10) !important;
}
html body.ink-mode .picker .shift-option{
  background:#ECE9DE !important;
  color:#171717 !important;
  border:1px solid #AAA79E !important;
  border-radius:2px !important;
  box-shadow:none !important;
}
html body.ink-mode .picker .shift-option strong,
html body.ink-mode .picker .shift-option small{
  color:#171717 !important;
}

/* Footer reads like a book colophon */
html body.ink-mode footer,
html body.ink-mode .site-footer{
  color:#5B5953 !important;
  text-shadow:none !important;
}
html body.ink-mode .footer-divider{
  background:#AFAAA2 !important;
}

/* No modern glass/lighting tricks anywhere in Ink Mode. */
html body.ink-mode *,
html body.ink-mode *::before,
html body.ink-mode *::after{
  text-shadow:none !important;
}
html body.ink-mode .board,
html body.ink-mode .topbar,
html body.ink-mode .today-jump,
html body.ink-mode .icon-btn,
html body.ink-mode .admin-link,
html body.ink-mode .legend span,
html body.ink-mode .panel,
html body.ink-mode .admin-note,
html body.ink-mode .picker,
html body.ink-mode .shift{
  background-image:none !important;
  filter:none !important;
}
html body.ink-mode .brand-mark{
  /* Intentionally untouched: existing C color + 5s red animation stay active. */
  animation:cctvRedSwitch 5s ease-in-out infinite !important;
}

@media(max-width:900px){
  html body.ink-mode .topbar,
  html body.ink-mode .board{
    border-radius:2px !important;
  }
  html body.ink-mode .shift-cell{
    background:#F5F2E8 !important;
    border-color:#B9B6AC !important;
  }
}


/* =========================================================
   INK MODE — interaction balance fix
   Keep all printed text dark, keep Today control paper-like,
   and make touch feedback affect only the touched shift cell.
   ========================================================= */

/* Never let legacy dark-mode rules turn Ink text white. */
html body.ink-mode .legend span.active-shift b,
html body.ink-mode .legend span.active-shift small,
html body.ink-mode .legend span.active-shift,
html body.ink-mode .day-head span,
html body.ink-mode .day-head strong,
html body.ink-mode .person strong,
html body.ink-mode .person,
html body.ink-mode .duty-status,
html body.ink-mode .intro p,
html body.ink-mode .intro-meta span,
html body.ink-mode .intro-meta b,
html body.ink-mode .kicker,
html body.ink-mode footer{
  color:#171717 !important;
}

/* Today button stays printed-paper colored in every state. */
html body.ink-mode .today-jump,
html body.ink-mode .today-jump:hover,
html body.ink-mode .today-jump:focus,
html body.ink-mode .today-jump:focus-visible,
html body.ink-mode .today-jump:active{
  background:#F5F2E8 !important;
  color:#171717 !important;
  border-color:#85827A !important;
  box-shadow:none !important;
  outline:none !important;
  transform:none;
}

/* Preserve the 24-hour progress idea, but print it as a thin monochrome rule. */
html body.ink-mode .today-jump::before{
  background:conic-gradient(
    from -90deg,
    #171717 0 var(--day-remaining),
    #C5C2B9 var(--day-remaining) 100%
  ) !important;
}
html body.ink-mode .today-jump::after{
  background:none !important;
  box-shadow:none !important;
}

/* Touch feedback: only the exact shift cell being touched may react. */
@media (hover:none), (pointer:coarse){
  html body.ink-mode .person-row:hover .person,
  html body.ink-mode .person-row:hover .shift-cell,
  html body.ink-mode .person-row:focus-within .person,
  html body.ink-mode .person-row:focus-within .shift-cell{
    background:#F5F2E8 !important;
    box-shadow:none !important;
    filter:none !important;
  }

  html body.ink-mode .shift-cell:active{
    background:#DDD9CD !important;
    transform:scale(.985) !important;
    filter:none !important;
    opacity:1 !important;
  }

  html body.ink-mode .shift-cell.is-today:active{
    background:#D5D1C5 !important;
  }
}

/* Desktop hover also stays cell-local in Ink Mode. */
@media (hover:hover) and (pointer:fine){
  html body.ink-mode .person-row:hover .person,
  html body.ink-mode .person-row:hover .shift-cell{
    background:#F5F2E8 !important;
    filter:none !important;
    box-shadow:none !important;
  }

  html body.ink-mode .shift-cell:hover{
    background:#EAE7DD !important;
    filter:none !important;
  }

  html body.ink-mode .shift-cell.is-today:hover{
    background:#DDD9CD !important;
  }
}

/* Active legend remains emphasized by weight, never by white text. */
html body.ink-mode .legend span.active-shift b{
  color:#171717 !important;
  font-weight:1000 !important;
}
html body.ink-mode .legend span.active-shift small{
  color:#4A4842 !important;
  font-weight:900 !important;
}
html body.ink-mode .legend span.active-shift i{
  background:#171717 !important;
  box-shadow:none !important;
}


/* Final Ink correction: Today remains paper, never a solid black cell. */
html body.ink-mode .day-head.is-today,
html body.ink-mode .shift-cell.is-today{
  background:#E3E0D6 !important;
  color:#171717 !important;
}
html body.ink-mode .shift-cell.is-today .shift{
  background:#E8E5DB !important;
  color:#171717 !important;
  border-color:#85827A !important;
}
html body.ink-mode .day-head.is-today em{
  background:#171717 !important;
  color:#F5F2E8 !important;
}


/* FINAL INK BALANCE — today cell + readable admin text */
html body.ink-mode .day-head.is-today,
html body.ink-mode .shift-cell.is-today,
html body.ink-mode .shift-cell.is-today:hover,
html body.ink-mode .shift-cell.is-today:active,
html body.ink-mode .shift-cell.is-today:focus-within{
  background:#E3E0D6 !important;
  color:#171717 !important;
  opacity:1 !important;
  filter:none !important;
}
html body.ink-mode .shift-cell.is-today .shift,
html body.ink-mode .shift-cell.is-today .shift *,
html body.ink-mode .shift-cell.is-today .shift:hover,
html body.ink-mode .shift-cell.is-today .shift:active{
  background:#E8E5DB !important;
  color:#171717 !important;
  border-color:#85827A !important;
  box-shadow:none !important;
  text-shadow:none !important;
  opacity:1 !important;
}
html body.ink-mode .day-head.is-today span,
html body.ink-mode .day-head.is-today strong{
  color:#171717 !important;
}
html body.ink-mode .day-head.is-today em{
  background:#171717 !important;
  color:#F5F2E8 !important;
}

/* Admin Ink Mode: no white text against paper */
html body.ink-mode .topbar,
html body.ink-mode .brand,
html body.ink-mode .brand strong,
html body.ink-mode .brand small,
html body.ink-mode .back,
html body.ink-mode .icon-btn,
html body.ink-mode .eyebrow,
html body.ink-mode .section-head,
html body.ink-mode .section-head h2,
html body.ink-mode .admin-note,
html body.ink-mode .admin-note b,
html body.ink-mode .admin-note code,
html body.ink-mode .panel,
html body.ink-mode .panel *,
html body.ink-mode .form-grid label,
html body.ink-mode .form-row label,
html body.ink-mode .muted,
html body.ink-mode .change-status,
html body.ink-mode .quiet,
html body.ink-mode .change-summary,
html body.ink-mode .change-summary *,
html body.ink-mode .grid-scroll th,
html body.ink-mode .grid-scroll td,
html body.ink-mode footer,
html body.ink-mode footer *{
  color:#252420 !important;
  text-shadow:none !important;
}
html body.ink-mode .brand-icon{
  color:#252420 !important;
}
html body.ink-mode input,
html body.ink-mode input::placeholder{
  color:#252420 !important;
}
html body.ink-mode .primary,
html body.ink-mode .primary *{
  background:#252420 !important;
  color:#F5F2E8 !important;
}
html body.ink-mode .actions button,
html body.ink-mode .form-row button,
html body.ink-mode .edit,
html body.ink-mode .edit *{
  background:#ECE9DE !important;
  color:#252420 !important;
}
html body.ink-mode .status{
  color:#4A4842 !important;
}
html body.ink-mode .change-status.dirty{
  color:#6B4A18 !important;
}
html body.ink-mode .remove{
  color:#6F2424 !important;
}


/* HARD OVERRIDE: Ink Mode today date column must remain paper-light.
   This intentionally overrides every older today/week-start interaction rule. */
html body.ink-mode .day-head.is-today,
html body.ink-mode .day-head.is-today.week-start,
html body.ink-mode .shift-cell.is-today,
html body.ink-mode .shift-cell.is-today.week-start,
html body.ink-mode .shift-cell.is-today.week-end{
  background:#EAE7DD !important;
  background-image:none !important;
  color:#171717 !important;
  box-shadow:inset 2px 0 0 #85827A,inset -2px 0 0 #85827A !important;
  filter:none !important;
  opacity:1 !important;
}
html body.ink-mode .day-head.is-today::before,
html body.ink-mode .day-head.is-today::after,
html body.ink-mode .shift-cell.is-today::before,
html body.ink-mode .shift-cell.is-today::after{
  background:none !important;
  box-shadow:none !important;
  opacity:1 !important;
}
html body.ink-mode .day-head.is-today em{
  background:#EAE7DD !important;
  color:#171717 !important;
  border:1px solid #85827A !important;
  box-shadow:none !important;
}
html body.ink-mode .shift-cell.is-today .shift{
  background:#F0EDE3 !important;
  color:#171717 !important;
  border-color:#85827A !important;
}


/* =========================================================
   INK MODE — Today button 24-hour ink progress
   Keep the normal button/pill form, but replace the red
   24-hour outline with a black-ink printed outline.
   ========================================================= */

/* The Today control itself remains a real button in Ink Mode. */
html body.ink-mode .today-jump{
  position:relative !important;
  isolation:isolate !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:36px !important;
  height:36px !important;
  padding:7px 16px !important;
  border:1px solid #85827A !important;
  border-radius:999px !important;
  background:#F5F2E8 !important;
  color:#171717 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  overflow:visible !important;
  transform:none !important;
}

/* Desktop: the existing 24-hour progress ring becomes black ink. */
@media(min-width:901px){
  html body.ink-mode .today-jump::before{
    content:"" !important;
    position:absolute !important;
    inset:-3px !important;
    padding:3px !important;
    border-radius:inherit !important;
    pointer-events:none !important;
    z-index:0 !important;
    background:conic-gradient(
      from -90deg,
      #171717 0 var(--day-remaining),
      #C5C2B9 var(--day-remaining) 100%
    ) !important;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0) !important;
    -webkit-mask-composite:xor !important;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0) !important;
    mask-composite:exclude !important;
    box-shadow:none !important;
  }

  html body.ink-mode .today-jump::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    border-radius:inherit !important;
    pointer-events:none !important;
    z-index:1 !important;
    background:none !important;
    box-shadow:inset 0 1px 0 #FFFFFF !important;
  }

  html body.ink-mode .today-jump:hover,
  html body.ink-mode .today-jump:focus-visible{
    background:#F5F2E8 !important;
    color:#171717 !important;
    border-color:#85827A !important;
    box-shadow:none !important;
    transform:translateY(-1px) !important;
  }

  html body.ink-mode .today-jump:active{
    transform:scale(.985) !important;
  }
}

/* Mobile: same button language, with a compact black-ink ring. */
@media(max-width:900px){
  html body.ink-mode .today-jump{
    min-height:30px !important;
    height:30px !important;
    padding:5px 12px !important;
    border:1px solid #85827A !important;
    border-radius:11px !important;
    background:#F5F2E8 !important;
    color:#171717 !important;
    box-shadow:none !important;
  }

  html body.ink-mode .today-jump::after{
    content:"" !important;
    position:absolute !important;
    inset:-2px !important;
    padding:1px !important;
    border-radius:inherit !important;
    pointer-events:none !important;
    z-index:0 !important;
    background:conic-gradient(
      from -90deg,
      #171717 0 var(--day-remaining),
      #C5C2B9 var(--day-remaining) 100%
    ) !important;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0) !important;
    -webkit-mask-composite:xor !important;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0) !important;
    mask-composite:exclude !important;
    box-shadow:none !important;
  }

  html body.ink-mode .today-jump::before{
    content:none !important;
    display:none !important;
  }

  html body.ink-mode .today-jump:active{
    transform:scale(.97) !important;
  }
}

/* Compact next-duty summary below the roster board. */
.next-duty{
  width:min(100%,980px);
  margin:10px auto 0;
  padding:8px 10px;
  border:1px solid rgba(100,116,139,.20);
  border-radius:10px;
  background:rgba(255,255,255,.56);
  box-shadow:0 3px 12px rgba(31,41,55,.045);
}
.next-duty-head{display:flex;align-items:center;margin-bottom:5px}
.next-duty-head span{font-size:10px;font-weight:900;letter-spacing:.03em;color:#475569}
.next-duty-list{display:grid;gap:3px}
.next-duty-row{
  display:grid;
  grid-template-columns:minmax(64px,.65fr) minmax(130px,1fr) minmax(120px,.9fr);
  align-items:center;
  min-height:25px;
  padding:3px 5px;
  border:1px solid rgba(100,116,139,.12);
  border-radius:6px;
  background:rgba(255,255,255,.48);
}
.next-duty-name{font-size:11px;font-weight:900;color:#334155}
.next-duty-item{display:flex;align-items:baseline;gap:5px;min-width:0}
.next-duty-item small{font-size:9px;font-weight:700;color:#64748b;white-space:nowrap}
.next-duty-item b{font-size:10px;font-weight:900;color:#334155;white-space:nowrap}
@media(max-width:900px){
  .next-duty{width:calc(100% - 16px);margin:8px auto 0;padding:7px 8px;border-radius:8px}
  .next-duty-head{margin-bottom:4px}
  .next-duty-head span{font-size:9px}
  .next-duty-row{grid-template-columns:50px 1fr 1fr;min-height:23px;padding:2px 4px;border-radius:5px}
  .next-duty-name{font-size:10px}
  .next-duty-item{gap:3px}
  .next-duty-item small{font-size:8px}
  .next-duty-item b{font-size:9px}
}
html body.ink-mode .next-duty{
  background:#F5F2E8 !important;
  border:1px solid #AAA79E !important;
  border-radius:3px !important;
  box-shadow:none !important;
}
html body.ink-mode .next-duty-head span,
html body.ink-mode .next-duty-name,
html body.ink-mode .next-duty-item small,
html body.ink-mode .next-duty-item b{color:#252420 !important;text-shadow:none !important}
html body.ink-mode .next-duty-row{
  background:#ECE9DE !important;
  border:1px solid #C1BEB5 !important;
  border-radius:2px !important;
}

/* Next duty — minimal strip directly under the roster board. */
.next-duty{
  width:100%;
  margin:0;
  padding:3px 0 0;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.next-duty-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
}
.next-duty-row{
  display:grid;
  grid-template-columns:minmax(36px,.62fr) minmax(0,1.45fr) minmax(0,1fr);
  align-items:center;
  min-height:27px;
  padding:2px 8px;
  border:0 !important;
  border-left:1px solid rgba(100,116,139,.25) !important;
  border-radius:0 !important;
  background:transparent !important;
}
.next-duty-row:first-child{border-left:0 !important}
.next-duty-name{
  font-size:10px;
  font-weight:900;
  color:#334155;
}
.next-duty-item{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  min-width:0;
}
.next-duty-item small{
  font-size:7px;
  font-weight:700;
  line-height:1.1;
  color:#7A8792;
}
.next-duty-item b{
  font-size:9px;
  font-weight:900;
  line-height:1.15;
  white-space:nowrap;
  color:#334155;
}
.next-duty-date{
  font-size:7px;
  font-style:normal;
  font-weight:700;
  line-height:1.1;
  color:#7A8792;
}
.next-duty-off{color:#334155 !important}

html body.ink-mode .next-duty{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
html body.ink-mode .next-duty-row{
  background:transparent !important;
  border-left:1px solid #AAA79E !important;
}
html body.ink-mode .next-duty-row:first-child{border-left:0 !important}
html body.ink-mode .next-duty-name,
html body.ink-mode .next-duty-item small,
html body.ink-mode .next-duty-item b{
  color:#252420 !important;
}
html body.ink-mode .next-duty-date{color:#77746C !important}
html body.ink-mode .next-duty-off{color:#252420 !important}

@media(max-width:900px){
  .next-duty{
    padding:2px 0 0;
  }
  .next-duty-row{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
    gap:0;
    min-height:51px;
    padding:2px 4px;
  }
  .next-duty-name{font-size:9px}
  .next-duty-item{align-items:center}
  .next-duty-item small{font-size:6px}
  .next-duty-item b{font-size:8px}
  .next-duty-date{font-size:6px}
}


/* =========================================================
   NEXT DUTY — compact balanced information strip
   ========================================================= */
.next-duty{
  width:100%;
  margin:2px 0 0;
  padding:4px 0 0;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.next-duty-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
}
.next-duty-row{
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  column-gap:10px;
  min-height:34px;
  padding:3px 10px;
  border:0 !important;
  border-left:1px solid rgba(100,116,139,.22) !important;
  border-radius:0 !important;
  background:transparent !important;
}
.next-duty-row:first-child{border-left:0 !important}
.next-duty-name{
  font-size:10px;
  font-weight:900;
  line-height:1;
  color:#334155;
  white-space:nowrap;
}
.next-duty-item{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:1px;
}
.next-duty-item small{
  font-size:7px;
  font-weight:700;
  line-height:1;
  color:#7A8792;
  white-space:nowrap;
}
.next-duty-item b{
  font-size:9px;
  font-weight:900;
  line-height:1.05;
  color:#334155;
  white-space:nowrap;
}
.next-duty-item em{
  font-size:6.5px;
  font-style:normal;
  font-weight:700;
  line-height:1;
  color:#7A8792;
  white-space:nowrap;
}
.next-duty-off-item{
  padding-left:8px;
  border-left:1px solid rgba(100,116,139,.13);
}
.next-duty-change{
  letter-spacing:.01em;
}
html body.ink-mode .next-duty{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
html body.ink-mode .next-duty-row{
  background:transparent !important;
  border-left-color:#AAA79E !important;
}
html body.ink-mode .next-duty-row:first-child{border-left:0 !important}
html body.ink-mode .next-duty-name,
html body.ink-mode .next-duty-item b{
  color:#252420 !important;
}
html body.ink-mode .next-duty-item small,
html body.ink-mode .next-duty-item em{
  color:#77746C !important;
}
html body.ink-mode .next-duty-off-item{
  border-left-color:#C5C2B9 !important;
}

@media(max-width:900px){
  .next-duty{
    margin:1px 0 0;
    padding:3px 0 0;
  }
  .next-duty-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .next-duty-row{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
    row-gap:3px;
    min-height:64px;
    padding:3px 4px;
  }
  .next-duty-row:first-child{border-left:0 !important}
  .next-duty-name{font-size:9px}
  .next-duty-item{align-items:center}
  .next-duty-item small{font-size:6px}
  .next-duty-item b{font-size:8px}
  .next-duty-item em{font-size:6px}
  .next-duty-off-item{
    width:100%;
    padding:2px 0 0;
    border-left:0 !important;
    border-top:1px solid rgba(100,116,139,.13);
  }
  html body.ink-mode .next-duty-off-item{
    border-top-color:#C5C2B9 !important;
  }
}


/* NEXT DUTY — fine visual balance: name divider + date hierarchy */
.next-duty-name{
  position:relative;
  padding-bottom:4px;
}
.next-duty-name::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:rgba(100,116,139,.18);
}
.next-duty-change-item .next-duty-date,
.next-duty-off-item .next-duty-off{
  font-size:7.25px;
  line-height:1.1;
}
html body.ink-mode .next-duty-name::after{
  background:#C5C2B9;
}
@media(max-width:900px){
  .next-duty-name{
    padding-bottom:3px;
  }
  .next-duty-change-item .next-duty-date,
  .next-duty-off-item .next-duty-off{
    font-size:6.75px;
  }
}


/* NEXT DUTY — equal date visibility */
.next-duty-change-item .next-duty-date,
.next-duty-off-item .next-duty-off{
  opacity:.78;
}
html body.ink-mode .next-duty-change-item .next-duty-date,
html body.ink-mode .next-duty-off-item .next-duty-off{
  opacity:.78;
}


/* NEXT DUTY — match actual date text weight across Shift Change and OFF */
.next-duty-change-item .next-duty-date,
.next-duty-off-item .next-duty-off{
  color:#667085 !important;
  opacity:1 !important;
  font-weight:700 !important;
}
html body.ink-mode .next-duty-change-item .next-duty-date,
html body.ink-mode .next-duty-off-item .next-duty-off{
  color:#77746C !important;
  opacity:1 !important;
  font-weight:700 !important;
}


/* NEXT DUTY — desktop-only vertical alignment of date lines */
@media(min-width:901px){
  .next-duty-change-item .next-duty-date{
    transform:translateY(0);
  }
  .next-duty-off-item .next-duty-off{
    transform:translateY(4px);
  }
  html body.ink-mode .next-duty-off-item .next-duty-off{
    transform:translateY(4px);
  }
}


/* FOOTER — compact single-page balance */
.site-footer{
  padding:4px 12px 7px !important;
  min-height:0 !important;
  gap:0 !important;
}
.footer-fun{
  margin:0 !important;
  font-size:8px !important;
  line-height:1.15 !important;
  opacity:.62 !important;
}
@media(max-width:900px){
  .site-footer{
    padding:3px 8px 5px !important;
    min-height:0 !important;
    gap:0 !important;
  }
  .footer-fun{
    font-size:7px !important;
    line-height:1.15 !important;
    opacity:.60 !important;
  }
}


/* FOOTER — final centered micro-note */
.site-footer{
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  width:100% !important;
  margin:0 !important;
  padding:2px 8px 4px !important;
  min-height:0 !important;
  height:auto !important;
  box-sizing:border-box !important;
  text-align:center !important;
}
.footer-fun{
  display:block !important;
  width:100% !important;
  margin:0 auto !important;
  padding:0 !important;
  font-size:7px !important;
  line-height:1.2 !important;
  font-weight:400 !important;
  letter-spacing:.01em !important;
  text-align:center !important;
  opacity:.30 !important;
  color:#64748B !important;
  white-space:normal !important;
}
html body.ink-mode .footer-fun{
  color:#77746C !important;
  opacity:.32 !important;
}
@media(max-width:900px){
  .site-footer{
    padding:1px 5px 2px !important;
  }
  .footer-fun{
    font-size:5.75px !important;
    line-height:1.2 !important;
    opacity:.27 !important;
  }
}


/* HEADER → TODAY — compact, balanced spacing */
main{
  padding-top:0 !important;
}
.intro{
  margin-top:4px !important;
}
@media(max-width:900px){
  .intro{
    margin-top:2px !important;
  }
}


/* HEADER → TODAY — restore a little breathing room on mobile */
@media(max-width:900px){
  .intro{
    margin-top:8px !important;
  }
}


/* HEADER → TODAY — mobile spacing fine-tune */
@media(max-width:900px){
  .intro{
    margin-top:10px !important;
  }
}

/* =========================================================
   FINAL INK BALANCE — roster day / weekday / date header
   Keep the header on the same warm paper family as the grid,
   with a slightly deeper tone for clear hierarchy.
   ========================================================= */
html body.ink-mode .day-grid,
html body.ink-mode .person-head,
html body.ink-mode .day-head{
  background:#EEECE4 !important;
  background-image:none !important;
  border-color:#B7B4AA !important;
  box-shadow:none !important;
  color:#252420 !important;
}
html body.ink-mode .day-head{
  border-bottom:1px solid #8F8C84 !important;
}
html body.ink-mode .day-head span{
  color:#66635B !important;
  text-shadow:none !important;
  font-weight:500 !important;
}
html body.ink-mode .day-head strong{
  color:#252420 !important;
  text-shadow:none !important;
  font-weight:700 !important;
}
html body.ink-mode .day-head em{
  background:#E2DFD5 !important;
  color:#252420 !important;
  border:1px solid #AAA79E !important;
  border-radius:2px !important;
  box-shadow:none !important;
}
html body.ink-mode .day-head.is-today{
  background:#EAE7DD !important;
}
html body.ink-mode .day-head.is-today span,
html body.ink-mode .day-head.is-today strong{
  color:#171717 !important;
}
html body.ink-mode .day-head.is-today em{
  background:#171717 !important;
  color:#F5F2E8 !important;
  border-color:#171717 !important;
}
html body.ink-mode .day-head.week-start,
html body.ink-mode .shift-cell.week-start{
  border-left-color:#85827A !important;
}
html body.ink-mode .day-head.week-end,
html body.ink-mode .shift-cell.week-end{
  border-right-color:#85827A !important;
}
@media(max-width:900px){
  html body.ink-mode .day-grid,
  html body.ink-mode .person-head,
  html body.ink-mode .day-head{
    background:#EEECE4 !important;
  }
  html body.ink-mode .day-head.is-today{
    background:#EAE7DD !important;
  }
}


/* =========================================================
   INK MODE — FINAL NEUTRAL DAY / WEEKDAY / DATE CELLS
   Remove the remaining cool/blue cast completely.
   ========================================================= */
html body.ink-mode .day-grid .days .day-head,
html body.ink-mode .day-grid > .days > .day-head{
  background:#E7E4DB !important;
  background-image:none !important;
  background-color:#E7E4DB !important;
  color:#252420 !important;
  border-right-color:#B0ADA4 !important;
  border-bottom-color:#918E86 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
}
html body.ink-mode .day-grid .days .day-head::before,
html body.ink-mode .day-grid .days .day-head::after{
  content:none !important;
  display:none !important;
}
html body.ink-mode .day-grid .days .day-head span{
  color:#5E5B54 !important;
  -webkit-text-fill-color:#5E5B54 !important;
  font-weight:500 !important;
  text-shadow:none !important;
}
html body.ink-mode .day-grid .days .day-head strong{
  color:#20201D !important;
  -webkit-text-fill-color:#20201D !important;
  font-weight:700 !important;
  text-shadow:none !important;
}
html body.ink-mode .day-grid .days .day-head em{
  background:#DDD9CE !important;
  color:#292824 !important;
  -webkit-text-fill-color:#292824 !important;
  border:1px solid #AAA69D !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
html body.ink-mode .day-grid .days .day-head.is-today,
html body.ink-mode .day-grid .days .day-head.is-today.week-start,
html body.ink-mode .day-grid .days .day-head.is-today.week-end{
  background:#E1DED4 !important;
  background-image:none !important;
  background-color:#E1DED4 !important;
  border-left-color:#85827A !important;
  border-right-color:#85827A !important;
}
html body.ink-mode .day-grid .days .day-head.is-today span,
html body.ink-mode .day-grid .days .day-head.is-today strong{
  color:#171717 !important;
  -webkit-text-fill-color:#171717 !important;
}
html body.ink-mode .day-grid .days .day-head.is-today em{
  background:#171717 !important;
  color:#F5F2E8 !important;
  -webkit-text-fill-color:#F5F2E8 !important;
  border-color:#171717 !important;
}
@media(max-width:900px){
  html body.ink-mode .day-grid .days .day-head,
  html body.ink-mode .day-grid > .days > .day-head{
    background:#E7E4DB !important;
    background-color:#E7E4DB !important;
  }
  html body.ink-mode .day-grid .days .day-head.is-today{
    background:#E1DED4 !important;
    background-color:#E1DED4 !important;
  }
}


/* =========================================================
   SKELETON SHIMMER — initial roster loading only
   ========================================================= */
#roster:empty{position:relative;min-height:clamp(270px,42vw,420px);overflow:hidden;border-radius:inherit;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.34) 45%,rgba(255,255,255,.58) 50%,rgba(255,255,255,.34) 55%,transparent 100%),linear-gradient(var(--panel-soft),var(--panel-soft));background-size:220% 100%,100% 100%;animation:skeletonShimmer 1.65s ease-in-out infinite}
#roster:empty::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--line-strong),var(--line-strong)) 14px 14px/58px 12px no-repeat,linear-gradient(var(--line),var(--line)) 14px 36px/72px 9px no-repeat,repeating-linear-gradient(to bottom,transparent 0 63px,var(--line) 63px 64px,transparent 64px 80px),repeating-linear-gradient(to right,transparent 0 94px,var(--line) 94px 95px,transparent 95px 126px);opacity:.72}
#roster:empty::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.62) 50%,transparent 100%);transform:translateX(-100%);animation:skeletonSweep 1.65s ease-in-out infinite;pointer-events:none}
@keyframes skeletonShimmer{0%,100%{background-position:180% 0,0 0}50%{background-position:0 0,0 0}}
@keyframes skeletonSweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){#roster:empty,#roster:empty::after{animation:none}}
@media(max-width:900px){#roster:empty{min-height:300px}}

/* INK MODE — balanced neutral skeleton */
html body.ink-mode #roster:empty{
  background:linear-gradient(90deg,transparent 0%,rgba(37,36,32,.055) 44%,rgba(37,36,32,.105) 50%,rgba(37,36,32,.055) 56%,transparent 100%),linear-gradient(#E7E4DB,#E7E4DB);
  background-size:220% 100%,100% 100%;
}
html body.ink-mode #roster:empty::before{
  background:linear-gradient(#AAA69D,#AAA69D) 14px 14px/58px 12px no-repeat,linear-gradient(#C1BEB5,#C1BEB5) 14px 36px/72px 9px no-repeat,repeating-linear-gradient(to bottom,transparent 0 63px,#C1BEB5 63px 64px,transparent 64px 80px),repeating-linear-gradient(to right,transparent 0 94px,#C1BEB5 94px 95px,transparent 95px 126px);
  opacity:.62;
}
html body.ink-mode #roster:empty::after{
  background:linear-gradient(90deg,transparent 0%,rgba(37,36,32,.12) 50%,transparent 100%);
}


/* =========================================================
   STAGGERED FADE-IN — first roster render only
   ========================================================= */
#roster.staggered-in .person-row{
  opacity:0;
  animation:rosterRowFadeIn .42s cubic-bezier(.22,.7,.25,1) forwards;
  animation-delay:calc(var(--row-index,0) * 55ms);
  will-change:opacity,transform;
}
#roster.staggered-in .person-row:nth-child(2){--row-index:0}
#roster.staggered-in .person-row:nth-child(3){--row-index:1}
#roster.staggered-in .person-row:nth-child(4){--row-index:2}
#roster.staggered-in .person-row:nth-child(5){--row-index:3}
#roster.staggered-in .person-row:nth-child(6){--row-index:4}
#roster.staggered-in .person-row:nth-child(7){--row-index:5}
#roster.staggered-in .person-row:nth-child(8){--row-index:6}
#roster.staggered-in .person-row:nth-child(9){--row-index:7}
#roster.staggered-in .person-row:nth-child(10){--row-index:8}
#roster.staggered-in .person-row:nth-child(11){--row-index:9}
#roster.staggered-in .person-row:nth-child(12){--row-index:10}
#roster.staggered-in .person-row:nth-child(13){--row-index:11}
#roster.staggered-in .person-row:nth-child(14){--row-index:12}
#roster.staggered-in .person-row:nth-child(15){--row-index:13}
#roster.staggered-in .person-row:nth-child(16){--row-index:14}
@keyframes rosterRowFadeIn{
  from{opacity:0;transform:translate3d(0,6px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@media(prefers-reduced-motion:reduce){
  #roster.staggered-in .person-row{
    opacity:1;
    animation:none;
    transform:none;
  }
}


/* PC ONLY — Next Duty information: improve width, alignment and text hierarchy.
   Mobile layout remains unchanged. */
@media(min-width:901px){
  .next-duty{
    width:calc(100% + 24px);
    margin:6px -12px 0;
    padding:6px 0 0;
  }

  .next-duty-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
  }

  .next-duty-row{
    grid-template-columns:minmax(58px,.62fr) minmax(175px,1.55fr) minmax(155px,1.3fr);
    column-gap:12px;
    min-height:42px;
    padding:4px 14px;
  }

  .next-duty-name{
    font-size:11px;
    line-height:1.1;
    padding-bottom:5px;
  }

  .next-duty-item{
    gap:2px;
  }

  .next-duty-item small{
    font-size:8px;
    line-height:1.1;
  }

  .next-duty-item b{
    font-size:10.5px;
    line-height:1.15;
  }

  .next-duty-item em,
  .next-duty-change-item .next-duty-date,
  .next-duty-off-item .next-duty-off{
    font-size:7.5px;
    line-height:1.15;
  }

  .next-duty-off-item{
    padding-left:10px;
  }
}


/* PC ONLY — Next Duty: increase readability while keeping the compact layout. */
@media(min-width:901px){
  .next-duty-row{
    min-height:48px;
    padding:5px 14px;
    column-gap:14px;
  }
  .next-duty-name{
    font-size:13px;
    line-height:1.15;
    padding-bottom:6px;
  }
  .next-duty-item{
    gap:3px;
  }
  .next-duty-item small{
    font-size:9px;
    line-height:1.15;
  }
  .next-duty-item b{
    font-size:12px;
    line-height:1.2;
  }
  .next-duty-item em,
  .next-duty-change-item .next-duty-date,
  .next-duty-off-item .next-duty-off{
    font-size:9px;
    line-height:1.2;
  }
  .next-duty-off-item{
    padding-left:12px;
  }
}


/* PC ONLY — Next Duty: final typography balance. */
@media(min-width:901px){
  .next-duty-row{
    min-height:50px;
    padding:5px 16px;
    column-gap:16px;
  }
  .next-duty-name{
    font-size:15px;
    line-height:1.2;
    padding-bottom:7px;
  }
  .next-duty-item{
    gap:4px;
  }
  .next-duty-item small{
    font-size:12px;
    line-height:1.2;
  }
  .next-duty-item b{
    font-size:14px;
    line-height:1.25;
  }
  .next-duty-item em,
  .next-duty-change-item .next-duty-date,
  .next-duty-off-item .next-duty-off{
    font-size:14px;
    line-height:1.25;
  }
  .next-duty-off-item{
    padding-left:14px;
  }
}


/* MOBILE — Next Duty typography requested */
@media(max-width:900px){
  .next-duty-name{font-size:10px !important;}
  .next-duty-item small{font-size:8px !important;}
  .next-duty-item b{font-size:8px !important;}
  .next-duty-item em{font-size:8px !important;}
  .next-duty-change-item .next-duty-date,
  .next-duty-off-item .next-duty-off{font-size:8px !important;}
}


/* =========================================================
   MONTH HISTORY — compact archive navigation
   ========================================================= */
.month-history{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:3px;
  margin-top:6px;
  min-height:22px;
}
.month-history button{
  width:22px;
  height:22px;
  min-height:22px;
  padding:0;
  border:1px solid rgba(92,72,48,.24);
  background:rgba(255,248,235,.62);
  color:#5B4632;
  border-radius:6px;
  font:700 13px/20px inherit;
  text-align:center;
  cursor:pointer;
  transition:.15s ease;
}
.month-history button:hover:not(:disabled){
  background:rgba(255,244,218,.9);
  border-color:rgba(92,72,48,.38);
  transform:translateY(-1px);
}
.month-history button:active:not(:disabled){
  transform:translateY(0);
}
.month-history button:disabled{
  opacity:.35;
  cursor:default;
}
.month-history button[hidden]{display:none}
.month-history > span{
  min-width:78px;
  color:#6F6255;
  font-size:8px;
  font-weight:800;
  line-height:22px;
  text-align:center;
  white-space:nowrap;
}
.archive-view .today-jump{
  cursor:default;
}
.archive-view .today-jump::after{
  content:" · পূর্ব মাস";
}
.archive-view .duty-status.archive-status{
  color:#665C50 !important;
  -webkit-text-fill-color:#665C50 !important;
}
.archive-view .next-duty{
  display:none !important;
}

html body.ink-mode .month-history button{
  background:#E7E4DB !important;
  border-color:#B0ADA4 !important;
  color:#292824 !important;
}
html body.ink-mode .month-history > span{
  color:#5E5B54 !important;
}

@media(max-width:900px){
  .month-history{
    gap:3px;
    margin-top:5px;
  }
  .month-history button{
    width:20px;
    height:20px;
    min-height:20px;
    font-size:12px;
    line-height:18px;
    border-radius:5px;
  }
  .month-history > span{
    min-width:72px;
    font-size:7px;
    line-height:20px;
  }
}


/* MONTH HISTORY — typography balance */
.month-history > span{
  min-width:86px;
  font-size:11px;
  font-weight:700;
  line-height:22px;
  letter-spacing:.01em;
  color:#5F5144;
}
@media(max-width:900px){
  .month-history > span{
    min-width:82px;
    font-size:10px;
    font-weight:700;
    line-height:20px;
  }
}
html body.ink-mode .month-history > span{
  color:#3F3D38 !important;
}



/* MONTH HISTORY — tighter minimal spacing */
.month-history{gap:2px;}
.month-history > span{min-width:64px;font-size:13px;font-weight:700;line-height:22px;letter-spacing:0;}
@media(max-width:900px){.month-history{gap:1px;}.month-history > span{min-width:0;width:auto;font-size:12px;font-weight:700;line-height:20px;}}
html body.ink-mode .month-history > span{color:#3F3D38 !important;}