@charset "utf-8";
/* ============================================================
   MAMARIAL FES 2026 — Event Operations System
   app.css : 画面表示用
   ============================================================ */

:root{
  --ivory:#fdfaf6;
  --paper:#ffffff;
  --line:#e7ded4;
  --line-2:#f0e9e1;
  --ink:#3f342e;
  --ink-2:#6b5a52;
  --ink-3:#9c8c82;
  --pink:#e8a9bb;
  --pink-soft:#fdeef1;
  --gold:#c29a4e;
  --gold-soft:#f6efdf;
  --ok:#3f8f6b;
  --ok-soft:#e9f5ef;
  --warn:#c98a2b;
  --warn-soft:#fdf3e2;
  --alert:#c0524f;
  --alert-soft:#fbeceb;
  --flat-soft:#f2efec;
  --sans:'Zen Kaku Gothic New',-apple-system,'Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
  --round:'Zen Maru Gothic',var(--sans);
  --nav-w:236px;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--ivory);
  font-size:15px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
button{font-family:inherit}

/* ---------------- Layout ---------------- */
.app{display:flex;min-height:100vh}

.side{
  width:var(--nav-w);flex:0 0 var(--nav-w);
  background:var(--paper);
  border-right:1px solid var(--line);
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
}
.side-head{padding:20px 18px 14px;border-bottom:1px solid var(--line-2)}
.side-head .ttl{
  font-family:var(--round);font-weight:700;font-size:15px;letter-spacing:.02em;
  line-height:1.4;margin:0 0 4px;
}
.side-head .sub{font-size:11px;color:var(--ink-3);letter-spacing:.06em;margin:0}
.side-head .ver{
  display:inline-block;margin-top:8px;font-size:10px;letter-spacing:.08em;
  background:var(--gold-soft);color:var(--gold);border-radius:99px;padding:2px 8px;
}
.nav{flex:1;overflow-y:auto;padding:10px 8px 24px}
.nav-group{font-size:10px;letter-spacing:.12em;color:var(--ink-3);padding:14px 10px 5px}
.nav a{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:9px;text-decoration:none;
  font-size:13px;color:var(--ink-2);
}
.nav a:hover{background:var(--pink-soft);color:var(--ink)}
.nav a.on{background:var(--ink);color:#fff}
.nav a .ic{width:14px;text-align:center;font-size:10px;opacity:.7}
.nav a .n{margin-left:auto;font-size:10px;color:var(--ink-3);
  background:var(--flat-soft);border-radius:99px;padding:0 6px;min-width:18px;text-align:center}
.nav a.on .n{background:rgba(255,255,255,.22);color:#fff}
.side-foot{padding:12px;border-top:1px solid var(--line-2);display:grid;gap:6px}

.btn{
  display:block;width:100%;text-align:center;cursor:pointer;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-2);
  border-radius:9px;padding:8px 10px;font-size:12px;letter-spacing:.03em;
}
.btn:hover{border-color:var(--pink);color:var(--ink);background:var(--pink-soft)}
.btn.solid{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.solid:hover{background:#2c241f;color:#fff}

.main{flex:1;min-width:0;padding:34px 44px 90px;max-width:1080px}

/* ---------------- Page head ---------------- */
.page-head{margin:0 0 22px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.page-head .eyebrow{
  font-size:10px;letter-spacing:.16em;color:var(--gold);margin:0 0 6px;text-transform:uppercase}
.page-head h1{font-family:var(--round);font-size:26px;letter-spacing:.02em;margin:0 0 8px;line-height:1.3}
.page-head .lead{margin:0;color:var(--ink-2);font-size:13.5px;max-width:72ch}
.page-head .meta{margin-top:10px;font-size:11px;color:var(--ink-3)}

/* ---------------- Blocks ---------------- */
.block{margin:0 0 26px}
.block > h2{
  font-family:var(--round);font-size:15px;margin:0 0 10px;
  display:flex;align-items:center;gap:8px;letter-spacing:.02em;
}
.block > h2::before{content:'';width:4px;height:15px;background:var(--pink);border-radius:2px;display:inline-block}
.block > h2 .cnt{font-size:11px;color:var(--ink-3);font-family:var(--sans)}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.note{font-size:11.5px;color:var(--ink-3);margin:8px 0 0}

/* callout */
.callout{border-radius:var(--radius);padding:13px 16px;border:1px solid;margin:0 0 16px}
.callout .ct{font-weight:700;font-size:13px;margin:0 0 4px}
.callout p{margin:0;font-size:12.5px;line-height:1.7}
.callout.info{background:var(--paper);border-color:var(--line);color:var(--ink-2)}
.callout.ok{background:var(--ok-soft);border-color:#c6e3d6;color:#2c6b50}
.callout.warn{background:var(--warn-soft);border-color:#eddcb9;color:#8d6118}
.callout.alert{background:var(--alert-soft);border-color:#f0cfcd;color:#993f3d}

/* kv */
.kv{width:100%;border-collapse:collapse;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.kv th,.kv td{text-align:left;padding:9px 14px;border-bottom:1px solid var(--line-2);font-size:12.5px;vertical-align:top}
.kv tr:last-child th,.kv tr:last-child td{border-bottom:0}
.kv th{width:30%;font-weight:500;color:var(--ink-3);background:#fcfaf7;white-space:nowrap}

/* table */
table.tb{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line)}
table.tb th,table.tb td{border:1px solid var(--line-2);padding:8px 10px;font-size:12px;text-align:left;vertical-align:top}
table.tb thead th{background:#f9f5f0;color:var(--ink-2);font-weight:500;white-space:nowrap}
table.tb tbody tr:nth-child(even){background:#fdfbf9}

/* ---------- タイムテーブル表 ---------- */
/* 表のラッパー：狭い画面では横スクロール（列を潰さない） */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tw + .note{margin-top:8px}
table.tt{table-layout:fixed;min-width:600px}
table.tt.editing{min-width:730px}
table.cmp{min-width:520px}
/* 通常表示（7列） */
table.tt:not(.editing) th:nth-child(1),table.tt:not(.editing) td:nth-child(1){width:13.5%}
table.tt:not(.editing) th:nth-child(2),table.tt:not(.editing) td:nth-child(2){width:6%;text-align:center}
table.tt:not(.editing) th:nth-child(3),table.tt:not(.editing) td:nth-child(3){width:11%}
table.tt:not(.editing) th:nth-child(4),table.tt:not(.editing) td:nth-child(4){width:25%}
table.tt:not(.editing) th:nth-child(5),table.tt:not(.editing) td:nth-child(5){width:13%}
table.tt:not(.editing) th:nth-child(6),table.tt:not(.editing) td:nth-child(6){width:7.5%}
/* 編集モード（先頭に「並び」列が増えるので配分を作り直す） */
table.tt.editing th:nth-child(1),table.tt.editing td:nth-child(1){width:58px}
table.tt.editing th:nth-child(2),table.tt.editing td:nth-child(2){width:12.5%}
table.tt.editing th:nth-child(3),table.tt.editing td:nth-child(3){width:5.5%;text-align:center}
table.tt.editing th:nth-child(4),table.tt.editing td:nth-child(4){width:10%}
table.tt.editing th:nth-child(5),table.tt.editing td:nth-child(5){width:23%}
table.tt.editing th:nth-child(6),table.tt.editing td:nth-child(6){width:12%}
table.tt.editing th:nth-child(7),table.tt.editing td:nth-child(7){width:7%}
table.tt td{word-break:break-word}
table.tt td.t{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-2)}
table.tt td.d{color:var(--ink-3);font-size:11px}
table.tt td.c{color:var(--ink-3);font-size:11px}
table.tt td.n b{font-size:12.5px}
table.tt td.rm{color:var(--ink-3);font-size:11px}
table.tt tr.fx > td{background:#fff6f9}
table.tt tr.fx td.n b{color:#b0526e}
table.tt tr.ph > td{
  background:var(--ink);color:#fff;font-size:10.5px;letter-spacing:.1em;padding:4px 10px;
}
table.tt tr.ph + tr td{border-top:0}

/* ---------- タイムテーブル編集モード ---------- */
.tt-bar{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:0 0 14px}
.btn-s{
  cursor:pointer;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);
  border-radius:8px;padding:5px 12px;font-size:12px;font-family:inherit;letter-spacing:.02em;
}
.btn-s:hover:not(:disabled){border-color:var(--pink);background:var(--pink-soft);color:var(--ink)}
.btn-s:disabled{opacity:.4;cursor:default}
.btn-s.on{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-s.warn{color:var(--alert);border-color:#eccfcd}
.tt-hint{font-size:11px;color:var(--ink-3);flex:1 1 240px;line-height:1.55}

table.tt th.hd,table.tt td.hd{width:62px;text-align:center;white-space:nowrap;padding:4px 6px}
table.tt.editing tbody tr[data-id]{cursor:grab}
table.tt.editing tbody tr[data-id]:hover > td{background:#fffaf7}
table.tt td.hd .grip{color:var(--ink-3);font-size:13px;letter-spacing:-1px;cursor:grab}
table.tt td.hd .nudge{display:inline-flex;flex-direction:column;gap:1px;margin-left:2px;vertical-align:middle}
table.tt td.hd .nudge button{
  cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink-2);
  border-radius:4px;font-size:8px;line-height:1;padding:2px 3px;font-family:inherit;
}
table.tt td.hd .nudge button:hover{background:var(--pink-soft);border-color:var(--pink)}
table.tt tbody tr.dragging > td{opacity:.45}
table.tt tbody tr.drop-before > td{box-shadow:inset 0 2px 0 0 var(--pink)}
table.tt tbody tr.drop-after > td{box-shadow:inset 0 -2px 0 0 var(--pink)}
table.tt tbody tr.mv > td:nth-child(-n+3){background:var(--warn-soft)}
table.tt tbody tr.pr td.n b{color:var(--ink-2);font-weight:500}

.tt-out{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;margin:0 0 18px;
}
.tt-out-h{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;margin-bottom:8px}
.tt-out-h b{font-size:12.5px}
.tt-out-h span{display:flex;gap:6px}
.tt-out textarea{
  width:100%;height:230px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;
  line-height:1.6;border:1px solid var(--line-2);border-radius:8px;padding:10px;
  background:#fcfaf8;color:var(--ink-2);resize:vertical;
}

/* ---------- フロア別 3列タイムテーブル ---------- */
table.ft{table-layout:fixed;min-width:660px}
table.ft th:nth-child(1),table.ft td:nth-child(1){width:12%}
table.ft thead th{vertical-align:top;padding:8px 10px}
table.ft thead th .fl{display:block;font-family:var(--round);font-size:14px;color:var(--ink);letter-spacing:.04em}
table.ft thead th small{display:block;font-size:10px;color:var(--ink-3);font-weight:400;margin-top:2px;line-height:1.4}
table.ft thead th.main{background:#fff5f8}
table.ft thead th.sub{background:#f6fbf8}
table.ft thead th.ops{background:var(--gold-soft)}
table.ft td{vertical-align:top}
table.ft td.t{font-variant-numeric:tabular-nums;font-weight:700;font-size:12.5px;color:var(--ink-2);
  background:#fcfaf7;white-space:nowrap}
table.ft td.t small{display:block;font-weight:400;font-size:9.5px;color:var(--ink-3);letter-spacing:.02em}
table.ft td.main{background:#fffcfd}
table.ft td.sub{background:#fdfefd}
table.ft td.ops{background:#fffdf8}
table.ft .fi{margin:0 0 5px}
table.ft .fi:last-child{margin-bottom:0}
table.ft .fi b{font-size:12.2px;line-height:1.5}
table.ft .fi small{display:block;font-size:10px;color:var(--ink-3);margin-top:1px}
table.ft td.allf{background:#f7f4f1;position:relative}
table.ft td.allf .fnote{
  position:absolute;top:6px;right:8px;font-size:9px;letter-spacing:.1em;color:var(--ink-3);
  border:1px solid var(--line);border-radius:99px;padding:0 6px;background:#fff;
}
table.ft tr.std td{background:var(--gold-soft)}
table.ft tr.std td.t{background:#f3e9d2}
table.ft tr.fx td{background:#fff4f7}

.fchip{
  display:inline-block;font-size:10px;letter-spacing:.04em;border-radius:5px;padding:1px 6px;
  border:1px solid var(--line);background:#fff;color:var(--ink-2);white-space:nowrap;
}
.fchip.main{background:#fff1f5;border-color:#f2ccd8}
.fchip.sub{background:#eef8f2;border-color:#cfe6d9}
.fchip.ops{background:var(--gold-soft);border-color:#e8d7b4}
.fchip.allf{background:var(--flat-soft);border-color:#e2dbd4;color:var(--ink-3)}
table.tt tr.st td{background:#fdfbf6}

table.cmp{table-layout:fixed}
table.cmp th:nth-child(1),table.cmp td:nth-child(1){width:12%;text-align:center}
table.cmp td.t{font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--ink-2);background:#fcfaf7;font-weight:700}
table.cmp td b{font-size:12.5px}
table.cmp td small{color:var(--ink-3);font-size:10.5px}
table.cmp td.same{background:#fcfbfa;font-size:11px}
table.cmp tr.fx td{background:#fff6f9}
.mute{color:var(--ink-3)}

/* list */
ul.ls{margin:0;padding-left:1.2em}
ul.ls li{margin:0 0 5px;font-size:12.8px}

/* checklist */
.chk{display:grid;gap:6px}
.chk .row{display:flex;gap:9px;align-items:flex-start;background:var(--paper);
  border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:12.5px}
.chk .box{width:13px;height:13px;border:1.5px solid var(--ink-3);border-radius:3px;flex:0 0 13px;margin-top:4px}
.chk .row.done .box{background:var(--ok);border-color:var(--ok);position:relative}
.chk .row.done .box::after{content:'✓';color:#fff;font-size:10px;position:absolute;left:1px;top:-3px}
.chk .row.done{color:var(--ink-3)}

/* cards */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:10px}
.pcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px}
.pcard .nm{font-family:var(--round);font-size:14px;margin:0 0 2px}
.pcard .mt{font-size:10.5px;color:var(--gold);letter-spacing:.04em;margin:0 0 7px}
.pcard ul{margin:0;padding-left:1.1em}
.pcard li{font-size:11.5px;color:var(--ink-2);margin-bottom:3px}

/* layout zones */
.zones{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:8px}
.zone{border:1px solid var(--line);border-radius:11px;padding:10px 12px;background:var(--paper)}
.zone .zn{font-size:12.5px;font-weight:700;margin:0 0 2px}
.zone .zr{font-size:11px;color:var(--ink-3);margin:0}
.zone.main{background:#fff6f8;border-color:#f3d3dc}
.zone.seat{background:#fbf7ff;border-color:#e3dced}
.zone.sub{background:#f9fcfa;border-color:#d9e8df}
.zone.ops{background:var(--gold-soft);border-color:#ecdfc0}
.zone.back{background:#f6f4f2;border-color:#e2dbd4}

/* ---------------- Item rows ---------------- */
.items{display:grid;gap:8px}
.item{
  background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:11px;padding:12px 15px;
}
.item.t-decision{border-left-color:var(--ok)}
.item.t-open{border-left-color:var(--warn)}
.item.t-confirm{border-left-color:var(--alert)}
.item.pin{box-shadow:0 0 0 2px rgba(232,169,187,.35)}
.item .top{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:5px}
.item .id{font-size:10.5px;letter-spacing:.06em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.item .ttl{font-size:13.5px;font-weight:700;margin:0;line-height:1.55;flex:1 1 100%}
.item .dt{font-size:12.2px;color:var(--ink-2);margin:0}
.item .foot{display:flex;flex-wrap:wrap;gap:12px;margin-top:7px;font-size:10.5px;color:var(--ink-3)}
.item .foot b{font-weight:500;color:var(--ink-2)}
.rel{display:inline-flex;gap:4px;flex-wrap:wrap}
.rel a{font-size:10px;background:var(--flat-soft);border-radius:99px;padding:1px 7px;text-decoration:none;color:var(--ink-2)}
.rel a:hover{background:var(--pink-soft)}

.chip{font-size:10px;letter-spacing:.04em;border-radius:99px;padding:2px 9px;white-space:nowrap;border:1px solid transparent}
.chip.ok{background:var(--ok-soft);color:#2c6b50;border-color:#c6e3d6}
.chip.warn{background:var(--warn-soft);color:#8d6118;border-color:#eddcb9}
.chip.alert{background:var(--alert-soft);color:#993f3d;border-color:#f0cfcd}
.chip.flat{background:var(--flat-soft);color:var(--ink-2);border-color:#e6e0da}
.chip.cat{background:var(--paper);color:var(--ink-3);border-color:var(--line)}
.chip.pri{background:#fff;color:var(--alert);border-color:#f0cfcd}
.chip.pin{background:var(--ink);color:#fff}

/* ---------------- Dashboard ---------------- */
.hero{
  background:linear-gradient(135deg,#fff 0%,var(--pink-soft) 100%);
  border:1px solid var(--line);border-radius:20px;padding:26px 28px;margin-bottom:22px;
}
.hero .th{font-size:11px;letter-spacing:.22em;color:var(--gold);margin:0 0 8px}
.hero h1{font-family:var(--round);font-size:32px;margin:0 0 4px;letter-spacing:.03em}
.hero .tm{font-family:var(--round);font-size:15px;color:var(--pink);margin:0 0 16px;letter-spacing:.08em}
.hero .hm{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12px;color:var(--ink-2)}
.hero .hm span b{color:var(--ink-3);font-weight:500;font-size:10.5px;letter-spacing:.06em;margin-right:6px}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:9px;margin-bottom:24px}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px}
.stat .l{font-size:10.5px;color:var(--ink-3);letter-spacing:.06em;margin:0 0 2px}
.stat .v{font-family:var(--round);font-size:26px;line-height:1.1;margin:0}
.stat .v small{font-size:11px;color:var(--ink-3);margin-left:3px}
.stat.ok .v{color:var(--ok)}
.stat.warn .v{color:var(--warn)}
.stat.alert .v{color:var(--alert)}

.prog{display:grid;gap:7px}
.prog .r{display:grid;grid-template-columns:112px 1fr 78px;gap:10px;align-items:center;font-size:12px}
.prog .bar{height:7px;background:var(--flat-soft);border-radius:99px;overflow:hidden}
.prog .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--gold));border-radius:99px}
.prog .num{font-size:10.5px;color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}

.cols2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:900px){.cols2{grid-template-columns:1fr}}

/* ---------------- Timeline ---------------- */
.day-h{
  display:flex;align-items:baseline;gap:10px;margin:24px 0 10px;
  font-family:var(--round);font-size:17px;
}
.day-h .dd{font-size:11px;color:var(--ink-3);letter-spacing:.06em}
.rundown{display:grid;gap:5px}
.rd{
  display:grid;grid-template-columns:104px 1fr;gap:12px;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:9px 14px;
}
.rd.fix{border-color:var(--pink);background:#fff8fa}
.rd .tm{font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap;padding-top:1px}
.rd .tm.tbd{color:var(--ink-3)}
.rd .bd .t{font-size:13px;font-weight:700;margin:0 0 2px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.rd .bd .m{font-size:11px;color:var(--ink-3);margin:0}
.ms{display:grid;gap:6px}
.ms .r{display:grid;grid-template-columns:88px 1fr auto;gap:12px;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:9px 14px;font-size:12.5px}
.ms .r .d{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---------------- Minutes / changelog ---------------- */
.mn{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-bottom:16px}
.mn .mh{border-bottom:1px solid var(--line-2);padding-bottom:11px;margin-bottom:14px}
.mn .mh .id{font-size:10.5px;color:var(--ink-3);letter-spacing:.06em}
.mn .mh h2{font-family:var(--round);font-size:17px;margin:2px 0 6px}
.mn .mh .at{font-size:11px;color:var(--ink-3)}
.mn h3{font-size:13px;margin:16px 0 6px;color:var(--gold);letter-spacing:.03em}
.mn ul{margin:0;padding-left:1.2em}
.mn li{font-size:12.5px;margin-bottom:4px}
.mn .outs{margin-top:16px;padding-top:13px;border-top:1px dashed var(--line);display:grid;gap:8px}
.mn .outs .o{display:grid;grid-template-columns:88px 1fr;gap:10px;font-size:11px;align-items:start}
.mn .outs .o .k{color:var(--ink-3);letter-spacing:.04em}

.cl{display:grid;gap:7px}
.cl .r{display:grid;grid-template-columns:84px 60px 1fr;gap:12px;background:var(--paper);
  border:1px solid var(--line);border-radius:10px;padding:10px 14px;align-items:start}
.cl .r .d{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;padding-top:2px}
.cl .r .s{font-size:12.5px;font-weight:700;margin:0}
.cl .r .x{font-size:11.5px;color:var(--ink-2);margin:3px 0 0}
.cl .r .mt{font-size:10.5px;color:var(--ink-3);margin-top:4px}

/* filter bar */
.fbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.fbar button{
  cursor:pointer;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);
  border-radius:99px;padding:4px 12px;font-size:11.5px;
}
.fbar button.on{background:var(--ink);border-color:var(--ink);color:#fff}

.empty{background:var(--paper);border:1px dashed var(--line);border-radius:var(--radius);
  padding:18px;text-align:center;color:var(--ink-3);font-size:12.5px}

.sec-title{
  font-family:var(--round);font-size:14px;margin:26px 0 10px;padding-bottom:6px;
  border-bottom:1px solid var(--line);display:flex;gap:8px;align-items:baseline;
}
.sec-title .c{font-size:11px;color:var(--ink-3);font-family:var(--sans)}

.tocs{display:grid;gap:4px;counter-reset:t}
.tocs .t{display:flex;gap:10px;font-size:12.5px;border-bottom:1px dotted var(--line);padding:5px 0}
.tocs .t .no{color:var(--gold);font-variant-numeric:tabular-nums;width:22px}

/* print-only helpers hidden on screen */
.print-only{display:none}
.sheet-head,.sheet-foot{display:none}

@media(max-width:820px){
  .app{flex-direction:column}
  .side{position:static;width:100%;height:auto;flex:none;border-right:0;border-bottom:1px solid var(--line)}
  .nav{max-height:none}
  .nav a{display:inline-flex;margin:2px}
  .main{padding:22px 18px 60px}
  .hero h1{font-size:24px}
}