/* ============================================================
   Schedule app — same world as the landing page: black on light
   glass, floating over the video. base.css holds the shared system.
   ============================================================ */

body { min-height: 100%; }

.wrap { position: relative; z-index: 10; max-width: 1180px; margin: 0 auto; padding-inline: 1.25rem; }
@media (min-width: 640px) { .wrap { padding-inline: 1.5rem; } }
@media (min-width: 768px) { .wrap { padding-inline: 3rem; } }

.nav { max-width: 1180px; margin: 0 auto; }

/* ---------- page head ---------- */
.appHead { padding-block: 0.5rem 1.25rem; }
.appHead h1 { font-size: clamp(1.75rem, 5vw, 2.75rem); line-height: 1.1; margin-top: 0.4rem; }
.appHead .eyebrow { display: block; }

/* ---------- hero: the one truly refractive surface on the page ---------- */
.heroCard {
  position: relative;
  border-radius: 40px;
  overflow: hidden;
  background: var(--panel);
  -webkit-backdrop-filter: var(--panel-blur);
  backdrop-filter: var(--panel-blur);
  border: 1px solid var(--panel-line);
  animation: rise 900ms var(--ease) both;
}
/* The next class tints the card rather than wearing a stripe down its edge. */
.heroCard { background: color-mix(in srgb, var(--hc, transparent) 6%, var(--panel)); transition: background 500ms var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

.heroIn { position: relative; z-index: 2; padding: 1.75rem;
          display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.heroMain { flex: 1 1 280px; min-width: 0; }
.kicker { display: block; font-size: 0.8125rem; color: var(--ink-3); }
.countdown { display: flex; align-items: flex-end; gap: 1.25rem; margin-top: 0.75rem; flex-wrap: wrap; }
.cd-unit { display: flex; flex-direction: column; align-items: flex-start; min-width: 52px; }
.cd-unit b { font-size: clamp(2.25rem, 7vw, 3.25rem); font-weight: 300; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.cd-unit span { font-size: 0.75rem; color: var(--ink-3); margin-top: 0.5rem; }
.cd-unit.is-ticking b { animation: tick 0.28s var(--spring); }
@keyframes tick { 0% { transform: translateY(-3px) scale(1.04); } 100% { transform: none; } }

.heroTitle { font-size: clamp(1.125rem, 2.6vw, 1.5rem); margin-top: 1.25rem; line-height: 1.2; }
.heroMeta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.55rem; font-size: 0.8125rem; color: var(--ink-2); align-items: center; }
.heroMeta .mono { color: var(--ink); font-variant-numeric: tabular-nums; }
.nowbar { height: 3px; border-radius: 99px; background: var(--hair); overflow: hidden; margin-top: 1rem; }
.nowbar i { display: block; height: 100%; border-radius: 99px; background: var(--hc, var(--ink)); transition: width 1s linear; }

.heroRoom { display: flex; align-items: center; gap: 0.875rem; flex: 0 0 auto; }
.bldg { font-size: 2rem; font-weight: 300; line-height: 1; width: 64px; height: 64px; display: grid; place-items: center;
        border-radius: 18px; background: var(--panel-2); border: 1px solid var(--hair-2); color: var(--ink); }
.heroRoom .lab { font-size: 0.75rem; color: var(--ink-3); }
.heroRoom .no { font-size: 1.125rem; margin-top: 0.2rem; font-variant-numeric: tabular-nums; }

/* ---------- stats ---------- */
.statstrip { display: flex; flex-wrap: wrap; align-items: stretch; margin-top: 0.5rem;
             background: var(--panel); border: 1px solid var(--panel-line); border-radius: 18px;
             -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur); }
.stat { flex: 1 1 130px; display: flex; flex-direction: column; justify-content: center; gap: 0.15rem;
        padding: 0.85rem 1.1rem; border-left: 1px solid var(--hair); }
.stat:first-child { border-left: 0; }
.stat b { font-size: 1.125rem; font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat > span { font-size: 0.75rem; color: var(--ink-3); }
.stat .spark { display: flex; gap: 3px; margin-top: 0.35rem; }
.stat .spark i { width: 5px; height: 5px; border-radius: 50%; background: var(--hair-2); }
.stat .spark i.on { background: var(--done); }
.stat--link { cursor: pointer; text-align: left; font: inherit; transition: background 200ms; }
.stat--link:hover { background: var(--panel-solid); }
.stat--ring { flex: 1 1 200px; flex-direction: row; align-items: center; gap: 0.875rem; }
.stat--ring > div { display: flex; flex-direction: column; gap: 0.15rem; }
.stat--ring b { font-size: 1.75rem; font-weight: 300; letter-spacing: -0.03em; }
.ringwrap { position: relative; width: 44px; height: 44px; flex: 0 0 44px; }
.ringwrap svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.ringwrap .track { fill: none; stroke: var(--hair); stroke-width: 3; }
.ringwrap .fill { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 900ms var(--ease); }
.ringwrap .pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.625rem; font-variant-numeric: tabular-nums; }

/* ---------- controls ---------- */
.controls { position: sticky; top: 0; z-index: 25; padding-block: 0.75rem; margin-top: 1.25rem;
            background: linear-gradient(var(--panel-solid) 72%, transparent);
            -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tabs { display: flex; gap: 2px; padding: 3px; overflow-x: auto; scrollbar-width: none;
        background: var(--panel-2); border: 1px solid var(--panel-line); border-radius: 999px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 1 0 auto; white-space: nowrap; border: 0; background: transparent; color: var(--ink-2);
       font-size: 0.8125rem; letter-spacing: 0.01em; padding: 0.5rem 1.05rem; border-radius: 999px; cursor: pointer;
       display: flex; align-items: center; gap: 0.5rem; justify-content: center; transition: color 200ms, background 300ms var(--ease); }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--panel-solid); color: var(--ink); }
