/* mention.page app pages (editor, report, admin): the same look as the landing page. */

:root {
  --bg: #fff; --card: #fff; --soft: #fafaf8; --ink: #141414; --ink2: #555; --ink3: #8d8d92; --line: #ececec;
  --accent: #ff551d; --accent-ink: #d0402a; --accent-soft: #fff1ea; --hot: #ff551d;
  --ok: #0c9b54; --ok-soft: #e7f7ee; --warn: #b7791f; --warn-soft: #fdf5d9;
  --display: "Stack Sans Headline", "Instrument Sans", Inter, sans-serif; --dw: 700; --dls: -.035em;
  --mono: Inconsolata, ui-monospace, Menlo, monospace;
  --r: 16px; --r-lg: 24px; --r-btn: 999px;
  --shadow: 0 10px 26px rgba(0,0,0,.045);
  --btn-bg: #3a3a3a; --btn-ink: #fff; --btn-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px rgba(0,0,0,.2); --btn-hover: #222;
}

* { box-sizing: border-box; margin: 0; padding: 0 }
body { background: var(--bg); color: var(--ink); font: 15px/1.55 "Instrument Sans", Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; letter-spacing: -.01em }
a { color: inherit }
button, input, textarea, select { font: inherit; color: inherit }
.mono { font-family: var(--mono); font-size: .88em }
.muted { color: var(--ink2) } .faint { color: var(--ink3) }
h1, h2, h3 { font-family: var(--display); font-weight: var(--dw); letter-spacing: var(--dls); color: var(--ink); line-height: 1.1 }

/* buttons */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border: 0; border-radius: var(--r-btn); background: var(--btn-bg); color: var(--btn-ink); box-shadow: var(--btn-shadow); font-weight: 600; font-size: 14.5px; cursor: pointer; white-space: nowrap; text-decoration: none; transition: filter .15s, background .15s }
.btn:hover { background: var(--btn-hover) }
.btn:disabled, .btn[aria-busy="true"] { opacity: .55; pointer-events: none }
.btn.big { height: 48px; font-size: 15.5px; padding: 0 22px; width: 100% }
.btn.sec { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); text-shadow: none }
.btn.sec:hover { background: var(--soft); filter: none }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13px }

/* brand */
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 700 17px/1 "Stack Sans Headline", Inter, sans-serif; letter-spacing: -.02em; color: var(--ink) }
.brand .mark { width: 26px; height: 22px }


/* top bar */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line) }
.top-in { max-width: 1240px; margin: 0 auto; height: 60px; padding: 0 20px; display: flex; align-items: center; gap: 16px }
.top .crumb { color: var(--ink3); font-size: 14px; display: flex; align-items: center; gap: 8px; min-width: 0 }
.top .crumb b { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 36vw }
.top .right { margin-left: auto; display: flex; align-items: center; gap: 10px }
.saved { font-size: 13px; color: var(--ink3); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap }
.saved::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok) }
.saved.busy::before { background: var(--warn) }
.saved.err::before { background: var(--hot) }

