/* SANDR iOS prototype: Places, venue sheet, Work, plan, task. */
.pg { position: absolute; inset: 0; }
.pg-scroll { position: absolute; inset: 0; }
.pg-top { height: calc(var(--safe-top) + 52px); }
.pg-bottom { height: calc(var(--dock-h) + 34px); }
.field { width: 100%; border: 0; outline: 0; background: transparent; padding: 0; }
.pg-search { margin: 2px 16px 12px; min-height: 44px; border-radius: 22px; background: var(--fill); display: flex; align-items: center; gap: 8px; padding: 0 14px; color: var(--ink2); transition: box-shadow .2s; }
.pg-search:focus-within { box-shadow: inset 0 0 0 1px var(--line2); }
.pg-search .field { flex: 1; min-width: 0; height: 44px; font-size: var(--fs-body); color: var(--ink); }
.pg-search .field::placeholder { color: var(--ink3); }
.pg-search button { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--fill3); color: var(--ink2); }
.pg-chips { margin-bottom: 14px; }
.stagger { animation: rise var(--d-soft) var(--e-soft) both; animation-delay: calc(var(--i, 0) * 60ms * var(--tm)); }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }
.notice { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 18px; background: var(--fill); font-size: var(--fs-sub); }
.notice span { flex: 1; }
.loading-row { display: flex; gap: 12px; align-items: center; padding: 4px 4px 8px; color: var(--ink2); }
.loading-row span { display: flex; flex-direction: column; }
.loading-row strong { color: var(--ink); font-size: var(--fs-call); }
.loading-row small { font-size: var(--fs-foot); }

/* places */
.plist { padding: 0 16px; display: flex; flex-direction: column; gap: 12px; }
.pcard { background: var(--card); border-radius: 26px; transition: transform var(--d-ui) var(--e-ui); }
.pcard-main { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 16px 16px 10px; text-align: left; border-radius: 26px; transition: transform var(--d-fast) var(--e-ui); }
.pcard-main:active { transform: scale(.985); }
.pcard.skel .pcard-main { padding: 16px; }
.pc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pc-name { font-size: var(--fs-hd); font-weight: 600; letter-spacing: -.022em; }
.pc-badges { display: flex; align-items: center; gap: 8px; margin: 2px 0 3px; flex-wrap: wrap; }
.pc-trend { font-size: var(--fs-cap); color: var(--ink2); }
.pc-trend.up { color: var(--ok); }
.pc-trend.down { color: var(--bad); }
.pc-meta { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--ink2); }
.pc-stats { display: flex; flex-wrap: wrap; gap: 3px 14px; margin-top: 6px; }
.pc-stats em { font-style: normal; font-size: var(--fs-foot); color: var(--ink2); }
.pc-stats b { color: var(--ink); font-weight: 600; }
.pc-fl { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-foot); color: var(--ink2); }
.pc-actions { display: flex; align-items: center; justify-content: space-between; padding: 0 14px 14px 86px; }
.pc-thread { width: 40px; height: 40px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; transition: transform var(--d-fast) var(--e-ui); box-shadow: 0 0 0 .5px var(--line2); }
.pc-thread:active { transform: scale(.9); }
.patterns { margin: 30px 16px 0; }
.pat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; padding: 0 4px; }
.pat-head h3 { font-size: var(--fs-t3); line-height: var(--lh-t3); font-weight: 650; letter-spacing: -.02em; }
.pat-head p { font-size: var(--fs-foot); color: var(--ink2); margin-top: 2px; }
.pat-list, .pat-load { display: flex; flex-direction: column; gap: 8px; }
.pat { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: 22px; background: var(--card); text-align: left; transition: transform var(--d-fast) var(--e-ui); }
.pat:active { transform: scale(.985); }
.pat-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 8px; background: var(--fill2); letter-spacing: 0; }
.pat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pat-main strong { font-size: var(--fs-call); font-weight: 600; }
.pat-main small { font-size: var(--fs-cap); color: var(--ink2); line-height: 1.35; }

