/* bisgandu.com/beta — the new look (the "HML look" shared with rc, dc and
   the HML Map). Loaded only by /beta (beta_look.go), after the page's own
   styles; every rule is scoped to html[data-look="beta"], so the live page
   is never affected. Light is the default; dark keeps the page's own dark
   colours with the new lettering and shapes. */

/* ---------- Colours (light) ---------- */
html[data-look="beta"][data-theme="light"]{
  --bg:#F6F2EA;
  --panel:#FFFFFF;
  --panel-alt:#F4F1EB;
  --border:#ECE7DD;
  --border-2:#E1DCD2;
  --ink:#15212A;
  --muted:#55616A;
  --muted-dim:#B9B3A8;
  --muted-dim-text:#6B767E;
  --amber:#B4690A;
  --amber-dim:#FCF0DD;
  --indigo:#2F6A74;
  --indigo-text:#2F6A74;
  --indigo-dim:#E6EEF2;
  --emg:#15924A;
  --emg-dim:#E3F3E8;
  --today:#C0392B;
  --danger:#C0392B;
  --shadow-sm:0 1px 2px rgba(21,33,42,.06);
  --shadow-md:0 1px 2px rgba(21,33,42,.06), 0 6px 16px -8px rgba(21,33,42,.12);
  --shadow-glow-indigo:0 0 0 1px rgba(47,106,116,.15), 0 8px 20px -8px rgba(47,106,116,.2);
  --wm-accent:#2F6A74;
  /* duty chips */
  --chip-even-bg:#E6EEF2; --chip-even-fg:#2F6A74;
  --chip-night-bg:#E8EBF7; --chip-night-fg:#3B4C8C;
  --chip-emg-bg:#FCF0DD;  --chip-emg-fg:#9A5A08; --chip-emg-edge:rgba(180,105,10,.35);
  --fri-bg:#FDF3F1; --today-bg:#EEF4F5;
  color-scheme:light;
}
html[data-look="beta"]:not([data-theme="light"]){
  --chip-even-bg:rgba(122,162,255,.14); --chip-even-fg:#9DB8FF;
  --chip-night-bg:rgba(61,214,140,.13); --chip-night-fg:#5FDDA0;
  --chip-emg-bg:rgba(240,179,74,.12);   --chip-emg-fg:#F0B34A; --chip-emg-edge:rgba(240,179,74,.4);
  --fri-bg:rgba(255,107,107,.07); --today-bg:rgba(122,162,255,.07);
  --border-2:#2C3138;
  --radius:16px;
}
html[data-look="beta"]{ --radius:16px; --font-sans:'Onest',system-ui,sans-serif; --font-mono:'Onest',system-ui,sans-serif; }

/* ---------- One typeface, plain figures ---------- */
/* Onest's hyphen sits wide ("E - Night"); a plain system hyphen keeps
   "E-Night" and "On-Call" reading as one word. */