/* editor */
.ed { max-width: 1240px; margin: 0 auto; padding: 28px 20px 80px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start }
.paper { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 44px 56px 48px; min-width: 0 }
.paper .masthead { display: flex; align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 26px }
.logo-drop { width: 44px; height: 44px; border-radius: 11px; border: 1px solid var(--line); background: var(--soft) center / cover no-repeat; flex: none; cursor: pointer; position: relative }
.logo-drop:hover::after { content: "Change"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 600; color: #fff; background: rgba(0,0,0,.45); border-radius: inherit }
.masthead input.company { font-weight: 650; font-size: 16px; border: 0; outline: 0; background: none; min-width: 0; flex: 1 }
.fir { font: 600 11px/1 var(--mono); letter-spacing: .08em; color: var(--ink3); white-space: nowrap }
.paper textarea, .paper input.f { display: block; width: 100%; border: 0; outline: 0; background: none; resize: none; overflow: hidden; border-radius: 8px; padding: 4px 8px; margin: 0 -8px; transition: background .15s, box-shadow .15s }
.paper textarea:hover, .paper input.f:hover { background: var(--soft) }
.paper textarea:focus, .paper input.f:focus { background: var(--card); box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 1px var(--accent) }
.paper .headline { font: var(--dw) 34px/1.12 var(--display); letter-spacing: var(--dls); color: var(--ink) }
.paper .sub { font: italic 400 18px/1.45 Newsreader, Georgia, serif; color: var(--ink2); margin-top: 10px }
.paper .hero-img { margin: 22px 0 8px; border-radius: var(--r); aspect-ratio: 1.91; background: var(--soft) center / cover no-repeat; border: 1px solid var(--line); position: relative; cursor: pointer }
.paper .hero-img:empty::before { content: "Add an image (1200×630 works best)"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink3); font-size: 14px }
.paper .hero-img .chg { position: absolute; right: 10px; bottom: 10px; opacity: 0; transition: opacity .15s }
.paper .hero-img:hover .chg { opacity: 1 }
.dateline { display: flex; align-items: center; gap: 6px; margin-top: 22px; font: 600 13px/1 var(--mono); color: var(--ink2); text-transform: uppercase; letter-spacing: .02em }
.dateline input.f { width: 16ch; field-sizing: content; min-width: 10ch; max-width: 60%; font: inherit; text-transform: uppercase; margin: 0; padding: 4px 6px }
.paper .body { font: 400 17.5px/1.7 Newsreader, Georgia, serif; color: var(--ink); margin-top: 8px }
.paper h4 { font: 600 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); margin: 30px 0 8px }
.paper .about { font: 400 15.5px/1.6 Newsreader, Georgia, serif; color: var(--ink2) }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px }
.contact label { font-size: 12px; color: var(--ink3); display: block; margin-bottom: 2px }
.contact input.f { border-bottom: 1px dashed var(--line); border-radius: 6px 6px 0 0 }
mark.ph { background: var(--warn-soft); color: var(--warn); border-radius: 4px; padding: 0 2px }

.side { position: sticky; top: 80px; display: grid; gap: 14px }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px }
.card h3 { font-size: 16px; letter-spacing: -.02em; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px }
.checks { list-style: none; display: grid; gap: 8px; font-size: 13.5px }
.checks li { display: flex; gap: 9px; align-items: flex-start; color: var(--ink2) }
.checks li i { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 Inter; margin-top: 1px; background: var(--warn-soft); color: var(--warn) }
.checks li.ok i { background: var(--ok-soft); color: var(--ok) }
.checks li.ok { color: var(--ink3) }
.meter { height: 6px; border-radius: 99px; background: var(--soft); margin: 4px 0 12px; position: relative; overflow: hidden }
.meter > b { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--accent); transition: width .3s }
.meter.over > b { background: var(--hot) }
.wc { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink3) }
.wc b { color: var(--ink); font-weight: 600 }
.plans { display: grid; gap: 8px; margin-bottom: 14px }
.plan { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: start; border: 1px solid var(--line); border-radius: var(--r); padding: 12px; cursor: pointer; transition: border-color .15s, background .15s }
.plan:hover { background: var(--soft) }
.plan:has(input:checked) { border-color: var(--accent); background: var(--accent-soft) }
.plan input { margin-top: 3px; accent-color: var(--accent) }
.plan b { display: block; font-size: 14px; color: var(--ink) }
.plan small { display: block; color: var(--ink3); font-size: 12.5px; line-height: 1.4; margin-top: 2px }
.plan .pr { font-weight: 700; font-size: 15px; color: var(--ink) }
.field { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: var(--r-btn); padding: 0 12px; background: var(--card); outline: 0 }
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.fine { font-size: 12.5px; color: var(--ink3); margin-top: 10px; line-height: 1.45 }
.err { color: var(--hot); font-size: 13px; margin-top: 8px; min-height: 1em }
.row { display: flex; gap: 8px }
.row .field { flex: 1 }