/* venue sheet */
.vtabs { flex: none; padding: 0 0 10px; }
.sheet-pager { position: relative; flex: 1; min-height: 0; touch-action: pan-y; overflow: hidden; }
.sheet-pager .pager-rail { height: 100%; }
.pane { padding-top: 4px; }
.vsec { margin: 0 16px 24px; }
.vsec > header { margin-bottom: 10px; padding: 0 4px; }
.vsec > header small { display: block; font-size: var(--fs-foot); color: var(--ink2); }
.vsec > header strong { font-size: var(--fs-hd); font-weight: 600; line-height: 1.25; display: block; }
.vscore { position: relative; display: flex; align-items: center; gap: 16px; margin: 4px 16px 8px; padding: 18px; border-radius: 26px; background: var(--card); }
.vscore .ring b { font-size: 30px; font-weight: 700; letter-spacing: -.03em; }
.vs-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vs-txt small { font-size: var(--fs-foot); color: var(--ink2); }
.vs-txt strong { font-size: var(--fs-t2); font-weight: 700; letter-spacing: -.02em; }
.vs-txt span { font-size: var(--fs-foot); color: var(--ink2); line-height: 1.35; }
.vs-delta { position: absolute; top: 12px; right: 14px; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: var(--fs-foot); font-weight: 600; animation: pop-in .55s var(--e-pop); }
@keyframes pop-in { from { transform: scale(.5) translateY(-6px); opacity: 0; } }
.vs-receipt { min-height: 20px; margin: 0 20px 14px; font-size: var(--fs-foot); color: var(--ink2); }
.spark { width: 100%; height: auto; display: block; overflow: visible; }
.sp-area { fill: var(--fill); opacity: 0; transition: opacity .8s ease .5s; }
.sp-line { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--e-soft); }
.sp-dot { fill: var(--ink); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .5s var(--e-pop) .9s, opacity .2s .9s; }
.spark.in .sp-line { stroke-dashoffset: 0; }
.spark.in .sp-area { opacity: 1; }
.spark.in .sp-dot { opacity: 1; transform: scale(1); }
.sp-lbl { display: flex; justify-content: space-between; font-size: var(--fs-cap); color: var(--ink2); margin-top: 4px; }
.radar { width: 100%; height: auto; display: block; }
.rd-grid { fill: none; stroke: var(--line2); }
.rd-axis { stroke: var(--line2); }
.rd-poly { fill: color-mix(in srgb, var(--ink) 11%, transparent); stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; transform-box: view-box; transform-origin: 140px 104px; transform: scale(0); transition: transform 1s var(--e-soft); }
.radar.in .rd-poly { transform: scale(1); }
.rd-pt { fill: var(--ink); opacity: 0; transition: opacity .4s ease .8s; }
.radar.in .rd-pt { opacity: 1; }
.rd-lbl { font-size: 11px; fill: var(--ink2); letter-spacing: 0; }
.rd-leg { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: var(--fs-foot); }
.rd-leg li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rd-leg li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); }
.rd-leg li em { font-style: normal; color: var(--bad); font-size: var(--fs-cap); }
.rd-leg li i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); flex: none; }
.pbars { display: flex; flex-direction: column; gap: 12px; }
.pbar { display: grid; grid-template-columns: 128px 1fr 54px; gap: 10px; align-items: center; font-size: var(--fs-foot); }
.pb-l { color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-t { height: 8px; border-radius: 4px; background: var(--fill2); overflow: hidden; }
.pb-t i { display: block; height: 100%; background: var(--ink); border-radius: 4px; transition: width 1s var(--e-soft); }
.pb-n { text-align: right; font-weight: 600; }
.pb-n em { font-style: normal; font-weight: 400; color: var(--bad); font-size: var(--fs-cap); }
.siglist { display: flex; flex-direction: column; gap: 12px; }
.sig { padding: 16px; border-radius: 24px; background: var(--card); display: flex; flex-direction: column; gap: 8px; transition: opacity .3s, transform .3s; animation: msg-in var(--d-ui) var(--e-ui); }
.sig.primary { box-shadow: inset 0 0 0 1px var(--line2); }
.sig.busy { opacity: .72; }
.sig.resolved { flex-direction: row; justify-content: space-between; align-items: center; opacity: .6; }
.sig.resolved small { color: var(--ink2); }
.sig header { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.sig header strong { font-size: var(--fs-hd); font-weight: 600; line-height: 1.25; }
.sig header small { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sig-prio { align-self: flex-start; font-size: var(--fs-cap); font-weight: 600; background: var(--ink); color: var(--on-ink); padding: 2px 9px; border-radius: 999px; }
.sig p { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--ink2); }
.sig-ev { display: flex; align-items: center; gap: 6px; font-size: var(--fs-foot); color: var(--ink2); padding: 4px 0; align-self: flex-start; }
.sig-quotes { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.sig-quotes blockquote { margin: 0; padding: 10px 12px; border-radius: 14px; background: var(--fill); }
.sig-quotes blockquote p { color: var(--ink); font-size: var(--fs-sub); }
.sig-quotes blockquote small { color: var(--ink2); font-size: var(--fs-cap); }
.sig-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
.sig-acts .res { color: var(--ok); }
.sig-status { display: flex; align-items: center; gap: 6px; color: var(--ink2); font-size: var(--fs-foot); }
.vctx { font-size: var(--fs-sub); color: var(--ink2); padding: 0 4px; }
.vctx-n { font-size: var(--fs-sub); margin-top: 6px; padding: 0 4px; }
.vcta { margin: 0 16px 20px; }
.vcta .btn.l { width: 100%; }
.vcta.row2 { display: flex; gap: 10px; }
.vcta.row2 .btn { flex: 1; }

/* frontline pane */
.fpat { margin: 4px 16px 22px; padding: 18px; border-radius: 26px; background: var(--card); display: flex; flex-direction: column; gap: 14px; }
.fpat header small, .fp-impact small, .fp-guide small { display: flex; align-items: center; gap: 5px; font-size: var(--fs-foot); color: var(--ink2); }
.fpat header h3 { font-size: var(--fs-t3); line-height: var(--lh-t3); font-weight: 650; letter-spacing: -.02em; margin: 2px 0 6px; }
.fpat header p, .fp-impact p, .fp-guide p { font-size: var(--fs-sub); line-height: var(--lh-sub); }
.fp-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-facts span { padding: 4px 10px; border-radius: 999px; background: var(--fill2); font-size: var(--fs-foot); }
.fp-impact, .fp-guide { display: flex; flex-direction: column; gap: 10px; }
.fp-guide .private { padding: 12px; border-radius: 16px; background: var(--fill); }
.fp-actions { display: flex; gap: 10px; }
.fp-actions .btn { flex: 1; }
.fp-notice { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--ok) 11%, transparent); font-size: var(--fs-sub); color: var(--ink); }
.fp-notice .ic { color: var(--ok); }
.fform { margin: 0 16px 24px; padding: 18px; border-radius: 26px; background: var(--card); display: flex; flex-direction: column; gap: 18px; }
.fform > header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.fform > header span { display: flex; flex-direction: column; }
.fform > header small { font-size: var(--fs-foot); color: var(--ink2); }
.fform > header strong { font-size: var(--fs-hd); }
.fform > header p { font-size: var(--fs-foot); color: var(--ink2); margin-top: 3px; }
.fdraft { font-size: var(--fs-foot); color: var(--ink2); padding: 10px 12px; border-radius: 12px; background: var(--fill); }
.ffield label { display: flex; justify-content: space-between; font-weight: 600; font-size: var(--fs-sub); }
.ffield label em { font-style: normal; font-weight: 400; color: var(--ink2); font-size: var(--fs-foot); }
.ffield p { font-size: var(--fs-foot); color: var(--ink2); margin: 2px 0 8px; }
.fta { width: 100%; border: 0; outline: 0; background: var(--bg); border-radius: 16px; padding: 12px 14px; font-size: var(--fs-body); line-height: 1.35; resize: none; min-height: 78px; display: block; }
.stages { display: flex; flex-wrap: wrap; gap: 8px; }
.stage { padding: 9px 15px; border-radius: 999px; background: var(--fill); font-weight: 500; font-size: var(--fs-sub); transition: background-color .2s, color .2s, transform var(--d-fast) var(--e-ui); }
.stage:active { transform: scale(.95); }
.stage.on { background: var(--ink); color: var(--on-ink); }
.fprev > small { display: block; font-size: var(--fs-foot); color: var(--ink2); margin-bottom: 8px; }
.fprev article { padding: 16px; border-radius: 20px; background: var(--bg); display: flex; flex-direction: column; gap: 8px; }
.fp-top { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-cap); color: var(--ink2); }
.fprev article strong { font-size: var(--fs-hd); line-height: 1.3; }
.fprev article p { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--ink2); }
.fprev article p b { color: var(--ink); font-weight: 600; }
.fneed { font-size: var(--fs-foot); color: var(--ink2); text-align: center; }
.rail { display: flex; list-style: none; margin: 10px 0 0; padding: 0; }
.rail li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: var(--fs-cap2); color: var(--ink3); position: relative; transition: color .3s; }
.rail li::before { content: ""; position: absolute; top: 6px; right: 50%; width: 100%; height: 2px; background: var(--fill3); z-index: 0; transition: background-color .4s; }
.rail li:first-child::before { display: none; }
.rail li.done::before { background: var(--ink); }
.rail li.done { color: var(--ink); }
.rail-n { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--fill3); transition: background-color .3s, transform .5s var(--e-pop); }
.rail li.done .rail-n { background: var(--ink); }
.rail li.now .rail-n { transform: scale(1.3); box-shadow: 0 0 0 4px var(--fill2); }