@font-face{ font-family:'BL Hyphen'; src:local('Roboto'), local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Segoe UI'), local('DejaVu Sans'); unicode-range:U+2D, U+2010-2011; }
html[data-look="beta"] body,
html[data-look="beta"] body *:not(svg):not(svg *){
  font-family:'BL Hyphen','Onest',system-ui,-apple-system,'Segoe UI',sans-serif !important;
}
html[data-look="beta"] body{ font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; background:var(--bg); }

/* ---------- Header ---------- */
html[data-look="beta"] body > header{ background:var(--panel); border-bottom:1px solid var(--border); padding:14px 24px; }
html[data-look="beta"] h1.board-title.wm{
  display:flex; align-items:center; gap:10px; margin:0;
  font-size:19px !important; font-weight:700; letter-spacing:-.01em; color:var(--ink); text-transform:none;
}
html[data-look="beta"] .bl-mark{
  width:34px; height:34px; border-radius:10px; background:var(--indigo); color:#fff;
  display:grid; place-items:center; font-size:16px; font-weight:800; flex:none;
}
html[data-look="beta"]:not([data-theme="light"]) .bl-mark{ background:#3B7F8A; }
html[data-look="beta"] .admin-btn{
  margin-top:0; height:38px; padding:0 14px; border-radius:999px; font-size:13.5px; font-weight:600;
  background:var(--panel); border:1px solid var(--border-2); color:var(--ink);
}
html[data-look="beta"] .admin-btn:hover{ transform:none; border-color:var(--indigo); }
html[data-look="beta"] .admin-btn.logged-in{ background:var(--indigo-dim); border-color:transparent; color:var(--indigo-text); }
html[data-look="beta"] #themeToggleBtn{ width:38px; padding:0; justify-content:center; }

/* The heavy admin strip becomes a quiet line: a small badge and the buttons. */
html[data-look="beta"] .admin-bar.show{
  background:transparent; border:0; padding:12px 24px 0; max-width:1180px; gap:8px;
}
html[data-look="beta"] .admin-bar .msg{ font-size:0; display:inline-flex; align-items:center; gap:8px; }
html[data-look="beta"] .admin-bar .msg::before{
  font-size:12.5px; font-weight:700; border-radius:999px; padding:4px 11px; line-height:1.3;
}
html[data-look="beta"] #adminBar .msg::before{ content:"Admin · changes save straight away"; color:var(--amber); background:var(--amber-dim); }
html[data-look="beta"] #guestPreviewBar .msg::before{ content:"Viewing as a guest sees it"; color:var(--muted); background:var(--panel-alt); }
html[data-look="beta"] .admin-bar button{
  font-size:13px; font-weight:600; padding:7px 14px; border-radius:999px;
  background:var(--panel); border:1px solid var(--border-2); color:var(--ink);
}
html[data-look="beta"] #exitGuestPreviewBtn{ background:var(--indigo); border-color:var(--indigo); color:#fff; }

/* ---------- Tabs (desktop) ---------- */
html[data-look="beta"] nav{ margin-top:18px; }
html[data-look="beta"] .nav-inner{ background:transparent; border:0; padding:0; gap:4px; box-shadow:none; }
html[data-look="beta"] .nav-inner button{
  font-size:15px; font-weight:600; color:var(--muted); padding:9px 14px; border-radius:10px; border:0;
}
html[data-look="beta"] .nav-inner button svg{ width:17px; height:17px; opacity:.85; }
html[data-look="beta"] .nav-inner button:hover{ background:var(--panel-alt); color:var(--ink); }
html[data-look="beta"] .nav-inner button.active{
  background:var(--indigo-dim); color:var(--indigo-text); box-shadow:none; border:0; font-weight:700;
}
html[data-look="beta"] .nav-inner button.active svg{ stroke:var(--indigo-text); opacity:1; }
html[data-look="beta"] .nl-short{ display:none; }

/* ---------- Cards: fewer lines, more space ---------- */
html[data-look="beta"] .panel{
  border:0; border-radius:18px; box-shadow:var(--shadow-sm); padding:24px 26px;
}
html[data-look="beta"]:not([data-theme="light"]) .panel{ border:1px solid var(--border); }
html[data-look="beta"] .panel:hover{ box-shadow:var(--shadow-sm); border-color:var(--border); }
html[data-look="beta"] .panel h2{ font-size:20px; font-weight:800; letter-spacing:-.015em; }

/* Today's Overview / Oncall / Reconnection switch */
html[data-look="beta"] .today-subnav{ background:var(--panel-alt); border:0; border-radius:14px; padding:5px; }
html[data-look="beta"] .today-subnav button{ font-size:14.5px; font-weight:600; border-radius:10px; }
html[data-look="beta"] .subnav-pill{ border:0; border-radius:10px; box-shadow:0 1px 3px rgba(21,33,42,.12); }
html[data-look="beta"] .subnav-count{ font-size:12px; font-weight:700; background:var(--panel-alt); }
html[data-look="beta"] .today-subnav button.active .subnav-count{ background:var(--indigo-dim); color:var(--indigo-text); }

/* Day header: "Thu 29 Oct" in plain lettering */
html[data-look="beta"] .date-big{ font-size:24px; font-weight:800; letter-spacing:-.02em; }
html[data-look="beta"] .nav-day button.pager, html[data-look="beta"] button.pager{
  background:var(--panel); border:1px solid var(--border-2); border-radius:10px; color:var(--ink);
  width:38px; height:38px; font-size:18px;
}
html[data-look="beta"] .date-tag{
  font-size:13px; font-weight:700; letter-spacing:0; text-transform:none;
  border:0; border-radius:999px; padding:5px 12px;
}
html[data-look="beta"] .holiday-toggle-btn{ font-size:13px; border-radius:999px; white-space:nowrap; }
html[data-look="beta"] .date-tag{ white-space:nowrap; }
html[data-look="beta"] .manage-day-btn{ font-size:13.5px; font-weight:600; border-radius:999px; padding:8px 14px; }

/* Oncall timeline */
html[data-look="beta"] .tl-time span{ font-size:13.5px; font-weight:600; color:var(--muted); }
html[data-look="beta"] .tl-title{ font-size:17px; font-weight:800; letter-spacing:-.01em; }
html[data-look="beta"] .tl-count{ font-size:13.5px; color:var(--muted); }
html[data-look="beta"] .duty-list{ border:0; border-radius:0; display:flex; flex-direction:column; gap:6px; overflow:visible; }
html[data-look="beta"] .duty-row{
  background:var(--bg); border:0; border-radius:12px; padding:12px 14px;
}
html[data-look="beta"]:not([data-theme="light"]) .duty-row{ background:var(--panel-alt); }
html[data-look="beta"] .duty-row:hover{ background:var(--indigo-dim); padding-left:14px; }
html[data-look="beta"] .duty-row .name{ font-size:16px; font-weight:600; }
/* Full names, never cut short: the name wraps if it must, the tag keeps its size. */
html[data-look="beta"] .tl-grp .duty-row > span:first-child{ min-width:0; flex:1 1 auto; }
html[data-look="beta"] .tl-grp .duty-row > span:last-child{ flex:none; margin-left:10px; }
html[data-look="beta"] .tl-grp .duty-row .name{ white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; line-height:1.3; }

html[data-look="beta"] .phase-divider{ display:none; }
html[data-look="beta"] .empty-note{ border:0; border-radius:12px; font-style:normal; font-size:14px; }
html[data-look="beta"] .badge{
  text-transform:none; letter-spacing:0; font-size:13px; font-weight:600; padding:5px 11px;
}

/* ---------- Duty Table ---------- */
html[data-look="beta"] .board-wrap{ border:0; border-radius:14px; }
html[data-look="beta"] table.board{ font-size:14px; }
html[data-look="beta"] table.board th, html[data-look="beta"] table.board td{
  border-right:0; border-left:0; border-bottom:1px solid var(--border);
}
html[data-look="beta"] table.board th{ background:var(--panel); color:var(--ink); padding:10px 6px; line-height:1.15; }
html[data-look="beta"] table.board th .bd-wd{ display:block; font-size:12.5px; font-weight:600; color:var(--muted); text-transform:none; letter-spacing:0; }
html[data-look="beta"] table.board th .bd-d{ font-size:18px; font-weight:800; }
html[data-look="beta"] table.board th .bd-m{ font-size:12.5px; font-weight:600; color:var(--muted); margin-left:3px; text-transform:none; letter-spacing:0; opacity:1; }
html[data-look="beta"] table.board th .bd-m::before{ content:none; }
html[data-look="beta"] table.board th.past-col .bd-d{ font-size:14px; }
html[data-look="beta"] table.board td.name-cell, html[data-look="beta"] table.board th.name-th{
  width:170px; min-width:170px; max-width:170px; font-size:14.5px; font-weight:700; padding-left:16px; white-space:normal;
}
html[data-look="beta"] table.board th.name-th{ background:var(--panel); color:var(--muted); font-size:13px; font-weight:600; }
html[data-look="beta"] table.board tbody tr td,
html[data-look="beta"] table.board tbody tr:nth-child(even) td{ background:transparent; }
html[data-look="beta"] table.board tbody tr td.name-cell,
html[data-look="beta"] table.board tbody tr:nth-child(even) td.name-cell{ background:var(--panel); }
html[data-look="beta"] table.board tbody tr:hover td,
html[data-look="beta"] table.board tbody tr:hover td.name-cell{ background:var(--panel-alt); }
/* Today: a soft tint and one stripe on top, no red box */
html[data-look="beta"] table.board th.today-col{
  background:var(--today-bg); color:var(--indigo-text); border:0; border-bottom:1px solid var(--border);
}
html[data-look="beta"] table.board th.today-col .bd-wd,
html[data-look="beta"] table.board th.today-col .bd-d,
html[data-look="beta"] table.board th.today-col .bd-m{ color:var(--indigo-text); }
html[data-look="beta"] table.board th.today-col::after{ background:var(--indigo); height:3px; }
html[data-look="beta"] table.board td.today-col,
html[data-look="beta"] table.board tbody tr:nth-child(even) td.today-col{ background:var(--today-bg); border-left:0; border-right:0; }
/* Friday and holidays: one soft red, the same everywhere */
html[data-look="beta"] table.board th.friday-col,
html[data-look="beta"] table.board th.friday-col .bd-wd,
html[data-look="beta"] table.board th.friday-col .bd-m{ color:var(--today); }
html[data-look="beta"] table.board th.friday-col:not(.today-col){ background:var(--fri-bg); }
html[data-look="beta"] table.board td.friday-col:not(.today-col),
html[data-look="beta"] table.board tbody tr:nth-child(even) td.friday-col:not(.today-col),
html[data-look="beta"] table.board tbody tr:hover td.friday-col:not(.today-col){ background:var(--fri-bg); }
/* Duty chips: bigger, normal case, soft colours */
html[data-look="beta"] .cell-tag{
  font-size:13px; font-weight:600; letter-spacing:0; text-transform:none;
  padding:6px 10px; border-radius:8px; min-width:74px; box-shadow:none;
}
html[data-look="beta"] .cell-tag.even{ background:var(--chip-even-bg); color:var(--chip-even-fg); box-shadow:none; }
html[data-look="beta"] .cell-tag.night{ background:var(--chip-night-bg); color:var(--chip-night-fg); box-shadow:none; }
html[data-look="beta"] .cell-tag.emg-even, html[data-look="beta"] .cell-tag.emg-night{
  background:var(--chip-emg-bg); color:var(--chip-emg-fg); box-shadow:inset 0 0 0 1px var(--chip-emg-edge);
}
html[data-look="beta"] table.board td.past-col .cell-tag{ font-size:11px; width:auto; min-width:0; padding:4px 5px; }
html[data-look="beta"] .cell-tag-stack{ gap:4px; }
html[data-look="beta"] .legend-row{ font-size:13.5px; gap:20px; }

/* Controls */
html[data-look="beta"] .chip{
  font-size:13.5px; font-weight:600; border-radius:999px; padding:8px 14px;
  background:var(--panel); border:1px solid var(--border-2); color:var(--ink);
}
html[data-look="beta"] input[type="text"], html[data-look="beta"] input[type="search"],
html[data-look="beta"] input[type="date"], html[data-look="beta"] select, html[data-look="beta"] textarea{
  border-radius:10px;
}
html[data-look="beta"] #staffFilter{ background:var(--panel); border:1px solid var(--border-2); height:40px; font-size:15px; }

/* ---------- Footer ---------- */
html[data-look="beta"] footer{ font-size:13.5px; color:var(--muted); }
html[data-look="beta"] .bl-back{
  display:inline-block; margin-top:10px; font-size:13.5px; font-weight:600; color:var(--indigo-text); text-decoration:none;
}

/* ---------- Phones: tabs at the bottom, where thumbs are ---------- */
@media (max-width: 640px){
  html[data-look="beta"] body > header{ padding:12px 16px; }
  html[data-look="beta"] h1.board-title.wm{ font-size:17px !important; }
  html[data-look="beta"] .bl-mark{ width:30px; height:30px; font-size:14px; border-radius:9px; }
  html[data-look="beta"] .admin-btn{ height:36px; }
  html[data-look="beta"] .admin-bar.show{ padding:10px 12px 0; flex-wrap:nowrap; }
  html[data-look="beta"] #adminBar .msg::before{ content:"Admin"; }
  html[data-look="beta"] #guestPreviewBar .msg::before{ content:"Guest view"; }
  html[data-look="beta"] .admin-bar .btns{ flex-wrap:nowrap; gap:6px; }
  html[data-look="beta"] .admin-bar button{ font-size:12.5px; padding:6px 11px; white-space:nowrap; }
  /* Messages pop up above the tab bar, not behind it. */
  html[data-look="beta"] #toast{ bottom:calc(92px + env(safe-area-inset-bottom, 0px)); }
  html[data-look="beta"] .dv-banner{ bottom:calc(88px + env(safe-area-inset-bottom, 0px)); }

  html[data-look="beta"] nav{
    position:fixed; left:0; right:0; bottom:0; z-index:45; margin:0; max-width:none;
    padding:6px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    background:var(--panel); border-top:1px solid var(--border);
    box-shadow:0 -4px 16px -10px rgba(21,33,42,.18);
  }
  html[data-look="beta"] .nav-inner{ display:flex; width:100%; overflow:visible; gap:0; }
  html[data-look="beta"] .nav-inner button{
    flex:1 1 0; min-width:0; flex-direction:column; gap:3px; padding:4px 2px;
    font-size:11.5px; font-weight:600; background:transparent !important; color:var(--muted-dim-text);
  }
  html[data-look="beta"] .nav-inner button svg{
    width:48px; height:30px; padding:6px 15px; box-sizing:border-box; border-radius:15px; opacity:1;
  }
  html[data-look="beta"] .nav-inner button.active{ color:var(--indigo-text); }
  html[data-look="beta"] .nav-inner button.active svg{ background:var(--indigo-dim); }
  html[data-look="beta"] .nl-long{ display:none; }
  html[data-look="beta"] .nl-short{ display:inline; }
  html[data-look="beta"] main{ padding:16px 12px 110px; }
  html[data-look="beta"] footer{ padding-bottom:96px; }

  html[data-look="beta"] .panel{ padding:16px; border-radius:16px; }
  /* Oncall and Reconnection stay on a white card, like the other apps. */
  html[data-look="beta"] #todaySubOncall > .panel,
  html[data-look="beta"] #todaySubReconnection > .panel{ background:var(--panel); padding:16px 14px; border-radius:18px; box-shadow:var(--shadow-sm); }
  html[data-look="beta"] table.board th .bd-m{ display:block; margin:0; font-size:12px; }
  html[data-look="beta"] .panel h2{ font-size:18px; color:var(--ink); font-weight:800; margin-bottom:10px; }
  html[data-look="beta"] .date-big{ font-size:21px; }
  html[data-look="beta"] .duty-row .name{ font-size:15.5px; }
  html[data-look="beta"] table.board td.name-cell, html[data-look="beta"] table.board th.name-th{
    width:124px; min-width:124px; max-width:124px; font-size:13.5px; padding-left:10px;
  }
  html[data-look="beta"] .cell-tag{ min-width:0; font-size:12.5px; padding:6px 8px; }
}

/* Duty Table: the name search and "Show past dates" are for the admin only;
   everyone else sees a clean table with just "Jump to today". */
html[data-look="beta"] body:not(.admin-mode) #staffFilter,
html[data-look="beta"] body:not(.admin-mode) #togglePastBtn{ display:none !important; }

/* Duty Table: the name search, "Show past dates" and "Jump to today" are
   for the admin only; everyone else gets just the table. */
html[data-look="beta"] body:not(.admin-mode) #view-board .bd-controls{ display:none; }

/* Work Schedule: just the calendar — no search, Calendar/List switch or
   "Jump to Cycle Start". */
html[data-look="beta"] #view-works .controls-row:has(#taskSearch){ display:none; }

/* ---------- Today: the day at a glance ---------- */
#blDay{ display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
#blDayExtras > .panel{ margin-bottom:12px; }
.bl-strip{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px 2px 4px; scroll-behavior:smooth; }
.bl-strip::-webkit-scrollbar{ display:none; }
.bl-day{ flex:0 0 56px; display:flex; flex-direction:column; align-items:center; gap:1px; padding:8px 0; border:0; border-radius:14px;
  background:var(--panel); color:var(--ink); box-shadow:var(--shadow-sm); cursor:pointer; font:inherit; }
.bl-day span{ font-size:12.5px; font-weight:600; color:var(--muted); }
.bl-day b{ font-size:20px; font-weight:800; }
.bl-day.past b, .bl-day.past span{ color:var(--muted-dim-text); }
.bl-day.off{ background:var(--fri-bg); }
.bl-day.off span, .bl-day.off b{ color:var(--today); }
.bl-day.on{ background:var(--indigo); box-shadow:none; }
.bl-day.on span, .bl-day.on b{ color:#fff; }
html[data-look="beta"]:not([data-theme="light"]) .bl-day.on span, html[data-look="beta"]:not([data-theme="light"]) .bl-day.on b{ color:#0A0B0D; }
.bl-dayhead{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:2px 4px 0; }
.bl-daytitle{ font-size:20px; font-weight:800; letter-spacing:-.015em; }
.bl-eyebrow{ display:block; font-size:12.5px; font-weight:600; color:var(--muted); letter-spacing:0; }
.bl-pill{ font-size:13px; font-weight:700; border-radius:999px; padding:5px 12px; white-space:nowrap; }
.bl-pill.ok{ color:var(--emg); background:var(--emg-dim); }
.bl-pill.warn{ color:var(--amber); background:var(--amber-dim); }
.bl-pill.hol{ color:var(--today); background:var(--fri-bg); }
.bl-card{ background:var(--panel); border-radius:18px; box-shadow:var(--shadow-sm); padding:12px 16px 10px; }
html[data-look="beta"]:not([data-theme="light"]) .bl-card{ border:1px solid var(--border); }
.bl-card-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px; }
.bl-chip{ font-size:14px; font-weight:700; border-radius:8px; padding:4px 10px; }
.bl-card-time{ font-size:14px; color:var(--muted); text-align:right; }
.bl-row{ display:flex; align-items:center; gap:12px; padding:6px 0; }
.bl-ava{ width:32px; height:32px; flex:none; border-radius:16px; background:var(--panel-alt); color:var(--muted); display:grid; place-items:center; font-size:12px; font-weight:700; }
.bl-name{ flex:1; min-width:0; font-size:16px; font-weight:600; line-height:1.3; overflow-wrap:anywhere; }
.bl-tag{ font-size:13px; font-weight:700; white-space:nowrap; }
.bl-empty{ font-size:15px; color:var(--today); padding:6px 0; }
.bl-recon{ padding:14px 16px; }
.bl-recon-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bl-recon-t{ font-size:16.5px; font-weight:700; }
.bl-recon-s{ font-size:14px; color:var(--muted); margin-top:1px; }
.bl-link{ border:0; background:none; font:inherit; font-size:14.5px; font-weight:700; color:var(--indigo-text); cursor:pointer; white-space:nowrap; padding:6px 0; }
.bl-areas{ margin-top:12px; border-top:1px solid var(--border); }
.bl-area{ display:flex; align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid var(--panel-alt); }
.bl-area:last-child{ border-bottom:0; padding-bottom:2px; }
.bl-area .bl-name{ font-size:16px; font-weight:600; line-height:1.3; }
.bl-area .bl-tag{ font-size:13px; font-weight:600; }
.bl-area-n{ width:68px; flex:none; font-size:13.5px; font-weight:700; color:var(--indigo-text); }
/* The day view replaces the old Today header, switches and Oncall pane for
   everyone; the admin keeps them underneath for editing. */
html[data-look="beta"] body:not(.admin-mode) #view-today > .td-head,
html[data-look="beta"] body:not(.admin-mode) #view-today > #todaySubnav,
html[data-look="beta"] body:not(.admin-mode) #todaySubOverview,
html[data-look="beta"] body:not(.admin-mode) #todaySubOncall,
html[data-look="beta"] body:not(.admin-mode) #todaySubReconnection{ display:none !important; }
html[data-look="beta"] body.admin-mode #view-today > .td-head{ display:none; }
@media (min-width: 900px){
  #blDay{ max-width:760px; }
  .bl-day{ flex-basis:64px; }
}

/* Work Schedule header: one tidy line of dates, centred between the arrows,
   with a small cycle tag under it. */
html[data-look="beta"] #view-works .nav-day > div:first-child{ width:100%; }
html[data-look="beta"] #worksCycleLabel{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
html[data-look="beta"] #worksCycleLabel .bl-range{ font-size:20px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; }
html[data-look="beta"] .bl-cyc{ font-size:12.5px; font-weight:700; border-radius:999px; padding:3px 10px; }
html[data-look="beta"] .bl-cyc.ok{ color:var(--emg); background:var(--emg-dim); }
html[data-look="beta"] .bl-cyc.other{ color:var(--amber); background:var(--amber-dim); }

/* "You're on duty tonight" — the signed-in person's own duty, above the days. */
.bl-me{ display:flex; align-items:center; gap:12px; background:var(--indigo); color:#fff; border-radius:18px; padding:14px 16px; }
.bl-me-ava{ width:40px; height:40px; flex:none; border-radius:20px; background:rgba(255,255,255,.18); display:grid; place-items:center; font-size:14px; font-weight:700; }
.bl-me-txt{ flex:1; min-width:0; }
.bl-me-t{ font-size:16px; font-weight:800; }
.bl-me-s{ font-size:13.5px; opacity:.88; margin-top:1px; }
.bl-me-when{ font-size:12.5px; font-weight:700; background:rgba(255,255,255,.18); border-radius:999px; padding:4px 10px; white-space:nowrap; }
html[data-look="beta"]:not([data-theme="light"]) .bl-me{ color:#0A0B0D; }
html[data-look="beta"]:not([data-theme="light"]) .bl-me-ava, html[data-look="beta"]:not([data-theme="light"]) .bl-me-when{ background:rgba(0,0,0,.14); }
/* "You" next to your own name on the cards */
.bl-you{ display:inline-block; font-size:12px; font-weight:700; color:#fff; background:var(--indigo); border-radius:999px; padding:2px 9px; margin-left:6px; vertical-align:2px; }
html[data-look="beta"]:not([data-theme="light"]) .bl-you{ color:#0A0B0D; }