.tab kbd { font-size: 0.625rem; color: var(--ink-3); border: 1px solid var(--hair); border-radius: 3px; padding: 0 3px; line-height: 1.5; font-family: inherit; }
.cnt { font-size: 0.6875rem; border-radius: 999px; padding: 1px 7px; background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); font-variant-numeric: tabular-nums; }
.cnt.zero { background: transparent; color: var(--ink-3); border-color: var(--hair); }

.filterbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.6rem; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem;
        background: var(--panel-2); border: 1px solid var(--panel-line); color: var(--ink-2);
        border-radius: 999px; padding: 0.3rem 0.7rem 0.3rem 0.55rem; font-size: 0.75rem; letter-spacing: 0.02em;
        transition: opacity 200ms, transform 200ms var(--spring), background 200ms; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; background: var(--dot); }
.chip.intensive .dot { border-radius: 2px; }
.chip[aria-pressed="true"] { background: var(--panel-solid); color: var(--ink); border-color: var(--hair-2); }
.chip[aria-pressed="false"] { opacity: 0.42; }
.chip:hover { opacity: 0.72; }
.searchwrap { flex: 1 1 170px; min-width: 150px; display: flex; position: relative; }
.searchwrap input { flex: 1; font: inherit; font-size: 0.8125rem; padding: 0.45rem 0.7rem 0.45rem 2rem;
                    border-radius: 999px; border: 1px solid var(--panel-line); background: var(--panel-solid); color: var(--ink); }
.searchwrap input::placeholder { color: var(--ink-3); }
.searchwrap svg { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; fill: none; stroke: var(--ink-3); stroke-width: 1.5; pointer-events: none; }
.mini { cursor: pointer; font-size: 0.75rem; background: var(--panel-2); border: 1px solid var(--panel-line);
        color: var(--ink-2); border-radius: 999px; padding: 0.45rem 0.9rem; white-space: nowrap;
        transition: background 200ms, color 200ms; }
.mini[aria-pressed="true"] { background: var(--ink); color: var(--menu-bg); border-color: var(--ink); }