/* reports, tasks, notes, timeline */
.rcards { display: flex; flex-direction: column; gap: 12px; }
.rcard { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 16px; border-radius: 24px; background: var(--card); text-align: left; transition: transform var(--d-fast) var(--e-ui); }
.rcard:active { transform: scale(.985); }
.rcard header { display: flex; justify-content: space-between; align-items: center; }
.rc-type { font-size: var(--fs-foot); font-weight: 600; }
.rcard header small { color: var(--ink2); font-size: var(--fs-foot); }
.rcard strong { font-size: var(--fs-hd); font-weight: 600; }
.rcard p { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--ink2); }
.rc-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 2px; font-size: var(--fs-foot); color: var(--ink2); }
.rc-stats em { font-style: normal; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--fill2); color: var(--ink); }
.rc-stats em.bad { background: color-mix(in srgb, var(--bad) 13%, transparent); color: var(--bad); }
.rc-stats em.warn { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.rc-doms { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-doms span { font-size: var(--fs-cap); padding: 3px 9px; border-radius: 999px; background: var(--fill); color: var(--ink2); }
.rplan { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; padding: 12px 14px; border-radius: 18px; background: var(--fill); }
.rplan span { display: flex; flex-direction: column; }
.rplan small { color: var(--ink2); font-size: var(--fs-foot); }
.tcount { margin: 4px 20px 12px; color: var(--ink2); font-size: var(--fs-sub); }
.row-note { font-size: var(--fs-foot); line-height: var(--lh-foot); color: var(--ink2); margin-top: 2px; }
.tl { list-style: none; margin: 0; padding: 0 4px; display: flex; flex-direction: column; gap: 14px; }
.tl li { display: grid; grid-template-columns: 8px 1fr auto; gap: 12px; align-items: baseline; font-size: var(--fs-sub); }
.tl li i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink3); }
.tl li small { color: var(--ink2); font-size: var(--fs-foot); }
.notes { display: flex; flex-direction: column; gap: 10px; }
.notes article { padding: 14px 16px; border-radius: 22px; background: var(--card); }
.notes article header { display: flex; flex-direction: column; }
.notes article header small { color: var(--ink2); font-size: var(--fs-foot); }
.notes article p { margin-top: 6px; font-size: var(--fs-sub); line-height: var(--lh-sub); }