/* report */
.rp { max-width: 1040px; margin: 0 auto; padding: 36px 20px 90px }
.rp-head { display: flex; gap: 18px; align-items: flex-start }
.rp-head img { width: 56px; height: 56px; border-radius: 14px; border: 1px solid var(--line); background: #fff; object-fit: cover; flex: none }
.rp-head h1 { font-size: clamp(26px, 4vw, 38px); margin: 6px 0 8px; text-wrap: balance }
.pill { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--soft); color: var(--ink2); border: 1px solid var(--line) }
.pill.live { background: var(--ok-soft); color: var(--ok); border-color: transparent }
.pill.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.6s infinite }
@keyframes pulse { 50% { opacity: .35 } }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 30px 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden }
.steps > div { padding: 16px 18px; border-right: 1px solid var(--line); position: relative }
.steps > div:last-child { border-right: 0 }
.steps small { display: block; font: 600 11px/1 var(--mono); letter-spacing: .06em; color: var(--ink3); text-transform: uppercase }
.steps b { display: block; margin-top: 8px; font-size: 15px; color: var(--ink) }
.steps span { display: block; font-size: 12.5px; color: var(--ink3); margin-top: 2px }
.steps .done small { color: var(--ok) }
.steps .now { background: var(--accent-soft) }
.steps .now small { color: var(--accent-ink) }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 26px }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px }
.stat small { color: var(--ink2); font-size: 13px; display: flex; align-items: center; gap: 7px }
.stat small::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--c, var(--accent)) }
.stat b { display: block; font: var(--dw) 30px/1.1 var(--display); letter-spacing: -.03em; margin-top: 6px; color: var(--ink) }
.stat span { font-size: 12.5px; color: var(--ink3) }
.table { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden }
.table .th, .table .tr { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) 70px 90px; gap: 12px; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--line); font-size: 14px }
.table .th > span { font: inherit; color: inherit }
.table .th { font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); background: var(--soft) }
.table .tr:last-child { border-bottom: 0 }
.table .tr a { text-decoration: none; display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); font-weight: 500 }
.table .tr a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.table .tr a:hover span { color: var(--accent-ink); text-decoration: underline }
.table img.fav { width: 18px; height: 18px; border-radius: 4px; flex: none }
.table .dom { font-family: var(--mono); font-size: 12.5px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.dr { display: inline-flex; min-width: 38px; justify-content: center; height: 22px; align-items: center; border-radius: 6px; font: 700 12px/1 var(--mono); background: var(--soft); color: var(--ink2) }
.dr.hi { background: var(--ok-soft); color: var(--ok) }
.st { font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; color: var(--ink3) }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line) }
.st.on { color: var(--ok) } .st.on::before { background: var(--ok) }
.st.off { color: var(--hot) } .st.off::before { background: var(--hot) }
.empty { padding: 42px 20px; text-align: center; color: var(--ink2) }
.empty b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px }
.two { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; margin-top: 26px; align-items: start }
.snippet { font: 12px/1.5 var(--mono); background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; word-break: break-all; color: var(--ink2); margin: 10px 0 }
.release { font: 400 16px/1.7 Newsreader, Georgia, serif; color: var(--ink) }
.release h2 { font-size: 24px; margin-bottom: 6px }
.release p { margin-top: 12px }
.release .s { font-style: italic; color: var(--ink2) }
.tl { list-style: none; display: grid; gap: 10px; font-size: 13.5px }
.tl li { display: grid; grid-template-columns: 86px 1fr; gap: 10px; color: var(--ink2) }
.tl li time { font: 12px/1.6 var(--mono); color: var(--ink3) }
.tl li b { color: var(--ink); font-weight: 600 }
.section-h { display: flex; justify-content: space-between; align-items: center; margin: 34px 0 12px; gap: 12px }
.section-h h2 { font-size: 22px }

.sample-note { background: var(--warn-soft); color: var(--ink2); border-radius: 12px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 22px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center }
.sample-note b { color: var(--warn); font: 600 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase }
.sample-note a { margin-left: auto; font-weight: 600; color: var(--ink); text-decoration: none }

/* admin */
.adm { max-width: 1100px; margin: 0 auto; padding: 28px 20px 80px }
.adm table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: 14px }
.adm td, .adm th { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top }
.adm th { font: 600 11px var(--mono); text-transform: uppercase; color: var(--ink3); background: var(--soft) }
.adm textarea { width: 100%; min-height: 140px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; font: 13px/1.5 var(--mono); background: var(--card) }
.adm pre { white-space: pre-wrap; font: 13px/1.55 var(--mono); background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 14px; max-height: 420px; overflow: auto }
.adm .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px }
.adm form { display: grid; gap: 8px }


@media (max-width: 960px) {
  .ed, .two { grid-template-columns: 1fr }
  .side { position: static }
  .paper { padding: 26px 20px 30px }
  .paper .headline { font-size: 27px }
  .steps, .stats { grid-template-columns: 1fr 1fr }
  .steps > div:nth-child(2) { border-right: 0 }
  .steps > div:nth-child(-n+2) { border-bottom: 1px solid var(--line) }
  .table .th, .table .tr { grid-template-columns: minmax(0, 1fr) 54px 70px }
  .table .dom { display: none }
  .top .crumb b { max-width: 40vw }
  .contact { grid-template-columns: 1fr }
}
@media print {
  .top, .no-print { display: none !important }
  body { background: #fff }
  .rp { padding: 0 }
  .table, .stat, .steps { break-inside: avoid }
}