/* ---------- buttons ---------- */
.iconbtn { display: grid; place-items: center; width: 40px; height: 40px; flex: none;
           border: 1px solid var(--panel-line); background: var(--panel-2); border-radius: 50%;
           cursor: pointer; color: var(--ink-2); text-decoration: none;
           transition: transform 200ms var(--spring), color 200ms, border-color 200ms; }
.iconbtn:hover { color: var(--ink); border-color: var(--hair-2); }
.iconbtn:active { transform: scale(0.94); }
.iconbtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.btn { cursor: pointer; border-radius: 999px; padding: 0.5rem 1.1rem; font-size: 0.8125rem;
       border: 1px solid var(--ink); background: var(--ink); color: var(--menu-bg);
       transition: opacity 250ms, transform 200ms var(--spring); }
.btn:hover { opacity: 0.78; }
.btn:active { transform: scale(0.97); }
.btn.ghost { background: var(--panel-solid); color: var(--ink); border-color: var(--hair-2); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- panels ---------- */
.panel { padding-block: 1.25rem 4rem; animation: panelIn 340ms var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.card { padding: 1.4rem 1.6rem; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 24px;
        -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur); }
.card + .card { margin-top: 0.75rem; }
.card h3 { font-size: 1rem; color: var(--ink); }
.card .sub { font-size: 0.8125rem; color: var(--ink-2); margin: 0.5rem 0 0; max-width: 64ch; line-height: 1.6; }

/* ---------- week grid ---------- */
.weekhead { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.9rem; }
.weekhead h2 { font-size: 1.125rem; flex: 1; min-width: 0; }
.weekhead .sub { font-size: 0.75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gridscroll { overflow: hidden; border: 1px solid var(--panel-line); border-radius: 24px; background: var(--panel);
              -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur);
              touch-action: pan-y; user-select: none; }
.weekpane { transition: transform 340ms var(--ease); }
.weekpane.dragging { transition: none; }
.weekgrid { display: grid; grid-template-columns: 42px repeat(5, 1fr); }
.wg-corner { border-bottom: 1px solid var(--hair); }
.wg-dayhead { border-bottom: 1px solid var(--hair); border-left: 1px solid var(--hair); padding: 0.6rem 0.35rem; text-align: center; }
.wg-dayhead .dn { font-size: 0.6875rem; color: var(--ink-3); }
.wg-dayhead .dd { font-size: 1.25rem; font-weight: 300; line-height: 1.3; font-variant-numeric: tabular-nums; }
.wg-dayhead.is-today .dd { position: relative; }
.wg-dayhead.is-today .dd::after { content: ""; position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }
.wg-hours { position: relative; }
.wg-hour { height: 52px; border-bottom: 1px solid var(--hair); position: relative; }
.wg-hour span { position: absolute; top: -6px; right: 6px; font-size: 0.5625rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.wg-col { position: relative; border-left: 1px solid var(--hair); }
.wg-col .slot { height: 52px; border-bottom: 1px solid var(--hair); }
.nowline { position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink); z-index: 3; pointer-events: none; }
.nowline::before { content: ""; position: absolute; left: -3px; top: -2.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }

.blk { position: absolute; left: 3px; right: 3px; border-radius: 12px; padding: 0.35rem 0.5rem;
       display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
       border: 1px solid color-mix(in srgb, var(--sc) 40%, var(--panel-line));
       background: color-mix(in srgb, var(--sc) 7%, var(--panel-solid)); cursor: pointer; overflow: hidden; text-align: left; z-index: 2;
       transition: transform 200ms var(--spring), box-shadow 200ms, opacity 200ms; }
.blk:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 10px 24px -12px rgba(0,0,0,.4); z-index: 4; }
.blk:active { transform: scale(0.98); }
.blk b { display: block; font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.04em; }
.blk .bt { display: block; font-size: 0.625rem; color: var(--ink-2); font-variant-numeric: tabular-nums; margin-top: 1px; }
.blk .br { display: block; font-size: 0.625rem; color: var(--ink-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk.done { opacity: 0.45; }
.blk.done b { text-decoration: line-through; }
/* A dashed outline marks a room that is not assigned yet. */
.blk.tbc { border-style: dashed; }
.blk.live { box-shadow: 0 0 0 1.5px var(--ink); }

/* ---------- agenda ---------- */
.monthhead { display: flex; align-items: baseline; gap: 0.75rem; margin: 1.75rem 0 0.6rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--hair); }
.monthhead:first-child { margin-top: 0.25rem; }
.monthhead h2 { font-size: 1rem; }
.monthhead .mh { font-size: 0.75rem; color: var(--ink-3); margin-left: auto; font-variant-numeric: tabular-nums; }
.banner { display: flex; gap: 0.6rem; align-items: center; border: 1px solid color-mix(in srgb, var(--bc) 34%, var(--panel-line));
          border-radius: 14px; padding: 0.6rem 0.9rem; margin: 0.8rem 0 0.5rem; font-size: 0.8125rem; color: var(--ink-2);
          background: var(--panel-solid); }
.banner b { color: var(--ink); font-weight: 400; }
.daygroup { display: flex; gap: 0.85rem; padding: 0.5rem 0; }
.daygroup + .daygroup { border-top: 1px solid var(--hair); }
.daterail { flex: 0 0 44px; text-align: center; padding-top: 0.35rem; }
.daterail .dow { display: block; font-size: 0.6875rem; color: var(--ink-3); }
.daterail .dnum { display: block; font-size: 1.375rem; font-weight: 300; line-height: 1.2; font-variant-numeric: tabular-nums; }
.daterail .tdot { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); margin: 3px auto 0; }
.daylist { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }

