:root {
  --paper: #f6f3ec; --past: #ebe6da; --card: #fffdf8; --ink: #15171c; --ink2: #41454e; --ink3: #5b5f68;
  --rule: #c9c2b2; --rule2: #ded8c9; --now: #b8321a; --on-now: #fff; --ok: #176250; --warn: #86560a;
  --wk: rgba(21, 23, 28, .04); --td: rgba(184, 50, 26, .07); --shadow: rgba(60, 45, 15, .28);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Noto Serif", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14161a; --past: #0d0f12; --card: #1c1f25; --ink: #efede7; --ink2: #c3c5cb; --ink3: #9ea2ab;
    --rule: #3a3e48; --rule2: #262a32; --now: #ff8b68; --on-now: #1d0a04; --ok: #62c7a9; --warn: #e3b55e;
    --wk: rgba(255, 255, 255, .03); --td: rgba(255, 139, 104, .09); --shadow: rgba(0, 0, 0, .6);
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); }
body { font: 16px/1.45 var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden; overscroll-behavior: none; }
::selection { background: var(--now); color: var(--on-now); }
input, textarea, select { caret-color: var(--now); accent-color: var(--now); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
* { scrollbar-color: var(--rule) transparent; scrollbar-width: thin; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
h1, h2, h3, p, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }

/* ---------- frame ---------- */
.app { height: 100vh; height: 100dvh; display: grid; grid-template-columns: 340px minmax(0, 1fr) 0; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "side stage detail" "bar bar bar"; }
.app.has-detail { grid-template-columns: 340px minmax(0, 1fr) 470px; }
.side { grid-area: side; overflow-y: auto; padding: 22px 24px 18px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 22px; background: var(--paper); }
.stage { grid-area: stage; position: relative; min-height: 0; min-width: 0; }
.detail { grid-area: detail; overflow-y: auto; border-left: 1px solid var(--rule); background: var(--card); position: relative; }
.bar { grid-area: bar; display: flex; gap: 10px; align-items: center; padding: 10px max(16px, calc((100% - 860px) / 2)) calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); background: var(--card); }

/* ---------- side ---------- */
.brand h1 { font: 700 26px/1.1 var(--serif); letter-spacing: -.01em; }
.links { display: flex; gap: 14px; margin-top: 6px; font-size: 13.5px; }
.links a { color: var(--ink3); text-underline-offset: 3px; }
.links a:hover { color: var(--ink); }
.readout { min-height: 92px; }
.ro-day { font: 700 clamp(38px, 4.2vw, 54px)/1 var(--serif); letter-spacing: -.02em; text-wrap: balance; font-variant-numeric: lining-nums; }
.ro-rel { margin-top: 8px; font-size: 16px; color: var(--ink2); }
.zoom { display: flex; gap: 8px; align-items: stretch; }
.zbtn { width: 40px; flex: none; border: 1px solid var(--rule); background: var(--card); border-radius: 6px; display: grid; place-items: center; }
.scale { display: flex; flex: 1; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; background: var(--card); }
.scale button { flex: 1; border: 0; background: none; padding: 9px 4px; font-size: 14px; color: var(--ink2); min-height: 40px; }
.scale button + button { border-left: 1px solid var(--rule2); }
.scale button.on { background: var(--ink); color: var(--paper); font-weight: 700; }
.quick { display: flex; gap: 16px; }
.link-btn { border: 0; background: none; padding: 4px 0; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule); }
.link-btn:hover { text-decoration-color: var(--ink); }
.waiting { display: flex; flex-direction: column; gap: 10px; }
.chip { align-self: flex-start; border: 1px solid var(--rule); background: var(--card); border-radius: 99px; padding: 8px 16px; font-weight: 600; font-size: 14.5px; }
.chip.has { background: var(--now); color: var(--on-now); border-color: var(--now); }
.waiting ul { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.waiting li button { display: flex; gap: 12px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--rule2); background: none; padding: 11px 2px; }
.waiting li button:hover .wt { text-decoration: underline; }
.wd { flex: none; width: 3.8em; font: 700 15px var(--serif); font-variant-numeric: tabular-nums lining-nums; }
.wt { font-size: 14.5px; line-height: 1.35; }
.waiting .note { font-size: 13px; color: var(--ink3); }

