/* Procedure App — neutral, accessible, no external fonts (10 §1, 15 §1). */
:root {
  --bg: #ffffff; --bg-alt: #f4f5f7; --line: #d0d4da; --text: #1b1f24; --muted: #545b64;
  --blue: #1a56b8; --blue-bg: #e7efff; --green: #1d6b35; --green-bg: #e3f4e8; --amber: #7a5100; --amber-bg: #fff2d6;
  --orange: #9a3b00; --orange-bg: #ffe8da; --red: #a4161a; --red-bg: #fde8e8; --grey-bg: #eceef1; --focus: #1a56b8;
  --radius: 6px; --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "PingFang HK", "Microsoft JhengHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.5; font-size: 16px; }
a { color: var(--blue); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; }
h1 { font-size: 1.6rem; margin: 0 0 .75rem; line-height: 1.2; }
h2 { font-size: 1.25rem; margin: 1.5rem 0 .5rem; }
h3, .h3 { font-size: 1.05rem; margin: 1rem 0 .4rem; }
p { margin: .4rem 0 .8rem; }
.skip { position: absolute; left: -999px; top: 0; background: #fff; padding: .5rem; z-index: 10; }
.skip:focus { left: .5rem; }
.muted { color: var(--muted); } .small { font-size: .875rem; } .mono { font-family: var(--mono); }
.inline { display: inline; margin: 0; }
.nowrap { white-space: nowrap; }

.topbar { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding: .6rem 1rem; border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.topbar .brand { font-weight: 700; text-decoration: none; color: var(--text); }
.topbar .crumb a { color: var(--text); font-weight: 600; }
.top-actions { margin-left: auto; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.linklike { background: none; border: 0; color: var(--blue); text-decoration: underline; cursor: pointer; font: inherit; padding: .25rem; min-height: 32px; }

.layout { display: block; max-width: 1280px; margin: 0 auto; }
.layout.with-nav { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .layout.with-nav { grid-template-columns: 190px 1fr; } }
.sidenav ul { list-style: none; margin: 0; padding: .5rem; display: flex; flex-wrap: wrap; gap: .25rem; }
@media (min-width: 900px) { .sidenav ul { flex-direction: column; position: sticky; top: 0; } }
.sidenav a { display: block; padding: .4rem .6rem; border-radius: var(--radius); text-decoration: none; color: var(--text); }
.sidenav a[aria-current="page"] { background: var(--blue-bg); color: var(--blue); font-weight: 600; }
main { padding: 1rem; min-width: 0; }
main:focus { outline: none; }
.footer { padding: 1rem; border-top: 1px solid var(--line); text-align: center; }

.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin: 0 0 1rem; background: #fff; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card.ok { border-color: var(--green); background: var(--green-bg); }
.card.bad { border-color: var(--red); background: var(--red-bg); }
.card.warn { border-color: var(--amber); background: var(--amber-bg); }
.grid2 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.notice { padding: .6rem .8rem; border-radius: var(--radius); }
.notice.ok { background: var(--green-bg); color: var(--green); }
.notice.bad { background: var(--red-bg); color: var(--red); }
.notice.warn { background: var(--amber-bg); color: var(--amber); }

.readiness { font-size: 1.4rem; font-weight: 800; letter-spacing: .02em; }
.readiness.ready { color: var(--green); } .readiness.notready { color: var(--red); }
.next-action { font-size: 1.1rem; font-weight: 600; }

.badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.badge.NOT_STARTED, .badge.gray { background: var(--grey-bg); color: var(--muted); }
.badge.IN_PROGRESS, .badge.blue { background: var(--blue-bg); color: var(--blue); }
.badge.SUBMITTED, .badge.amber { background: var(--amber-bg); color: var(--amber); }
.badge.APPROVED, .badge.green, .badge.PASS, .badge.DONE, .badge.CONFIRMED { background: var(--green-bg); color: var(--green); }
.badge.STALE, .badge.orange, .badge.WARN, .badge.PROMPT_STALE { background: var(--orange-bg); color: var(--orange); }
.badge.DEFERRED { background: repeating-linear-gradient(45deg, var(--grey-bg), var(--grey-bg) 4px, #fff 4px, #fff 8px); color: var(--muted); border-color: var(--line); }
.badge.BLOCKED { background: #fff; color: var(--muted); border-color: var(--line); }
.badge.BLOCKED::before { content: "🔒 "; }
.badge.FAIL, .badge.red, .badge.OPEN { background: var(--red-bg); color: var(--red); }

.steps { list-style: none; display: grid; gap: .5rem; padding: 0; margin: 0 0 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.steps li { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem; }
.steps li.done { border-color: var(--green); background: var(--green-bg); }
.steps li.current { border-color: var(--blue); background: var(--blue-bg); border-width: 2px; }
.steps li.locked { color: var(--muted); }
.steps .num { font-weight: 800; }

table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { border-bottom: 1px solid var(--line); padding: .4rem .5rem; text-align: left; vertical-align: top; }
th { background: var(--bg-alt); font-weight: 600; }
.table-wrap { overflow-x: auto; max-width: 100%; }
.phase-list td:first-child { white-space: nowrap; }
tr.child td:first-child { padding-left: 1.5rem; }

form.stack label, .field label { display: block; font-weight: 600; margin: .75rem 0 .25rem; }
.field { margin-bottom: 1rem; }
.field .help { color: var(--muted); font-size: .875rem; margin: .1rem 0 .3rem; }
.field .error { color: var(--red); font-size: .875rem; }
input[type=text], input[type=email], input[type=url], input[type=date], input[type=password], input[type=number], input:not([type]), select, textarea {
  width: 100%; max-width: 44rem; padding: .5rem .6rem; border: 1px solid #8a9099; border-radius: var(--radius); font: inherit; background: #fff; color: var(--text); min-height: 40px; }
textarea { min-height: 6rem; resize: vertical; }
textarea.code, .code { font-family: var(--mono); font-size: .88rem; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .8rem; margin: 0 0 1rem; max-width: 44rem; }
legend { font-weight: 600; padding: 0 .25rem; }
.choice { display: flex; gap: .5rem; align-items: flex-start; margin: .3rem 0; font-weight: 400 !important; }
.choice input { margin-top: .3rem; min-width: 18px; min-height: 18px; }
.tag { display: inline-block; font-size: .72rem; border: 1px solid var(--muted); border-radius: 4px; padding: 0 .3rem; margin-left: .3rem; color: var(--muted); font-weight: 600; vertical-align: middle; }
.req { color: var(--red); }

button, .button { display: inline-block; padding: .5rem 1rem; border-radius: var(--radius); border: 1px solid var(--blue); background: var(--blue); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; min-height: 40px; line-height: 1.5; }
button.secondary, .button.secondary { background: #fff; color: var(--blue); }
button.danger { background: var(--red); border-color: var(--red); }
button.good { background: var(--green); border-color: var(--green); }
button[disabled], .button[aria-disabled="true"] { background: var(--grey-bg); border-color: var(--line); color: var(--muted); cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .75rem 0; }
.actions form { margin: 0; }

.checks { list-style: none; padding: 0; margin: 0; }
.checks li { display: flex; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.checks .mark { font-weight: 800; min-width: 3.2rem; }
.checks .pass .mark { color: var(--green); } .checks .fail .mark { color: var(--red); } .checks .warn .mark { color: var(--amber); } .checks .todo .mark { color: var(--muted); }

.preview { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; overflow-x: auto; background: #fff; }
.preview table { font-size: .85rem; }
pre.raw, .raw { white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: .85rem; background: var(--bg-alt); padding: .75rem; border-radius: var(--radius); max-height: 70vh; overflow: auto; }
.diff .add { background: #e3f4e8; display: block; } .diff .del { background: #fde8e8; display: block; } .diff .hunk { color: var(--blue); display: block; }
.editor-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .editor-grid { grid-template-columns: 1fr 1fr; } }
.editor-grid textarea { min-height: 70vh; max-width: none; font-family: var(--mono); font-size: .88rem; }
.generated-note { background: var(--grey-bg); padding: .3rem .6rem; border-radius: var(--radius); font-size: .85rem; }
.swatch { display: inline-block; width: 1.2rem; height: 1.2rem; border: 1px solid var(--line); border-radius: 3px; vertical-align: middle; margin-right: .3rem; }
.tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.tabs a { padding: .4rem .8rem; text-decoration: none; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
.tabs a[aria-current="page"] { border-color: var(--line); background: #fff; font-weight: 600; margin-bottom: -1px; }
details summary { cursor: pointer; font-weight: 600; padding: .3rem 0; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1rem; }
.kv dt { font-weight: 600; } .kv dd { margin: 0; overflow-wrap: anywhere; }
.progress { height: .6rem; background: var(--grey-bg); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--green); }
.sample-frame { width: 100%; height: 520px; border: 1px solid var(--line); border-radius: var(--radius); }
.narrow { max-width: 28rem; }
fieldset.plain { border: 0; padding: 0; margin: 0; max-width: none; }
.sticky-col { position: sticky; left: 0; background: #fff; z-index: 1; }
.shot { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); }
figure { margin: 0; }
/* 360 px: nothing may force horizontal scrolling (APP-11, Test N) */
fieldset { min-width: 0; }
h1, h2, .mono, dt, dd, td, th { overflow-wrap: anywhere; }
.editor-grid > *, .grid2 > *, .layout.with-nav > * { min-width: 0; }
@media (max-width: 600px) { .kv { grid-template-columns: 1fr; } .kv dd { margin-bottom: .5rem; } }