/* team, docs, forms */
.dform { display: flex; flex-direction: column; gap: 14px; margin: 0 16px 22px; padding: 16px; border-radius: 24px; background: var(--card); }
.dform.padded { margin-top: 8px; }
.dform label { display: flex; flex-direction: column; gap: 6px; }
.dform label small { font-size: var(--fs-foot); color: var(--ink2); padding-left: 2px; }
.dform .field { width: 100%; border: 0; outline: 0; background: var(--bg); border-radius: 14px; padding: 12px 14px; font-size: var(--fs-body); min-height: 46px; display: block; resize: none; line-height: 1.3; }
.select { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 46px; padding: 0 14px; border-radius: 14px; background: var(--bg); font-size: var(--fs-body); text-align: left; }
.select .ph { color: var(--ink3); }
.tmatch { padding: 12px 14px; border-radius: 16px; background: var(--fill); font-size: var(--fs-sub); display: flex; flex-direction: column; gap: 8px; }
.tmatch p { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--fs-foot); }
.tmatch div { display: flex; flex-direction: column; gap: 2px; }
.tmatch span, .tmatch em { color: var(--ink2); font-size: var(--fs-foot); font-style: normal; }
.tmatch button { align-self: flex-start; margin-top: 4px; padding: 6px 10px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-size: var(--fs-foot); font-weight: 600; }
.dept { margin: 14px 4px 8px; font-size: var(--fs-foot); color: var(--ink2); font-weight: 600; }
.roster, .docs { display: flex; flex-direction: column; gap: 10px; }
.mem { padding: 14px 16px; border-radius: 22px; background: var(--card); display: flex; flex-direction: column; gap: 10px; }
.mem.off { opacity: .6; }
.mem header { display: flex; align-items: center; gap: 12px; }
.mem header span { display: flex; flex-direction: column; }
.mem header small { color: var(--ink2); font-size: var(--fs-foot); }
.skills { display: flex; flex-wrap: wrap; gap: 6px; }
.skills em { font-style: normal; font-size: var(--fs-cap); padding: 3px 9px; border-radius: 999px; background: var(--fill2); }
.macts { display: flex; gap: 8px; flex-wrap: wrap; }
.medit { display: flex; flex-direction: column; gap: 10px; }
.medit label { display: flex; flex-direction: column; gap: 6px; }
.medit label small { color: var(--ink2); font-size: var(--fs-foot); }
.doc { padding: 14px 16px; border-radius: 22px; background: var(--card); display: flex; flex-direction: column; gap: 10px; }
.doc header { display: flex; align-items: center; gap: 12px; }
.doc-ic { width: 42px; height: 42px; border-radius: 13px; background: var(--fill2); display: grid; place-items: center; flex: none; }
.doc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.doc-t small { color: var(--ink2); font-size: var(--fs-foot); }
.doc-lock { display: flex; gap: 6px; align-items: center; font-size: var(--fs-foot); color: var(--ink2); }
.withhold { display: flex; gap: 12px; align-items: center; }
.withhold span { flex: 1; display: flex; flex-direction: column; }
.withhold small { color: var(--ink2); font-size: var(--fs-foot); line-height: 1.35; }
.drev { margin-top: 2px; padding: 14px; border-radius: 18px; background: var(--fill); display: flex; flex-direction: column; gap: 10px; }
.drev label { display: flex; flex-direction: column; gap: 6px; }
.drev label small { color: var(--ink2); font-size: var(--fs-foot); }
.drev .field { background: var(--bg); border-radius: 12px; padding: 11px 12px; min-height: 44px; }
.drev-out { display: flex; flex-direction: column; gap: 12px; }
.drev-out article strong { font-size: var(--fs-sub); }
.drev-out article p { font-size: var(--fs-sub); margin: 2px 0 6px; }
.drev-out blockquote { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--bg); font-size: var(--fs-sub); color: var(--ink2); font-style: italic; }
.drev-out ul { margin: 0; padding-left: 20px; font-size: var(--fs-sub); }
.caveat { color: var(--ink2); font-size: var(--fs-cap); }