.srow { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.85rem;
        background: var(--panel-solid); border: 1px solid color-mix(in srgb, var(--sc) 34%, var(--panel-line)); border-radius: 16px;
        transition: background 180ms, opacity 200ms; }
.srow:hover { background: var(--panel-solid); }
.srow.done { opacity: 0.5; }
.sopen { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.7rem;
         background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.sinfo { flex: 1; min-width: 0; }
.sline1 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.code { font-size: 0.625rem; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--sc); color: var(--ink); }
.stitle { font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.srow.done .stitle { text-decoration: line-through; }
.sline2 { display: flex; flex-wrap: wrap; gap: 2px 0.75rem; margin-top: 2px; font-size: 0.75rem; color: var(--ink-2); align-items: center; }
.sline2 .t { color: var(--ink); font-variant-numeric: tabular-nums; }
.sline2 .d { color: var(--ink-3); }
.sline2 .mono { font-variant-numeric: tabular-nums; }
.tbcflag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.625rem; color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 999px; padding: 1px 7px; }
.okflag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.6875rem; color: var(--done); }
.liveflag { font-size: 0.6875rem; color: var(--ink); display: inline-flex; align-items: center; gap: 5px; }
.liveflag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.7); } }
.sright { display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; }
.sbldg { font-size: 1rem; font-weight: 300; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--hair-2); color: var(--ink-2); }
.notedot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); }
.tick { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--hair-2); display: grid; place-items: center;
        flex: 0 0 28px; padding: 0; background: none; cursor: pointer;
        transition: background 220ms var(--spring), border-color 220ms, transform 220ms var(--spring); }
.tick:hover { border-color: var(--done); }
.tick:active { transform: scale(0.88); }
.srow.done .tick { background: var(--done); border-color: var(--done); }
.tick svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
            stroke-dasharray: 22; stroke-dashoffset: 22; opacity: 0; }
.srow.done .tick svg { opacity: 1; animation: draw 300ms var(--ease) forwards; }

/* ---------- month calendar ---------- */
.calscroll { overflow-x: auto; border: 1px solid var(--panel-line); border-radius: 24px; background: var(--panel);
             -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur); }
