/* The plotting web app: OnTarget's bar and type, then as much of the screen as the sheet can have. */
@font-face { font-family: "Michroma"; src: url(/pad/michroma-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Satoshi"; src: url(/pad/satoshi-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url(/pad/satoshi-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
:root { --navy: #000c2e; --line: #011E50; --orange: #FD5902; --muted: #8fa4d1; --page: #f1f5f9; --ink: #0f172a; --bar: 44px; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overscroll-behavior: none; }
body { background: var(--page); color: var(--ink); font: 15px/1.5 "Satoshi", system-ui, sans-serif; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.hide { display: none !important; }

.bar { position: fixed; inset: 0 0 auto 0; height: calc(var(--bar) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 10px 0; background: var(--navy);
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; z-index: 10; color: #fff; }
.brand-chip { background: #f1f5f9; border-radius: 6px; display: flex; padding: 1px; }
.brand-chip img { width: 28px; height: 28px; display: block; }
.brand-word { font: 12px "Michroma", sans-serif; letter-spacing: .2em; color: var(--orange); white-space: nowrap; }
.brand-word .s { font-size: .8em; } .brand-word .a { margin-left: -.2em; } .brand-word .live { color: #34d399; }
.title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.title small { font-weight: 400; color: var(--muted); margin-left: 6px; }
.bar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.bar-btn { background: transparent; color: #e8edf5; border: 1px solid #0a2566; border-radius: 999px; padding: 4px 12px; font: 700 13px "Satoshi", sans-serif; cursor: pointer; }
.bar-btn[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: #fff; }
.sync { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sync.bad { color: #fbbf24; }

.screen { position: fixed; inset: calc(var(--bar) + env(safe-area-inset-top)) 0 0 0; overflow: auto; }
.panel { max-width: 520px; margin: 32px auto; padding: 0 16px; }
.panel.wide { max-width: 860px; }
h1 { font: 18px "Michroma", sans-serif; letter-spacing: .02em; margin: 0 0 8px; }
.note { color: #64748b; font-size: 13px; }
input { font: 17px "Satoshi", sans-serif; width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #cbd5e1; margin: 8px 0 12px; -webkit-user-select: text; user-select: text; }
.btn { background: var(--orange); color: #fff; border: 0; border-radius: 999px; padding: 10px 22px; font: 700 15px "Satoshi", sans-serif; cursor: pointer; }
.msg { color: #b91c1c; font-size: 14px; }
.day { margin: 22px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #475569; }
.cardrow { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 12px 14px; margin: 0 0 8px; font: inherit; color: inherit; cursor: pointer; }
.cardrow:active { border-color: var(--orange); }
.cardrow b { font-size: 16px; }
.cardrow .sub { color: #64748b; font-size: 13px; }
.cardrow .n { margin-left: auto; color: #94a3b8; font-size: 12px; white-space: nowrap; }
.cardrow.open { border-color: var(--orange); box-shadow: 0 0 0 2px rgb(253 89 2 / .25); }

/* The sheet as big as the screen allows; the ink on a canvas exactly over it. Fingers and palms do nothing here. */
#plot { background: #fff; overflow: hidden; touch-action: none; }
#stage { position: absolute; touch-action: none; }
#sheet, #ink { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
#sheet { pointer-events: none; }