/* share, reader, viewer, profile */
.sh-doc { display: flex; gap: 14px; align-items: center; margin: 4px 16px 16px; padding: 14px; border-radius: 22px; background: var(--card); }
.sh-ic { width: 52px; height: 52px; border-radius: 14px; background: var(--fill2); display: grid; place-items: center; }
.sh-doc span:last-child { display: flex; flex-direction: column; }
.sh-doc small { color: var(--ink2); font-size: var(--fs-foot); }
.sh-row { display: flex; gap: 16px; overflow-x: auto; padding: 0 16px 20px; scrollbar-width: none; touch-action: pan-x; }
.sh-row button { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: var(--fs-cap); flex: none; }
.sh-row button i { width: 60px; height: 60px; border-radius: 50%; background: var(--card); display: grid; place-items: center; transition: transform var(--d-fast) var(--e-ui); }
.sh-row button:active i { transform: scale(.9); }
.report { padding: 0 20px 90px; }
.rp-head { font-size: var(--fs-t3); line-height: 1.3; font-weight: 600; letter-spacing: -.02em; margin-bottom: 12px; }
.report section h3 { font-size: var(--fs-hd); font-weight: 650; margin: 22px 0 6px; }
.report section p, .report section li { font-size: var(--fs-body); line-height: 25px; }
.report section ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.reader-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; padding: 24px 16px calc(var(--safe-bottom) - 6px); background: linear-gradient(transparent, var(--bg) 26%); }
.reader-foot .btn:first-child { flex: 1; }
.fv-img { margin: 8px 16px; aspect-ratio: 4 / 3; border-radius: 22px; display: grid; place-items: center; color: rgba(255, 255, 255, .85); }
.fv-doc { margin: 8px 28px; padding: 26px; border-radius: 16px; background: var(--card); aspect-ratio: 1 / 1.3; display: flex; flex-direction: column; gap: 14px; }
.fv-doc i { display: block; height: 9px; border-radius: 5px; background: var(--fill3); }
.fv-doc i.s { width: 58%; }
.pf-id { margin: 0 20px 18px; }
.pf-id p { font-size: var(--fs-sub); color: var(--ink2); }
.pf-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.row-next { font-size: var(--fs-foot); color: var(--warn); margin-top: 1px; }
.stamp { text-align: center; color: var(--ink3); font-size: var(--fs-cap); margin: 0 0 20px; }
.txt-btn.small { font-size: var(--fs-foot); padding: 0 4px; color: var(--ink); font-weight: 600; }
.hrow { display: flex; align-items: center; gap: 10px; padding: 8px 14px; min-height: 58px; }
.hrow + .hrow { border-top: .5px solid var(--line2); }
.hd { width: 40px; font-weight: 600; }
.tbtn { min-width: 68px; height: 36px; padding: 0 10px; border-radius: 10px; background: var(--fill2); font-variant-numeric: tabular-nums; transition: background-color .2s; }
.tbtn:active { background: var(--fill3); }
.hdash { color: var(--ink3); }
.hclosed { flex: 1; color: var(--ink2); }
.hrow .tgl { margin-left: auto; }
.tpop { padding: 4px; }
.hpack { padding: 0 20px 30px; display: flex; flex-direction: column; gap: 18px; }
.hpack h3 { font-size: var(--fs-hd); font-weight: 650; margin-bottom: 4px; }
.hpack p { font-size: var(--fs-sub); line-height: 22px; }
.hpack .unset { color: var(--ink3); }