.calgrid { min-width: 640px; display: grid; grid-template-columns: repeat(5, 1fr); }
.dowhead { font-size: 0.6875rem; color: var(--ink-3); padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--hair); }
.calcell { border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); min-height: 88px; padding: 0.45rem; display: flex; flex-direction: column; gap: 3px; }
.calcell:nth-child(5n) { border-right: 0; }
.calcell.pad { background: var(--panel-2); }
.calcell.block { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.calcell.is-today { box-shadow: inset 0 0 0 1.5px var(--ink); }
.calnum { font-size: 0.6875rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.calcell.is-today .calnum { color: var(--ink); }
.pill { display: flex; flex-direction: column; align-items: stretch; width: 100%; text-align: left; border: 0; cursor: pointer;
        background: color-mix(in srgb, var(--sc) 13%, var(--panel-solid)); border-radius: 7px; padding: 3px 6px;
        font-size: 0.625rem; line-height: 1.3; color: var(--ink-2); transition: transform 150ms var(--spring); }
.pill:hover { opacity: 0.65; }
.pill b { font-size: 0.625rem; color: var(--ink); display: block; font-weight: 400; }
.pill.done { opacity: 0.42; }
.pill.dim { opacity: 0.26; }

/* ---------- stats panel ---------- */
.chartwrap { overflow-x: auto; margin-top: 1.1rem; }
.chart { min-width: 620px; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; align-items: end; height: 148px; }
.barcol { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.bar { border-radius: 5px 5px 0 0; background: var(--bar-mid); min-height: 2px; transform-origin: bottom; animation: grow 550ms var(--ease) backwards; }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.bar.lo { background: var(--bar-lo); } .bar.hi { background: var(--bar-hi); }
.barcol:hover .bar { opacity: 0.75; }
.barval { font-size: 0.5625rem; color: var(--ink-2); text-align: center; margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.axis { min-width: 620px; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; margin-top: 0.4rem; border-top: 1px solid var(--hair); padding-top: 0.35rem; }
.axis span { font-size: 0.5rem; color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums; overflow: hidden; }
.tip { position: fixed; z-index: 80; pointer-events: none; background: var(--ink); color: var(--menu-bg); border-radius: 12px; padding: 0.5rem 0.7rem; font-size: 0.75rem; line-height: 1.45; max-width: 250px; }
.tip b { display: block; margin-bottom: 2px; font-weight: 400; }
.tip .tl { opacity: 0.75; }

.ctable { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.8125rem; }
.ctable th { text-align: left; font-size: 0.75rem; color: var(--ink-3); font-weight: 400; padding: 0 0.7rem 0.5rem 0; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.ctable td { padding: 0.65rem 0.7rem 0.65rem 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.ctable td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cname { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; letter-spacing: 0.04em; }
.cname .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc); flex: 0 0 8px; }
.cname .dot.sq { border-radius: 2px; }
.tname { font-size: 0.75rem; color: var(--ink-3); margin-top: 2px; }
.modetag { font-size: 0.6875rem; color: var(--ink-3); border: 1px solid var(--hair); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.cprog { height: 2px; border-radius: 99px; background: var(--hair); margin-top: 5px; overflow: hidden; min-width: 56px; }
.cprog i { display: block; height: 100%; background: var(--sc); border-radius: 99px; transition: width 700ms var(--ease); }
.tablescroll { overflow-x: auto; }

/* ---------- rooms ---------- */
.tbclist { display: flex; flex-direction: column; margin-top: 0.5rem; }
.tbcitem { display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; align-items: center; padding: 0.7rem 0;
           border: 0; border-bottom: 1px solid var(--hair); }
.tbcitem .when { font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.tbcitem .what { flex: 1 1 160px; min-width: 0; font-size: 0.8125rem; }
.tbcitem input { font: inherit; font-size: 0.8125rem; padding: 0.4rem 0.7rem; border-radius: 999px;
                 border: 1px solid var(--warn-line); background: var(--warn-bg); color: var(--ink); width: 120px;
                 transition: border-color 250ms, background 250ms; }
.tbcitem:last-child { border-bottom: 0; }
.tbcitem .ccode { display: flex; align-items: center; gap: 0.45rem; font-size: 0.75rem; color: var(--ink-2); }
.tbcitem .ccode .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc); flex: 0 0 8px; }
.tbcitem.ok input { border-color: var(--hair); background: transparent; }
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--ink-3); font-size: 0.875rem; }
.empty .big { font-size: 1.125rem; color: var(--ink-2); margin-bottom: 0.3rem; }

/* ---------- detail sheet ---------- */
dialog { border: 0; padding: 0; background: transparent; max-width: min(520px, calc(100vw - 28px)); width: 100%; color: var(--ink); }
dialog::backdrop { background: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
dialog[open] { animation: dlgIn 260ms var(--spring); }
@keyframes dlgIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.sheet { background: var(--panel-solid); -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur);
         border: 1px solid var(--panel-line); border-radius: 28px; overflow: hidden; }
.sheetTop { padding: 1.2rem 1.3rem; border-bottom: 1px solid var(--hair); background: color-mix(in srgb, var(--sc) 8%, transparent); display: flex; gap: 1rem; align-items: flex-start; }
.sheetTop .st-main { flex: 1; min-width: 0; }
.sheetTop h3 { font-size: 1.25rem; line-height: 1.25; margin-top: 0.4rem; }
.sheetTop .st-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; margin-top: 0.6rem; font-size: 0.75rem; color: var(--ink-2); align-items: center; }
.sheetBody { padding: 1.2rem 1.3rem; display: grid; gap: 0.85rem; }
.bigcheck { display: flex; align-items: center; gap: 0.7rem; cursor: pointer; user-select: none;
            background: var(--panel-2); border: 1px solid var(--panel-line); border-radius: 16px; padding: 0.7rem 0.85rem;
            transition: background 250ms, border-color 250ms; }
.bigcheck:hover { border-color: var(--hair-2); }
.bigcheck.on { background: color-mix(in srgb, var(--done) 12%, transparent); border-color: color-mix(in srgb, var(--done) 40%, transparent); }
.bigcheck input { position: absolute; opacity: 0; pointer-events: none; }
.bigcheck .box { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--hair-2); display: grid; place-items: center; flex: 0 0 24px;
                 transition: background 220ms var(--spring), border-color 220ms, transform 220ms var(--spring); }
