/* REALM Socials — one stylesheet for the homepage and the app. */
:root {
  --green: #0b3a20;
  --green-2: #16523a;
  --orange: #f58214;
  --orange-text: #a8500a;
  --sun: #fbac3e;
  --bg: #f6f4ee;
  --card: #ffffff;
  --ink: #14211a;
  --muted: #5b6b60;
  --line: #e2ded2;
  --soft: #eef1ea;
  --ok: #1d7a3e;
  --warn: #9a5b00;
  --bad: #b3261e;
  --focus: #f58214;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(10, 30, 18, .06), 0 6px 20px rgba(10, 30, 18, .06);
  color-scheme: light;
}
/* Dark (the default): deep green, white text, green highlights. Light and Auto are in the preferences bar. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #07120c; --card: #0e1d15; --ink: #f5faf6; --muted: #a8c2b1; --line: #1f3a2a; --soft: #132a1d;
    --accent: #3ddc84; --orange-text: #6ee7a0; --focus: #3ddc84;
    --ok: #6ee7a0; --warn: #f3c46b; --bad: #ff8f80; --bar: #3ddc84; --shadow: 0 1px 0 rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.35); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #07120c; --card: #0e1d15; --ink: #f5faf6; --muted: #a8c2b1; --line: #1f3a2a; --soft: #132a1d;
    --accent: #3ddc84; --orange-text: #6ee7a0; --focus: #3ddc84;
    --ok: #6ee7a0; --warn: #f3c46b; --bad: #ff8f80; --bar: #3ddc84; --shadow: 0 1px 0 rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.35); color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--orange-text); }
img, video { max-width: 100%; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.btn, button { font: inherit; cursor: pointer; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: .55em 1em; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .4em; text-decoration: none; }
.btn.primary, button.primary { background: var(--orange); border-color: var(--orange); color: #1b1004; font-weight: 600; }
.btn.dark, button.dark { background: var(--green); border-color: var(--green); color: #fff; }
button.ghost { background: transparent; border-color: transparent; }
button.small, .btn.small { min-height: 34px; padding: .25em .7em; font-size: .9rem; }
button:disabled { opacity: .5; cursor: not-allowed; }
input, textarea, select { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .55em .7em; width: 100%; min-height: 44px; }
textarea { min-height: 120px; resize: vertical; }
label { font-weight: 600; font-size: .92rem; display: block; margin: .8em 0 .3em; }
.hint { color: var(--muted); font-size: .88rem; font-weight: 400; }

/* ---------- homepage ---------- */
.site-header { background: var(--green); color: #fff; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 14px 16px; }
.brand { display: inline-flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; font-weight: 800; letter-spacing: .02em; }
.brand img { height: 28px; width: auto; }
.brand span { color: var(--sun); font-weight: 700; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.hero { background: linear-gradient(160deg, var(--green) 0%, var(--green-2) 100%); color: #fff; padding: 56px 0 72px; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); max-width: 18ch; }
.hero p { font-size: 1.15rem; max-width: 52ch; color: #dfe9e1; }
.hero .est { display: inline-block; background: rgba(255,255,255,.12); border-radius: 999px; padding: .2em .8em; font-size: .85rem; margin-bottom: 1rem; color: var(--sun); }
.hero .cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.5rem; }
.chip { display: inline-flex; align-items: center; gap: .35em; padding: .25em .7em; border-radius: 999px; font-size: .85rem; background: var(--soft); color: var(--ink); border: 1px solid var(--line); }
.hero .chip { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.features { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: -36px auto 48px; }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.feature h3 { font-size: 1.05rem; }
.feature p { color: var(--muted); margin: 0; }
.section { padding: 32px 0; }
.steps { counter-reset: s; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: 0; list-style: none; }
.steps li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 16px 56px; position: relative; }
.steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 16px; top: 14px; width: 28px; height: 28px; border-radius: 50%; background: var(--orange); color: #1b1004; font-weight: 700; display: grid; place-items: center; }
footer { border-top: 1px solid var(--line); padding: 20px 16px 96px; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: center; color: var(--muted); font-size: .9rem; }
body.notice main { max-width: 560px; margin: 12vh auto 0; padding: 0 16px; }
body.notice .brand { color: var(--ink); margin-bottom: 1rem; }

/* ---------- app ---------- */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.side { background: var(--green); color: #fff; padding: 16px 12px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; }
.side .brand { padding: 4px 8px 16px; }
.side nav a { display: flex; align-items: center; gap: .6em; padding: .6em .8em; border-radius: 10px; color: #dfe9e1; text-decoration: none; }
.side nav a[aria-current="page"], .side nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.side nav a .badge { margin-left: auto; }
.side .me { margin-top: auto; font-size: .85rem; color: #b9cbbf; padding: 8px; }
.side .me a { color: var(--sun); }
.side select { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2); margin-bottom: 12px; }
.side select option { color: #000; }
main.view { padding: 24px; max-width: 1200px; width: 100%; }
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: 16px; }
.top h1 { margin: 0; font-size: 1.6rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.grid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.spread { justify-content: space-between; }
.badge { display: inline-block; min-width: 1.6em; padding: 0 .45em; border-radius: 999px; background: var(--orange); color: #1b1004; font-size: .78rem; font-weight: 700; text-align: center; }
.net { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; color: #fff; font-size: .7rem; font-weight: 800; flex: none; }
.status { font-size: .78rem; font-weight: 700; padding: .1em .55em; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); }
.status.published { color: var(--ok); } .status.failed { color: var(--bad); } .status.partial, .status.needs_approval { color: var(--warn); } .status.scheduled { color: var(--orange-text); }
.warn { color: var(--warn); font-size: .88rem; margin: .3em 0 0; padding-left: 1.1em; }
.err { color: var(--bad); }
.muted { color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 32px 12px; }
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: .7em 1.1em; border-radius: 12px; z-index: 50; max-width: calc(100vw - 32px); }

.drop { border: 2px dashed var(--line); border-radius: var(--radius); padding: 24px; text-align: center; color: var(--muted); }
.drop.over { border-color: var(--orange); background: var(--soft); }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.thumb { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; background: var(--soft); border: 1px solid var(--line); }
.thumb img, .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb button { position: absolute; top: 2px; right: 2px; min-height: 0; width: 24px; height: 24px; padding: 0; border-radius: 50%; }
.thumb.pick { cursor: pointer; } .thumb.on { outline: 3px solid var(--orange); }
.focus-pick { position: relative; display: inline-block; cursor: crosshair; max-width: 100%; }
.focus-pick img { display: block; max-height: 260px; border-radius: 10px; }
.focus-dot { position: absolute; width: 18px; height: 18px; margin: -9px; border-radius: 50%; border: 3px solid #fff; background: var(--orange); box-shadow: 0 0 0 2px rgba(0,0,0,.4); pointer-events: none; }
.acct { display: inline-flex; align-items: center; gap: .4em; border: 1px solid var(--line); border-radius: 999px; padding: .25em .7em .25em .3em; cursor: pointer; background: var(--card); min-height: 40px; }
.acct input { width: auto; min-height: 0; }
.acct.on { border-color: var(--orange); background: var(--soft); }
.previews { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.preview canvas, .preview img, .preview video { width: 100%; height: auto; border-radius: 10px; background: var(--soft); display: block; }
.preview .count { font-size: .8rem; color: var(--muted); text-align: right; }
.preview .count.over { color: var(--bad); font-weight: 700; }
.kw { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.kw span { font-size: .78rem; background: var(--soft); border-radius: 6px; padding: 0 .4em; }

.inbox { display: grid; grid-template-columns: 360px 1fr; gap: 16px; min-height: 60vh; }
.items { display: flex; flex-direction: column; gap: 6px; max-height: 75vh; overflow: auto; }
.item { text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); width: 100%; min-height: 0; }
.item.unread { border-left: 4px solid var(--orange); }
.item[aria-current="true"] { background: var(--soft); }
.item p { margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.thread { display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 80%; padding: .6em .9em; border-radius: 14px; background: var(--soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.out { align-self: flex-end; background: var(--green); color: #fff; }
.bubble small { display: block; opacity: .7; font-size: .75rem; }
.idea { display: flex; flex-direction: column; gap: 8px; }
.slides { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.slide { border: 1px solid var(--line); border-radius: 10px; padding: 10px; font-size: .9rem; background: var(--soft); }
.slide b { display: block; }
.netgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
details summary { cursor: pointer; font-weight: 600; }
.tabbar { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 10px 16px; }
  .side .brand { padding: 0; }
  .side nav, .side .me { display: none; }
  .side select { margin: 0 0 0 auto; width: auto; max-width: 55%; }
  main.view { padding: 16px; padding-bottom: 96px; }
  .cols-2, .inbox { grid-template-columns: 1fr; }
  .tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--card); border-top: 1px solid var(--line); z-index: 40; padding-bottom: env(safe-area-inset-bottom); }
  .tabbar a { flex: 1; text-align: center; padding: 8px 2px; font-size: .72rem; color: var(--muted); text-decoration: none; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
  .tabbar a[aria-current="page"] { color: var(--orange-text); font-weight: 700; }
  .tabbar .ico { font-size: 1.25rem; line-height: 1; }
  .previews { grid-template-columns: 1fr; }
}

/* ---------- v0.2 ---------- */
:root { --bar: #c96a10; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bar: #3ddc84; } }
:root[data-theme="dark"] { --bar: #3ddc84; }
input.check, input[type="checkbox"] { width: auto; min-height: 0; }
.small-chip { font-size: .72rem; padding: 0 .5em; }
dialog { border: 1px solid var(--line); color: var(--ink); max-height: 90vh; overflow: auto; }
dialog::backdrop { background: rgba(0,0,0,.45); }

.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 12px; }
.dow { font-size: .78rem; font-weight: 700; color: var(--muted); text-align: center; padding: 4px 0; }
.day { min-height: 104px; border: 1px solid var(--line); border-radius: 10px; padding: 4px; background: var(--card); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.day.other { opacity: .5; }
.day.today { border-color: var(--orange); }
.day.over { background: var(--soft); border-color: var(--orange); }
.dnum { font-size: .8rem; font-weight: 700; color: var(--muted); }
.mini { font-size: .72rem; padding: 2px 4px; border-radius: 6px; background: var(--soft); border-left: 3px solid var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: grab; }
.mini.scheduled { border-left-color: var(--orange); } .mini.published { border-left-color: var(--ok); } .mini.failed, .mini.partial { border-left-color: var(--bad); } .mini.needs_approval { border-left-color: var(--warn); }

.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.tile .big { font-size: 1.9rem; font-weight: 800; line-height: 1.1; margin: 4px 0; font-variant-numeric: tabular-nums; }
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl thead th { font-size: .8rem; color: var(--muted); }
.bars { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; height: 160px; align-items: end; border-bottom: 1px solid var(--line); }
.barcol { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; outline-offset: 0; }
.barcol:hover .bar, .barcol:focus .bar { opacity: .8; }
.bar { width: 100%; max-width: 24px; background: var(--bar); border-radius: 4px 4px 0 0; min-height: 2px; }
.blabel { position: absolute; bottom: -18px; font-size: .7rem; color: var(--muted); }
.tip { margin-top: 22px; font-size: .85rem; color: var(--ink); }
.bars + .tip[hidden] + .hint { margin-top: 22px; }
.hbars { display: flex; flex-direction: column; gap: 8px; }
.hrow { display: grid; grid-template-columns: 110px 1fr 40px; gap: 8px; align-items: center; font-size: .9rem; }
.htrack { background: transparent; height: 14px; }
.hbar { height: 14px; background: var(--bar); border-radius: 0 4px 4px 0; min-width: 2px; }
.hval { text-align: right; font-variant-numeric: tabular-nums; }
.qgrid { display: grid; gap: 8px; margin-top: 10px; }
.qday { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qday strong { width: 40px; }
.qday input[type="time"] { width: auto; min-height: 36px; }
@media (max-width: 900px) {
  .day { min-height: 64px; }
  .mini { font-size: 0; padding: 0; height: 6px; border-left-width: 0; }
  .mini.scheduled { background: var(--orange); } .mini.published { background: var(--ok); } .mini.failed, .mini.partial { background: var(--bad); } .mini.needs_approval { background: var(--warn); }
}
/* Grid children may shrink below their content (wide tables scroll inside their card instead). */
main.view, .grid > *, .card { min-width: 0; }
@media (max-width: 900px) { .app { grid-template-columns: minmax(0, 1fr); } }
[hidden] { display: none !important; }
main.view:focus { outline: none; }

/* ---------- every device ---------- */
.item { flex-shrink: 0; }                                  /* inbox cards never squash inside the scrolling list */
main.view { margin: 0 auto; max-width: 1320px; }           /* centred on big screens */
.qday .chip button { min-width: 32px; min-height: 32px !important; }
.day.has { cursor: pointer; }
@media (hover: none) { .mini { cursor: pointer; } }
/* Phones held sideways: a slimmer tab bar leaves room for content. */
@media (max-width: 900px) and (max-height: 500px) {
  .tabbar a { min-height: 44px; flex-direction: row; gap: 6px; font-size: .8rem; }
  .tabbar .ico { font-size: 1rem; }
  main.view { padding-bottom: 72px; }
}
/* Tablets: two columns where there's room. */
@media (min-width: 640px) and (max-width: 900px) {
  .previews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
@media print { .side, .tabbar, footer, button { display: none !important; } .app { display: block; } }

/* ---------- REALM preferences (same set as every REALM site) ---------- */
/* Palette: Bright = brighter page with Neon Green #39FF14 and Neon Orange #FF6A00 highlights, dark text on neon. */
:root[data-palette="bright"] { --bg: #ffffff; --card: #ffffff; --soft: #f2f7f1; --line: #dcdcd4; --orange: #FF6A00; --orange-text: #a33f00; --sun: #39FF14; --neon: #39FF14; }
@media (prefers-color-scheme: dark) { :root[data-palette="bright"]:not([data-theme="light"]) { --bg: #050806; --card: #0e1410; --soft: #121a15; --line: #26332a; --orange-text: #39FF14; } }
:root[data-palette="bright"][data-theme="dark"] { --bg: #050806; --card: #0e1410; --soft: #121a15; --line: #26332a; --orange-text: #39FF14; }
:root[data-palette="bright"] .badge, :root[data-palette="bright"] .pill { background: #39FF14; color: #062b0d; border-color: #39FF14; }
:root[data-palette="bright"] .btn.primary, :root[data-palette="bright"] button.primary { background: #FF6A00; border-color: #FF6A00; color: #150800; }
/* Reading options */
:root.ts-lg { font-size: 112.5%; }
:root.ts-xl { font-size: 125%; }
:root.hc { --ink: #000; --muted: #26322a; --line: #5d6b61; }
@media (prefers-color-scheme: dark) { :root.hc:not([data-theme="light"]) { --ink: #fff; --muted: #eef4ef; --line: #9db5a4; } }
:root.hc[data-theme="dark"] { --ink: #fff; --muted: #eef4ef; --line: #9db5a4; }
:root.hc a { text-decoration-thickness: 2px; }
:root.easy body { font-family: Verdana, "Atkinson Hyperlegible", system-ui, sans-serif; letter-spacing: .03em; word-spacing: .12em; line-height: 1.8; }
:root.rm *, :root.rm *::before, :root.rm *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

.prefs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.pick { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; }
.pick[hidden], .pref-toggle[hidden], .read-opts[hidden] { display: none; }
.pick .pl { padding: 0 8px 0 10px; opacity: .8; }
.pick button { min-height: 44px; min-width: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.pick button:hover { color: var(--orange-text); }
.pick button[aria-pressed="true"] { background: var(--orange); color: #1b1004; font-weight: 700; }
.pref-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: inherit; font-size: .85rem; }
.pref-toggle:hover { border-color: var(--orange); }
.pref-toggle .sw { position: relative; width: 34px; height: 20px; border-radius: 999px; background: color-mix(in srgb, currentColor 22%, transparent); flex: none; }
.pref-toggle .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--card); transition: transform .2s ease; }
.pref-toggle[aria-pressed="true"] .sw { background: var(--orange); }
.pref-toggle[aria-pressed="true"] .sw::after { transform: translateX(14px); }
.read-opts { flex-basis: 100%; }
.read-opts > summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; cursor: pointer; list-style: none; }
.read-opts > summary::-webkit-details-marker { display: none; }
.read-opts > summary::after { content: "+"; font-weight: 700; color: var(--orange-text); }
.read-opts[open] > summary::after { content: "−"; }
.ro-body { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
/* on the dark homepage footer */
.ft .pick, .ft .pref-toggle, .ft .read-opts > summary { border-color: rgba(255,255,255,.22); color: #eef4ec; }
.ft .pick button { color: #eef4ec; }
.ft .pick button[aria-pressed="true"] { color: #1b1004; }
.ft .read-opts > summary::after { color: var(--sun); }
@media (max-width: 380px) { .pick .pl { display: none; } }
@media print { .prefs { display: none !important; } }

/* ---------- app shell polish ---------- */
.side .brand { display: flex; align-items: center; gap: 10px; }
.side .brand img { border-radius: 10px; }
.side nav a svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; opacity: .9; }
.side nav a[aria-current="page"] svg { stroke: var(--sun); opacity: 1; }
.side nav a { transition: background-color .15s ease, color .15s ease; }
.tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-ft { flex-direction: column; align-items: center; gap: 14px; }
.card { transition: box-shadow .2s ease, border-color .2s ease; }
.top h1 { letter-spacing: -.01em; }
.tcell { display: grid; gap: 4px; }
.tacts { display: flex; gap: 4px; }
.tacts button { min-height: 32px; padding: 0 .6em; flex: 1; }
input[type="color"] { min-height: 44px; }
body.notice .brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.2rem; }
body.notice .brand img { border-radius: 12px; }
body.notice .brand b { letter-spacing: .06em; }
body.notice .brand span { color: var(--orange-text); }
.side .brand > span { color: #fff; font-weight: 800; letter-spacing: .02em; }
.side .brand > span b { letter-spacing: .08em; }
.side .brand > span > span { color: var(--sun); font-weight: 700; }
input[type="color"] { font-size: 16px; }

/* ---------- v0.5 planning ---------- */
.cdot { display: inline-block; width: .7em; height: .7em; border-radius: 50%; flex: none; vertical-align: middle; box-shadow: 0 0 0 1px rgb(0 0 0 / .15); }
.big { font-size: 1.9rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pill-row { grid-template-columns: minmax(0, 140px) minmax(0, 1fr) 72px; }
.pill-row .htrack { position: relative; background: var(--soft); border-radius: 4px; }
.htarget { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); border-radius: 1px; }
.hval small { font-weight: 400; }
.camp { padding: 10px 0; border-top: 1px solid var(--line); align-items: flex-start; }
.camp:first-child { border-top: 0; }
.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.idea { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--card); gap: 0; }
.overdue { background: #fde7e5; color: var(--bad); border-color: #f2b8b3; }
:root[data-theme="dark"] .overdue { background: #3a1916; color: #ffb4ab; border-color: #6b2a24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .overdue { background: #3a1916; color: #ffb4ab; border-color: #6b2a24; } }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.wcol { border: 1px solid var(--line); border-radius: 10px; padding: 6px; min-height: 220px; display: flex; flex-direction: column; gap: 6px; min-width: 0; background: var(--card); }
.wcol.today { border-color: var(--orange); }
.wday { font-size: .8rem; color: var(--muted); }
.wday b { color: var(--ink); font-size: 1rem; }
.wpost { display: flex; flex-direction: column; align-items: stretch; gap: 3px; text-align: left; white-space: normal; min-height: 44px; font: inherit; font-size: .78rem; color: var(--ink); border-top: 0; border-right: 0; border-bottom: 0; cursor: pointer; padding: 6px; }
.wpost span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.wpost .net { font-size: .6rem; }
@media (max-width: 900px) {
  .week { grid-template-columns: 1fr; }
  .wcol { min-height: 0; }
  .pill-row { grid-template-columns: minmax(0, 100px) minmax(0, 1fr) 84px; }
}
.report-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.report h3 { font-size: 1.05rem; margin-top: 0; }
@media print {
  body { background: #fff !important; color: #000; }
  .top .row, .toast { display: none !important; }
  .report .card { break-inside: avoid; box-shadow: none; border-color: #ccc; }
  .report .grid.cols-2 { grid-template-columns: 1fr 1fr; }
}
.idea button { align-self: flex-start; }
.briefs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); margin-top: 8px; }
.pill-row .hval { white-space: nowrap; text-align: right; }
.pill-row { grid-template-columns: minmax(0, 140px) minmax(0, 1fr) 96px; }
.top select.cfilter { width: auto; max-width: 220px; }
@media (max-width: 900px) { .pill-row { grid-template-columns: minmax(0, 100px) minmax(0, 1fr) 84px; } }

/* ---------- dark theme details (white, dark, green) ---------- */
:root[data-theme="dark"] .btn.primary, :root[data-theme="dark"] button.primary { background: var(--accent); border-color: var(--accent); color: #03140a; }
:root[data-theme="dark"] .btn.primary:hover, :root[data-theme="dark"] button.primary:hover { filter: brightness(1.08); }
:root[data-theme="dark"] .side { background: linear-gradient(180deg, #0b2416, #07150d); border-right: 1px solid var(--line); }
:root[data-theme="dark"] .side nav a[aria-current="page"] { background: rgba(61,220,132,.14); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
:root[data-theme="dark"] .side .me a { color: var(--accent); }
:root[data-theme="dark"] .card { border-color: var(--line); }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: #0a1810; color: var(--ink); border-color: #2a4a37; }
:root[data-theme="dark"] input:focus, :root[data-theme="dark"] select:focus, :root[data-theme="dark"] textarea:focus { border-color: var(--accent); }
:root[data-theme="dark"] .status.published { color: #6ee7a0; }
:root[data-theme="dark"] .tabbar { background: #0b1a12; border-top-color: var(--line); }
:root[data-theme="dark"] .tabbar a[aria-current="page"] { color: var(--accent); }
:root[data-theme="dark"] .day.today, :root[data-theme="dark"] .wcol.today { border-color: var(--accent); }
:root[data-theme="dark"] .btn.dark, :root[data-theme="dark"] button.dark { background: #17663a; border-color: #23864d; color: #fff; }