/* ---------- stage ---------- */
.scroller { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; touch-action: pan-y; overscroll-behavior: contain; }
.scroller:focus-visible { outline-offset: -3px; }
.canvas { position: relative; width: 100%; overflow: hidden; }
.boot { padding: 40px; color: var(--ink2); font: 18px var(--serif); }
.boot.bad, .a.bad { color: var(--now); }
.nowline { position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 2px solid var(--now); pointer-events: none; z-index: 6; }
.nowline .tab { position: absolute; left: 0; top: -14px; min-width: 52px; background: var(--now); color: var(--on-now); font: 700 12px/1.15 var(--sans); padding: 5px 9px 5px 8px; border-radius: 0 6px 6px 0; white-space: pre-line; }
.nowline:not(.away) .tab { top: -15px; font-size: 14px; padding: 6px 12px 6px 10px; }
.back { position: absolute; right: 16px; bottom: 16px; z-index: 7; border: 0; border-radius: 99px; background: var(--ink); color: var(--paper); padding: 11px 20px; font-weight: 700; font-size: 14.5px; box-shadow: 0 8px 20px -6px var(--shadow); }

.pane { position: absolute; left: 0; right: 0; }
.pane.fut { background: var(--paper); }
.pane.pst { background: var(--past); }
.spine { position: absolute; width: 0; }
.spine.fut { border-left: 2px dashed var(--ink3); margin-left: -1px; }
.spine.pst { border-left: 2px solid var(--ink3); margin-left: -1px; }
.nowmark { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--now); opacity: .6; }
.band { position: absolute; left: 0; right: 0; }
.band.wk { background: var(--wk); }
.band.td { background: var(--td); }
.hair { position: absolute; left: var(--rail); right: 0; border-top: 1px solid var(--rule2); }
.hair.strong { border-top-color: var(--rule); }
.wtick { position: absolute; left: calc(var(--rail) - 6px); width: 12px; border-top: 1.5px solid var(--ink3); }
.lbl { position: absolute; left: 0; width: calc(var(--rail) - 14px); text-align: right; padding-top: 5px; line-height: 1.12; color: var(--ink2); }
.lbl.day b { display: block; font: 600 12px var(--sans); color: var(--ink3); text-transform: capitalize; }
.lbl.day span { font: 700 21px var(--serif); color: var(--ink); font-variant-numeric: lining-nums; letter-spacing: -.01em; }
.lbl.day.wk b, .lbl.day.wk span { color: var(--ink2); }
.lbl.day.td span { color: var(--now); }
.lbl.wkd { padding-top: 2px; display: flex; gap: 5px; justify-content: flex-end; align-items: baseline; }
.lbl.wkd b { font: 700 15px var(--serif); color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.lbl.wkd span { font-size: 11px; color: var(--ink3); text-transform: capitalize; }
.lbl.wkd i { font: italic 600 11px var(--serif); color: var(--now); }
.lbl.wkd.td b { color: var(--now); }
.lbl.month { font: 700 16px/1.15 var(--serif); color: var(--ink); text-transform: capitalize; padding-top: 6px; }
.lbl.mon { padding-top: 3px; }
.lbl.mon span { font-size: 12px; color: var(--ink3); text-transform: capitalize; }
.lbl.mon.yr b { display: block; font: 700 22px var(--serif); color: var(--ink); }

/* ---------- events ---------- */
svg.lnk { position: absolute; left: 0; top: 0; overflow: visible; width: auto; height: auto; stroke-width: 1; pointer-events: none; }
.lk { fill: none; stroke: var(--rule); stroke-width: 1.25; }
.lk.s-wait, .lk.s-ask { stroke: var(--now); }
.dot { fill: var(--ink); stroke: var(--paper); stroke-width: 1.5; }
.dot.s-wait, .dot.s-ask { fill: var(--card); stroke: var(--now); stroke-width: 2.5; }
.dot.s-ok { fill: var(--ok); }
.dot.s-past, .dot.s-late { fill: var(--warn); }
.dot.s-done { fill: var(--ink3); opacity: .55; }
.dot.s-asset { fill: var(--ink2); }
.dot.s-cal { fill: var(--paper); stroke: var(--ink3); stroke-width: 1.75; }
.dot.s-busy, .dot.s-err { fill: var(--now); }

.ev { position: absolute; left: var(--left); right: 16px; max-width: 660px; z-index: 2; background: var(--card); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 1px 1px rgba(0, 0, 0, .05), 0 8px 16px -10px var(--shadow); }
.ev-head { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 14px; border-radius: 8px; }
.ev-title { display: block; font: 700 17px/1.25 var(--serif); overflow-wrap: anywhere; text-wrap: pretty; }
.ev-meta { display: block; margin-top: 2px; font-size: 13px; color: var(--ink3); }
.tag { margin-left: .7em; font-size: 12px; font-weight: 700; color: var(--ink2); }
.s-wait .tag, .s-ask .tag, .s-err .tag { color: var(--now); }
.s-ok .tag { color: var(--ok); }
.s-past .tag, .s-late .tag { color: var(--warn); }
.ev.s-wait, .ev.s-ask { border-color: var(--now); }
.ev.s-done { background: transparent; box-shadow: none; }
.ev.s-done .ev-title { color: var(--ink2); font-weight: 600; }
.ev.k-cal { background: transparent; border-style: dashed; box-shadow: none; }
.ev.k-asset { background: transparent; box-shadow: none; }
.ev.k-asset .ev-title { font-size: 15.5px; font-variant-numeric: lining-nums; }
.ev.k-note { background: transparent; border: 1px dashed var(--rule); box-shadow: none; padding: 12px 14px; }
.ev.k-note .ev-title { font-size: 16px; color: var(--ink2); }
.s-busy .tag::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--now); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .s-busy .tag::before { animation: none; } }
.sum { padding: 0 14px 4px; font-size: 14.5px; color: var(--ink2); max-width: 65ch; }
.sum.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-bottom: 10px; }
.ev.lv-den .ev-title { font-size: 20px; }
.ev.lv-den .ev-head { padding-bottom: 6px; }
.ev.lv-tyden .ev-head { padding: 8px 14px; }
.ev.lv-mesic .ev-head, .ev.lv-rok .ev-head { padding: 5px 12px; }
.ev.lv-mesic .ev-title, .ev.lv-rok .ev-title { font: 600 14px/1.3 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev.lv-mesic .ev-meta, .ev.lv-rok .ev-meta { display: none; }
.ev.lv-rok .ev-head { padding: 3px 10px; }
.ev.lv-rok .ev-title { font-size: 12.5px; }
.ev.lv-rok, .ev.lv-mesic { border-radius: 6px; }
.ev.lv-rok.k-note, .ev.lv-mesic.k-note { display: none; }
.ev.is-open { border-color: var(--ink); box-shadow: 0 2px 2px rgba(0, 0, 0, .06), 0 16px 30px -14px var(--shadow); z-index: 4; }
.ev.is-open .ev-title { white-space: normal; font: 700 19px/1.25 var(--serif); }
.ev.is-open .ev-meta { display: block; }
.ev-body { padding: 0 0 14px; }
.ev-body dl, .pbody dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; padding: 6px 14px; font-size: 14px; }
.pbody dl { padding: 6px 0; }
dt { color: var(--ink3); }
.cite { margin: 8px 14px 0; padding: 8px 12px; background: var(--past); border-radius: 6px; font: italic 14.5px/1.45 var(--serif); color: var(--ink2); }
.cite::before { content: "„"; } .cite::after { content: "“"; }
.acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px 0; }
.dt { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--ink2); }
.dt input { font: 15px var(--sans); padding: 6px 8px; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); min-height: 38px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--ink); background: transparent; color: var(--ink); border-radius: 6px; font: 600 14px var(--sans); text-decoration: none; }
.btn:hover { background: var(--wk); }
.btn.pri { background: var(--ink); color: var(--paper); }
.btn.pri:hover { background: var(--ink2); }
.btn.quiet { border-color: var(--rule); font-weight: 500; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .5; cursor: progress; }
.btn svg { width: 18px; height: 18px; }