.bigcheck.on .box { background: var(--done); border-color: var(--done); transform: scale(1.06); }
.bigcheck .box svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; }
.bigcheck.on .box svg { animation: draw 300ms var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.bigcheck .lbl { font-size: 0.875rem; }
.bigcheck .hint { font-size: 0.75rem; color: var(--ink-3); margin-top: 1px; display: block; }
.field { display: grid; gap: 0.3rem; }
.field label { font-size: 0.75rem; color: var(--ink-3); }
.field input, .field textarea { font: inherit; font-size: 0.8125rem; padding: 0.55rem 0.8rem; border-radius: 14px;
                                border: 1px solid var(--panel-line); background: var(--panel-2); color: var(--ink); width: 100%; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--hair-2); }
.field textarea { min-height: 76px; line-height: 1.5; border-radius: 18px; }
.sheetFoot { padding: 0.8rem 1.3rem; border-top: 1px solid var(--hair); display: flex; gap: 0.6rem; justify-content: space-between; align-items: center; }
.sheetFoot .nav { display: flex; gap: 0.4rem; padding: 0; margin: 0; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 0.9rem; align-items: center; font-size: 0.8125rem; }
.keys kbd { font-family: inherit; font-size: 0.6875rem; background: var(--panel-2); border: 1px solid var(--hair-2); border-bottom-width: 2px; border-radius: 6px; padding: 2px 7px; justify-self: start; white-space: nowrap; }