/* work */
.wtiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 16px 22px; }
.wtile { display: flex; flex-direction: column; padding: 14px; border-radius: 22px; background: var(--card); gap: 2px; }
.wtile b { font-size: 30px; line-height: 34px; font-weight: 700; letter-spacing: -.03em; }
.wtile span { font-size: var(--fs-foot); color: var(--ink2); }
.wtile.bad b { color: var(--bad); }
.wtile.warn b { color: var(--warn); }
.wsort { display: flex; justify-content: space-between; align-items: center; margin: 4px 20px 8px; }
.wsort h4 { font-size: var(--fs-foot); font-weight: 400; color: var(--ink2); }
.sortbtn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--fill); font-size: var(--fs-foot); font-weight: 500; transition: background-color .2s; }
.sortbtn i { display: inline-grid; color: var(--ink2); }
.sortbtn:active { background: var(--fill2); }
.sortdir { color: var(--ink); }
.wlist { margin: 0 16px; background: var(--card); border-radius: 24px; overflow: hidden; }
.wvenue + .wvenue { border-top: .5px solid var(--line2); }
.whead { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; text-align: left; transition: background-color .35s; }
.whead:active { background: var(--fill2); transition-duration: 0s; }
.wname { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wname strong { font-size: var(--fs-body); font-weight: 600; }
.wname small { font-size: var(--fs-foot); color: var(--ink2); }
.wprog { width: 42px; height: 5px; border-radius: 3px; background: var(--fill3); overflow: hidden; flex: none; }
.wprog i { display: block; height: 100%; background: var(--ink); border-radius: 3px; transition: width 1s var(--e-soft); }
.row-chev.flip { transform: rotate(0deg); }
.wplans { padding: 0 16px 6px 62px; }
.wplan { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 0; border-top: .5px solid var(--line2); text-align: left; }
.wp-t { flex: 1; min-width: 0; }
.wplan small { color: var(--ink2); font-size: var(--fs-foot); }
.wsk { display: flex; align-items: center; gap: 12px; padding: 16px; }
.wsk + .wsk { border-top: .5px solid var(--line2); }
.plan { padding: 0 16px; }
.plan-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.pm-o { font-size: var(--fs-foot); color: var(--ink2); }
.banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 20px; background: var(--fill); margin-bottom: 14px; }
.banner > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.banner small { color: var(--ink2); font-size: var(--fs-foot); }
.bn-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.finished { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: 22px; background: var(--card); margin-bottom: 14px; }
.finished div { flex: 1; }
.finished p { font-size: var(--fs-sub); color: var(--ink2); }
.spine { margin-bottom: 16px; }
.sp-bar { display: flex; gap: 4px; height: 12px; }
.sp-bar i { flex: 1; border-radius: 4px; background: var(--fill3); transform-origin: bottom; transition: transform .55s var(--e-pop); }
.sp-bar i.done { background: var(--ink); }
.sp-bar i.in_progress { background: repeating-linear-gradient(135deg, var(--ink) 0 4px, var(--ink3) 4px 8px); }
.sp-bar i.blocked { background: var(--bad); }
.sp-leg { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: var(--fs-foot); color: var(--ink2); }
.sp-leg span { display: inline-flex; align-items: center; gap: 5px; }
.sp-leg i { width: 8px; height: 8px; border-radius: 2px; background: var(--fill3); }
.sp-leg .in_progress i { background: var(--ink3); } .sp-leg .blocked i { background: var(--bad); }
.integrity { padding: 14px 16px; border-radius: 20px; background: color-mix(in srgb, var(--warn) 10%, var(--bg)); margin-bottom: 14px; display: flex; flex-direction: column; gap: 4px; }
.integrity small { font-size: var(--fs-foot); color: var(--warn); font-weight: 600; }
.integrity p { font-size: var(--fs-sub); color: var(--ink2); }
.ig-refs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ig-refs span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-foot); color: var(--ink2); }
.ig-refs i { font-style: normal; }
.origin, .pord { padding: 16px; border-radius: 24px; background: var(--card); margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.origin header small, .pord > small { font-size: var(--fs-foot); color: var(--ink2); }
.origin header p { font-size: var(--fs-call); line-height: 1.35; font-weight: 500; margin-top: 4px; }
.og-sigs { display: flex; flex-direction: column; gap: 6px; }
.og-sigs button { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; background: var(--bg); font-size: var(--fs-sub); text-align: left; }
.og-sigs button span { flex: 1; }
.og-sigs button em { font-style: normal; font-size: var(--fs-cap); color: var(--ink2); }
.og-sigs button i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink3); }
.og-sigs button i.high { background: var(--bad); }
.og-sigs button i.medium { background: var(--warn); }
.og-dis { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sub); font-weight: 500; align-self: flex-start; }
.og-note { margin: 6px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--bg); font-size: var(--fs-sub); line-height: 22px; color: var(--ink2); font-style: italic; }
.og-rep { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 600; font-size: var(--fs-sub); }
.po-lead { font-size: var(--fs-call); }
.po-route { font-size: var(--fs-sub); color: var(--ink2); }
.po-list { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; font-size: var(--fs-sub); color: var(--ink2); }
.po-list b { color: var(--ink); font-weight: 600; }
.pview { margin: 4px 0 12px; }
.layers { display: flex; flex-direction: column; }
.ls-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 4px; text-align: left; }
.ls-head span { flex: 1; display: flex; flex-direction: column; }
.ls-head small { font-size: var(--fs-foot); color: var(--ink2); }
.ls-head strong { font-size: var(--fs-t3); font-weight: 650; letter-spacing: -.02em; }
.ls-head em { font-style: normal; font-size: var(--fs-foot); background: var(--fill2); padding: 2px 9px; border-radius: 999px; font-weight: 600; }
.ls-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 14px; }
.ls-body > p { font-size: var(--fs-sub); color: var(--ink2); padding: 0 4px; }
.blk-card { padding: 14px 14px 12px; border-radius: 24px; background: var(--card); display: flex; flex-direction: column; gap: 9px; -webkit-touch-callout: none; transition: box-shadow .3s; }
.blk.focus .blk-card { box-shadow: inset 0 0 0 1.5px var(--ink); }
.blk.done .blk-title strong { color: var(--ink2); }
.blk-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.blk-refs { display: flex; gap: 4px; flex-wrap: wrap; }
.blk-tr { display: flex; align-items: center; gap: 6px; }
.pulse { font-size: var(--fs-foot); color: var(--ink2); white-space: nowrap; }
.pulse.late { color: var(--bad); font-weight: 600; }
.blk-menu { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--ink2); margin-right: -6px; }
.blk-menu:active { background: var(--fill2); }
.blk-title { text-align: left; display: flex; flex-direction: column; gap: 2px; }
.blk-title strong { font-size: var(--fs-hd); font-weight: 600; line-height: 1.25; }
.blk-title small { font-size: var(--fs-foot); color: var(--ink2); }
.blk-quote { margin: 0; padding: 10px 12px; border-radius: 16px; background: var(--fill); display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sub); line-height: var(--lh-sub); }
.blk-quote cite { font-style: normal; font-size: var(--fs-cap); color: var(--ink2); }
.blk-quote.big { margin: 0 16px 14px; position: relative; }
.blk-quote button { align-self: flex-start; margin-top: 4px; font-weight: 600; font-size: var(--fs-foot); }
.blk-sum { display: flex; gap: 12px; align-items: center; font-size: var(--fs-foot); color: var(--ink2); }
.blk-sum .ic { margin-left: auto; color: var(--ink3); }
.ptl { list-style: none; margin: 0; padding: 0 4px; display: flex; flex-direction: column; gap: 18px; }
.ptl-d { display: flex; align-items: center; gap: 10px; font-size: var(--fs-foot); color: var(--ink2); margin-bottom: 8px; font-weight: 600; }
.ptl-d i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink3); }
.ptl li.today .ptl-d { color: var(--ink); }
.ptl li.today .ptl-d i { background: var(--ink); box-shadow: 0 0 0 4px var(--fill2); }
.ptl-b { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; margin: 0 0 6px 20px; width: calc(100% - 20px); border-radius: 18px; background: var(--card); text-align: left; }
.ptl-b span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ptl-b small { color: var(--ink2); font-size: var(--fs-foot); }
.ptl-b.done strong { color: var(--ink2); }
.ptl-b.blocked .ic:first-child { color: var(--bad); }
.askfab { position: absolute; right: 16px; bottom: calc(var(--safe-bottom) - 2px); display: flex; gap: 8px; align-items: center; height: 48px; padding: 0 18px 0 14px; border-radius: 24px; background: var(--ink); color: var(--on-ink); font-weight: 600; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); z-index: 6; transition: transform var(--d-fast) var(--e-ui); }
.askfab:active { transform: scale(.95); }