/* ---------- bottom bar ---------- */
.new, .go { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--ink); color: var(--paper); display: grid; place-items: center; }
.go { background: var(--now); color: var(--on-now); }
.go:disabled { opacity: .5; }
.bar input { flex: 1; min-width: 0; height: 46px; border-radius: 23px; border: 1px solid var(--rule); background: var(--paper); padding: 0 20px; font: 16px var(--sans); }
.bar input::placeholder { color: var(--ink3); opacity: 1; }
.bar input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }

/* ---------- panel ---------- */
.x { position: sticky; top: 10px; float: right; margin: 10px 12px 0 0; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--rule); background: var(--card); display: grid; place-items: center; z-index: 3; }
.pbody { padding: 26px 26px 48px; }
.pbody h2 { font: 700 28px/1.15 var(--serif); letter-spacing: -.01em; padding-right: 48px; text-wrap: balance; }
.pbody h3 { margin: 28px 0 10px; padding-top: 12px; border-top: 1px solid var(--rule); font: 700 17px var(--serif); }
.pmeta { margin-top: 6px; color: var(--ink3); font-size: 14px; }
.sum.big { padding: 0; margin-top: 16px; font: 18px/1.5 var(--serif); color: var(--ink); }
.flag { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--now); border-radius: 6px; font-size: 14px; }
.empty { color: var(--ink3); font-size: 14.5px; padding: 6px 0; }
.term-row { padding: 10px 0; border-bottom: 1px solid var(--rule2); }
.term-row b { display: block; font: 700 16px/1.3 var(--serif); }
.term-row span { font-size: 13px; color: var(--ink3); }
.term-row .acts { padding: 8px 0 0; }
.viewer { border: 1px solid var(--rule); border-radius: 6px; background: var(--past); overflow: hidden; }
.doc-frame { display: block; width: 100%; height: 440px; border: 0; background: #fff; }
.doc-img { display: block; width: 100%; height: auto; }
.links-row { margin-top: 8px; font-size: 14px; }
.doc-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 340px; overflow: auto; margin: 0; padding: 12px; background: var(--past); border-radius: 6px; font: 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink2); }
.search { width: 100%; margin-top: 16px; height: 44px; border: 1px solid var(--rule); border-radius: 6px; padding: 0 14px; font: 16px var(--sans); background: var(--paper); }
.plist { margin-top: 10px; border-top: 1px solid var(--rule); }
.plist button { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--rule2); background: none; padding: 12px 2px; }
.plist button:hover .pt { text-decoration: underline; }
.pt { display: block; font: 700 16px/1.3 var(--serif); }
.pm { display: block; font-size: 13px; color: var(--ink3); margin-top: 2px; }
.q { margin-top: 14px; font: italic 20px/1.35 var(--serif); color: var(--ink2); }
.a { margin-top: 16px; font: 18px/1.55 var(--serif); max-width: 62ch; }
.a.thinking { color: var(--ink3); }
.ai { margin-top: 24px; font-size: 13px; color: var(--ink3); }
.net { margin-top: 18px; }
.net span { display: block; font-size: 14px; color: var(--ink3); }
.net b { font: 700 40px/1.1 var(--serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.two { margin-top: 10px; }
.navrh { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 16px; padding: 12px; border: 1px solid var(--now); border-radius: 6px; font-size: 14px; }
.mlist > li { padding: 12px 0; border-bottom: 1px solid var(--rule2); }
.mrow { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.mrow b { display: block; font: 700 16px var(--serif); }
.mrow span { font-size: 13px; color: var(--ink3); }
.mrow strong { font: 700 17px var(--serif); white-space: nowrap; font-variant-numeric: lining-nums; }
.mform { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; align-items: end; }
.mform label, .col { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink2); }
.mform input, .mform select, textarea { font: 16px var(--sans); padding: 9px 10px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); min-height: 42px; }
textarea { width: 100%; resize: vertical; }
.pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pick .btn { cursor: pointer; }
.files { margin: 12px 0 0; font-size: 14px; color: var(--ink2); }
.voice { min-height: 1.4em; margin: 8px 0 12px; font-size: 14px; color: var(--ink2); }
.hint { margin: 12px 0 16px; font-size: 13.5px; color: var(--ink3); }
#paperForm .col { margin-top: 16px; }

.toast { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 50; background: var(--ink); color: var(--paper); padding: 11px 18px; border-radius: 8px; font-size: 14.5px; max-width: min(92vw, 560px); box-shadow: 0 10px 24px -8px var(--shadow); }
.toast.bad { background: var(--now); color: var(--on-now); }
.login { position: fixed; inset: 0; z-index: 100; background: var(--paper); display: flex; flex-direction: column; gap: 18px; align-items: center; justify-content: center; padding: 24px; text-align: center; font: 19px/1.4 var(--serif); }

/* ---------- phone ---------- */
@media (max-width: 820px) {
  .app, .app.has-detail { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "side" "stage" "bar"; }
  .side { padding: 10px 14px 10px; gap: 9px; border-right: 0; border-bottom: 1px solid var(--rule); overflow: visible; display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .brand { display: flex; align-items: baseline; gap: 12px; grid-column: 1 / -1; }
  .brand h1 { font-size: 21px; }
  .links { margin: 0 0 0 auto; font-size: 13px; }
  .readout { display: none; }
  .zoom { grid-column: 1 / -1; }
  .zbtn { width: 44px; }
  .scale button { min-height: 44px; }
  .quick { grid-column: 1; }
  .waiting { grid-column: 2; grid-row: 3; }
  .waiting ul, .waiting .note { display: none; }
  .chip { padding: 7px 13px; font-size: 13.5px; }
  .link-btn { font-size: 14px; }
  .detail { position: fixed; left: 0; right: 0; bottom: 0; top: 9vh; z-index: 30; border: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -12px 40px -10px var(--shadow); }
  .pbody { padding: 22px 18px 40px; }
  .pbody h2 { font-size: 24px; }
  .toast { bottom: 84px; }
  .back { bottom: 12px; right: 12px; }
  .lbl.day span { font-size: 15.5px; white-space: nowrap; letter-spacing: -.02em; }
  .lbl.day b { font-size: 11px; }
  .ev-title { font-size: 16px; }
  .ev.lv-den .ev-title { font-size: 18px; }
  .nowline .tab { font-size: 11px; }
  .mform { grid-template-columns: 1fr; }
  .doc-frame { height: 360px; }
}
@media (min-width: 821px) and (max-width: 1150px) {
  .app { grid-template-columns: 290px minmax(0, 1fr) 0; }
  .app.has-detail { grid-template-columns: 290px minmax(0, 1fr) 420px; }
  .side { padding: 20px 18px; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 820px) {
  .detail:not([hidden]) { animation: rise .28s cubic-bezier(.16, 1, .3, 1); }
  @keyframes rise { from { transform: translateY(40px); opacity: 0; } }
}

@media (min-width: 821px) {
  .nowline .tab { left: auto; right: 0; border-radius: 6px 0 0 6px; padding: 5px 12px 5px 10px; text-align: right; }
}
@media (max-width: 820px) { .toast { bottom: 150px; } }