/* ---------- confetti, toast, sync ---------- */
.toast { position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 95;
         transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--menu-bg);
         border-radius: 999px; padding: 0.6rem 1.1rem; font-size: 0.8125rem; opacity: 0;
         transition: opacity 250ms, transform 300ms var(--spring); pointer-events: none;
         max-width: calc(100vw - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.syncbar { display: flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; color: var(--ink-3); margin-top: 0.75rem; flex-wrap: wrap; letter-spacing: 0.02em; }
.syncbar .sdot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); flex: 0 0 6px; }
.syncbar.on .sdot { background: var(--done); }
.syncbar.off .sdot { background: var(--warn); }
.syncbar button { background: none; border: 0; text-decoration: underline; cursor: pointer; color: inherit; font: inherit; padding: 0; }
footer { padding-block: 1.1rem 3rem; border-top: 1px solid var(--hair); font-size: 0.75rem; color: var(--ink-3); max-width: 70ch; margin-top: 1.25rem; line-height: 1.7; }

@media (max-width: 620px) {
  .heroIn { padding: 1.25rem 1.25rem 1.25rem 1.5rem; }
  .cd-unit { min-width: 44px; }
  .bldg { width: 52px; height: 52px; font-size: 1.5rem; }
  .daterail { flex: 0 0 38px; }
  .daygroup { gap: 0.6rem; }
  .stitle { white-space: normal; line-height: 1.3; }
  .sbldg { display: none; }
  .tbcitem input { width: 100%; }
  .tab kbd { display: none; }
  .blk .br { display: none; }
  .wg-dayhead .dd { font-size: 1rem; }
  .appHead { padding-block: 0.25rem 1rem; }
}


/* ---------- notes table ---------- */
.notesBar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }
.notesCount { font-size: 0.75rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ntable { width: 100%; border-collapse: collapse; margin-top: 0.9rem; font-size: 0.8125rem; min-width: 780px; }
.ntable th:nth-child(1), .ntable td:nth-child(1) { width: 1%; }
.ntable th:nth-child(2), .ntable td:nth-child(2) { width: 1%; }
.ntable th:nth-child(3), .ntable td:nth-child(3) { width: 26%; }
.ntable th:nth-child(4), .ntable td:nth-child(4) { width: 42%; }
.ntable th { text-align: left; font-size: 0.75rem; color: var(--ink-3); font-weight: 400; padding: 0 0.6rem 0.5rem 0; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.ntable td { padding: 0.55rem 0.6rem 0.55rem 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.ntable tr.dropping td { background: var(--panel-solid); }
.nwhen { white-space: nowrap; font-variant-numeric: tabular-nums; }
.nwhen small { display: block; color: var(--ink-3); font-size: 0.6875rem; }
.ncourse { display: flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.ncourse .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc); flex: 0 0 8px; }
.nin { font: inherit; font-size: 0.8125rem; width: 100%; padding: 0.4rem 0.6rem; border-radius: 12px;
       border: 1px solid transparent; background: transparent; color: var(--ink); resize: vertical; }
.nin::placeholder { color: var(--ink-3); }
.nin:hover { border-color: var(--hair); }
.nin:focus { border-color: var(--hair-2); background: var(--panel-2); outline: none; }
textarea.nin { min-height: 2.6rem; line-height: 1.5; }
.ntopic { min-width: 150px; }
.nnote { min-width: 240px; }
.nfiles { min-width: 160px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.nfile { display: flex; align-items: center; gap: 0.35rem; max-width: 100%; }
.nfile a { font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.nfile span { font-size: 0.6875rem; color: var(--ink-3); white-space: nowrap; }
.nfile button { background: none; border: 0; cursor: pointer; color: var(--ink-3); font-size: 0.875rem; line-height: 1; padding: 0 2px; }
.nfile button:hover { color: var(--ink); }
.nadd { font-size: 0.75rem; color: var(--ink-2); background: none; border: 1px dashed var(--hair-2); border-radius: 999px;
        padding: 0.25rem 0.7rem; cursor: pointer; white-space: nowrap; transition: opacity 200ms; }
.nadd:hover { opacity: 0.65; }
.nadd input { display: none; }