/* task sheet */
.task { padding-top: 2px; }
.t-title { font-size: var(--fs-t2); line-height: var(--lh-t2); font-weight: 700; letter-spacing: -.02em; margin: 2px 20px 8px; }
.t-refs { display: flex; gap: 6px; margin: 0 20px 16px; }
.why { margin: 0 16px 16px; padding: 14px 16px; border-radius: 20px; background: var(--fill); }
.why small { display: block; font-size: var(--fs-foot); color: var(--ink2); margin-bottom: 2px; }
.why p { font-size: var(--fs-sub); line-height: var(--lh-sub); }
.t-status { margin: 0 16px 12px; }
.blocker { margin: 0 16px 14px; padding: 14px; border-radius: 20px; background: var(--card); display: flex; flex-direction: column; gap: 10px; }
.blocker label { display: flex; flex-direction: column; gap: 6px; }
.blocker label small { color: var(--ink2); font-size: var(--fs-foot); }
.blocker .field { background: var(--bg); border-radius: 14px; padding: 11px 12px; line-height: 1.35; }
.tsec { margin: 0 16px 24px; }
.tsec > header { display: flex; align-items: baseline; justify-content: space-between; margin: 0 4px 10px; }
.tsec > header h4 { font-size: var(--fs-t3); font-weight: 650; letter-spacing: -.02em; }
.tsec > header small { color: var(--ink2); font-size: var(--fs-foot); }
.next { padding: 12px 16px; border-radius: 18px; background: var(--fill); display: flex; flex-direction: column; font-size: var(--fs-sub); }
.next span { font-size: var(--fs-cap); color: var(--ink2); }
.sched { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 6px; }
.dbtn { display: flex; flex-direction: column; align-items: flex-start; padding: 11px 16px; border-radius: 18px; background: var(--card); text-align: left; transition: transform var(--d-fast) var(--e-ui); }
.dbtn:active { transform: scale(.97); }
.dbtn small { font-size: var(--fs-cap); color: var(--ink2); }
.dbtn span { font-weight: 600; }
.sched-note { display: flex; gap: 6px; align-items: center; font-size: var(--fs-foot); color: var(--ink2); margin: 4px 4px 8px; }
.subs { display: flex; flex-direction: column; margin-top: 6px; }
.sub { display: flex; align-items: center; gap: 12px; min-height: 50px; border-bottom: .5px solid var(--line2); cursor: pointer; }
.sub:last-child { border-bottom: 0; }
.sub s { position: relative; text-decoration: none; transition: color .3s; }
.sub s::after { content: ""; position: absolute; left: 0; top: 54%; height: 1.5px; width: 100%; background: var(--ink2); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--e-ui); }
.sub.done s { color: var(--ink2); }
.sub.done s::after { transform: scaleX(1); }
.tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tools button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--fill); font-size: var(--fs-foot); }
.tools button em { font-style: normal; color: var(--ink2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.notes-log { display: flex; flex-direction: column; }
.notes-empty { color: var(--ink2); font-size: var(--fs-sub); padding: 4px 4px 12px; }
.note { display: flex; gap: 10px; padding: 10px 0; }
.note.reply { margin-left: 40px; }
.note-b { flex: 1; min-width: 0; }
.note-b header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.note-b header small { color: var(--ink2); font-size: var(--fs-foot); }
.note-b p { font-size: var(--fs-sub); line-height: var(--lh-sub); margin-top: 2px; }
.note-m { margin-left: auto; width: 28px; height: 28px; display: grid; place-items: center; color: var(--ink3); border-radius: 50%; }
.note-add { margin-top: 6px; }
.replying { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-foot); color: var(--ink2); padding: 4px 10px; border-radius: 999px; background: var(--fill); margin-bottom: 8px; }
.note-in { display: flex; align-items: flex-end; gap: 8px; padding: 5px 5px 5px 16px; border-radius: 24px; background: var(--fill); }
.note-in .field { flex: 1; min-width: 0; padding: 9px 0; font-size: var(--fs-body); line-height: 22px; resize: none; display: block; }
.post { width: 34px; height: 34px; border-radius: 50%; background: var(--fill3); color: var(--bg); display: grid; place-items: center; flex: none; margin-bottom: 1px; transition: background-color .2s, transform var(--d-pop) var(--e-pop); }
.post.on { background: var(--ink); color: var(--on-ink); }
.post:active { transform: scale(.9); }
.proofs { margin-top: 18px; }
.proofs h4 { font-size: var(--fs-hd); font-weight: 600; margin: 0 4px 10px; }
.proof { padding: 14px; border-radius: 20px; background: var(--card); display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.proof header { display: flex; align-items: center; gap: 12px; }
.pf-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--fill2); display: grid; place-items: center; flex: none; }
.pf-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pf-t small { color: var(--ink2); font-size: var(--fs-foot); }
.pf-photo { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; display: grid; place-items: center; color: rgba(255, 255, 255, .85); }
.pf-photo small { position: absolute; bottom: 8px; left: 12px; font-size: var(--fs-cap); }
.pf-text { display: flex; gap: 6px; align-items: center; font-size: var(--fs-sub); }
.pf-reason { font-size: var(--fs-foot); color: var(--ink2); font-style: italic; }
.sig-pad { position: relative; margin: 8px 16px 14px; height: 230px; border-radius: 22px; background: var(--card); color: var(--ink); overflow: hidden; }
.sig-pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.sig-pad span { position: absolute; left: 0; right: 0; top: 46%; text-align: center; color: var(--ink3); pointer-events: none; font-size: var(--fs-call); }
.sig-pad i { position: absolute; left: 26px; right: 26px; bottom: 60px; height: 1px; background: var(--line2); }
.sheet-note.left { margin-left: 20px; margin-top: 0; }
.sig-pad + .btn { margin: 0 16px; }
.help { margin: 0 16px 22px; padding: 16px; border-radius: 22px; background: var(--card); display: flex; flex-direction: column; gap: 8px; }
.help h4 { font-size: var(--fs-hd); font-weight: 600; }
.help p { font-size: var(--fs-sub); color: var(--ink2); }
.help-a { display: flex; gap: 8px; flex-wrap: wrap; }
.help-n { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.help-n .field { background: var(--bg); border-radius: 14px; padding: 10px 12px; }
.help-n .btn { align-self: flex-end; }
.help.done { flex-direction: row; align-items: center; }
.t-foot { display: flex; gap: 10px; margin: 0 16px; }
.t-foot .btn { flex: 1; }
.rp-q { font-size: var(--fs-t3); line-height: 1.25; font-weight: 650; letter-spacing: -.02em; margin: 4px 20px 14px; }
.rp-sig { margin: 0 16px 12px; padding: 14px; border-radius: 22px; background: var(--card); }
.rp-sig header { display: flex; flex-direction: column; }
.rp-sig header small { color: var(--ink2); font-size: var(--fs-foot); }
.rp-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.rp-done { display: flex; gap: 8px; margin-top: 8px; font-size: var(--fs-sub); color: var(--ink2); }
.sbody > .btn.plain.full { margin-top: 4px; }