/* OpenGAF process surfaces — thin local skin over the shared GUI tokens
   (kernel/assets/gui.css is stamped to c43.org -> ../../assets/gui.css).
   One white paper surface, hairline rules, pills over panels (issue #41). */

.pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.pillar { border: 1px solid var(--line, rgba(30, 40, 55, 0.14)); border-radius: 14px; padding: 1rem 1.1rem; background: transparent; }
.pillar h3 { font-size: .95rem; margin: 0 0 .4rem; letter-spacing: .01em; }
.pillar p { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--ink-soft, #3c4757); }

.journey { list-style: none; counter-reset: step; margin: .4rem 0 0; padding: 0; display: grid; gap: .7rem; }
.journey li { counter-increment: step; position: relative; padding-left: 2.1rem; font-size: .9rem; line-height: 1.55; color: var(--ink, #16202e); }
.journey li::before { content: counter(step); position: absolute; left: 0; top: .05rem; width: 1.45rem; height: 1.45rem; border-radius: 50%; border: 1px solid var(--line, rgba(30,40,55,.16)); display: grid; place-items: center; font-size: .78rem; font-family: var(--mono, ui-monospace, monospace); color: var(--ink-soft, #3c4757); }
.journey code, .fine-note code { font-family: var(--mono, ui-monospace, monospace); font-size: .82em; background: rgba(30,40,55,.06); padding: .05em .35em; border-radius: 6px; }

.talk-feed { display: grid; gap: .5rem; }
.talk-row { display: flex; flex-direction: column; gap: .1rem; border: 1px solid var(--line, rgba(30,40,55,.14)); border-radius: 12px; padding: .7rem .9rem; text-decoration: none; color: var(--ink, #16202e); }
.talk-row:hover { border-color: var(--teal, #0e7a6b); }
.talk-title { font-weight: 600; font-size: .92rem; }
.talk-meta { font-family: var(--mono, ui-monospace, monospace); font-size: .74rem; color: var(--ink-soft, #5a6678); }

.axis-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; margin-top: .7rem; }
.axis-row { display: flex; align-items: baseline; gap: .8rem; text-align: left; width: 100%; box-sizing: border-box; border: 1px solid var(--line, rgba(30,40,55,.14)); border-radius: 12px; padding: .6rem .9rem; background: none; cursor: pointer; font: inherit; }
.axis-row:hover, .axis-row[aria-selected="true"] { border-color: var(--teal, #0e7a6b); }
.axis-id { font-family: var(--mono, ui-monospace, monospace); font-size: .82rem; color: var(--teal, #0e7a6b); flex: 0 0 auto; }
.axis-hint { min-width: 0; font-size: .84rem; color: var(--ink-soft, #3c4757); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.band-list { display: grid; gap: .5rem; }
.band-row { display: flex; gap: .9rem; align-items: baseline; border-bottom: 1px solid var(--line, rgba(30,40,55,.12)); padding: .55rem 0; }
.band-range { flex: 0 0 4.6rem; font-size: .78rem; color: var(--ink-soft, #5a6678); }
.band-body { display: flex; flex-direction: column; gap: .15rem; }
.band-traits { font-size: .9rem; line-height: 1.5; }

.prop-box { display: block; width: 100%; box-sizing: border-box; margin-top: .35rem; border: 1px solid var(--line, rgba(30,40,55,.18)); border-radius: 12px; padding: .7rem .8rem; font: inherit; font-size: .9rem; background: #fff; color: var(--ink, #16202e); }
textarea.prop-box { resize: vertical; line-height: 1.5; }
.who-zone { margin: 0 0 .6rem; }
.field-label { display: block; font-size: .8rem; letter-spacing: .02em; color: var(--ink-soft, #3c4757); margin-bottom: .1rem; }

.shelf-search { width: 100%; box-sizing: border-box; border: 1px solid var(--line, rgba(30,40,55,.18)); border-radius: 12px; padding: .65rem .8rem; font: inherit; font-size: .92rem; }

/* committee desk */
.seat-line { margin-top: 1rem; font-size: .82rem; color: var(--teal, #0e7a6b); }
.roll-wrap, .desk-feed, .ladder-hits { display: grid; gap: .45rem; margin-top: .7rem; }
.roll-row { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; justify-content: space-between; border: 1px solid var(--line, rgba(30,40,55,.14)); border-radius: 12px; padding: .6rem .9rem; }
.roll-row .mono { color: var(--accent, #0e7490); font-size: .8rem; }
.desk-row .talk-title { font-weight: 600; font-size: .9rem; }
.desk-row .talk-meta { font-family: var(--mono, ui-monospace, monospace); font-size: .74rem; color: var(--ink-soft, #5a6678); }
.seat-detail { border-left: 3px solid var(--teal, #0e7a6b); padding-left: .9rem; margin-top: .3rem; }
.seat-detail p { margin: 0 0 .5rem; font-size: .88rem; line-height: 1.55; }

/* The shared paper vocabulary the process surfaces speak — the room's
   btn-ink / shape-note / toast / fine-note / mono, restated here because
   the process pages carry only gui.css + this file (the room's opengaf.css
   stays on the room). Faithful to the same tokens. */
.mono { font-family: var(--mono, ui-monospace, Menlo, Consolas, monospace); font-variant-numeric: tabular-nums; }
.btn-ink { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--line, rgba(30,40,55,.18)); background: var(--paper, #fffefb); color: var(--ink, #16202e); border-radius: 999px; padding: .55rem 1.1rem; font-weight: 700; font-size: .95rem; min-height: 44px; cursor: pointer; transition: border-color .15s ease; }
.btn-ink:hover { border-color: var(--accent, #0e7490); }
.btn-ink:disabled { opacity: .45; cursor: default; }
.btn-ink.watch-on { border-color: var(--teal, #0e7a6b); color: var(--teal, #0e7a6b); background: rgba(14, 122, 107, .06); }
.shape-note { font-size: .84rem; color: var(--muted, #5a6577); line-height: 1.45; }
.fine-note { font-size: .86rem; color: var(--muted, #5a6577); line-height: 1.6; margin-top: .6rem; }
.fine-note .mono { display: block; margin-top: .4rem; font-size: .78rem; }
.toast { position: fixed; left: 50%; bottom: 18%; transform: translate(-50%, 20px); background: var(--band, #0c1a2b); color: var(--band-ink, #eef4f7); border-radius: 999px; padding: .7rem 1.4rem; font-size: .92rem; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; max-width: 86vw; z-index: 40; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* per-axis watchlist — one line per watched axis, a status chip, a route */
.watch-list { display: grid; gap: .45rem; margin-top: .7rem; }
.watch-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .85rem; border: 1px solid var(--line, rgba(30,40,55,.14)); border-radius: 12px; padding: .6rem .9rem; }
.watch-name { font-family: var(--mono, ui-monospace, monospace); font-size: .82rem; color: var(--teal, #0e7a6b); }
.watch-meta { font-family: var(--mono, ui-monospace, monospace); font-size: .72rem; color: var(--ink-soft, #5a6678); }
.watch-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; font-size: .82rem; margin-left: auto; }
.watch-actions a { color: var(--teal, #0e7a6b); border-bottom: 1px solid transparent; }
.watch-actions a:hover { border-color: currentColor; }
.watch-actions button { background: none; border: none; padding: 0; color: var(--ink-soft, #5a6678); cursor: pointer; font: inherit; text-decoration: underline; }
.watch-actions button:hover { color: var(--ink, #16202e); }
.watch-threadless { font-size: .74rem; color: var(--ink-soft, #8a94a5); }
.stat-chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--line, rgba(30,40,55,.16)); border-radius: 999px; padding: .06rem .6rem; font-size: .74rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-soft, #5a6678); white-space: nowrap; }
.stat-chip.on { border-color: rgba(26, 127, 75, .4); color: #1a7f4b; background: rgba(26, 127, 75, .07); }
.stat-chip.warm { border-color: rgba(180, 83, 9, .45); color: #9a5a08; background: rgba(180, 83, 9, .08); }
.stat-chip.gone { border-color: rgba(179, 55, 44, .4); color: #b3372c; background: rgba(179, 55, 44, .07); }
.watch-line { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .9rem 0 .3rem; }
.watch-line-note { margin: 0; max-width: 46ch; }
.thread-line { margin: .5rem 0 0; max-width: 34rem; }

/* the diff glass — line-level, green/red/grey, nothing else */
.diff-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: .7rem; }
@media (max-width: 640px) { .diff-side { grid-template-columns: 1fr; } }
.diff-side-col { display: flex; flex-direction: column; gap: .3rem; }
.diff-box { min-height: 9rem; font-family: var(--mono, ui-monospace, monospace); font-size: .82rem; line-height: 1.55; }
.link-ink { align-self: flex-start; background: none; border: none; padding: .15rem 0; color: var(--teal, #0e7a6b); cursor: pointer; font: inherit; font-size: .8rem; border-bottom: 1px solid transparent; }
.link-ink:hover { border-color: currentColor; }
.diff-frame { border: 1px solid var(--line, rgba(30,40,55,.16)); border-radius: 14px; overflow: hidden; margin-top: .5rem; }
.diff-line { display: flex; gap: .7rem; font-family: var(--mono, ui-monospace, monospace); font-size: .8rem; line-height: 1.55; padding: .16rem .85rem; white-space: pre-wrap; word-break: break-word; }
.diff-g { flex: 0 0 2.6rem; text-align: right; color: var(--ink-soft, #aab2bf); user-select: none; }
.diff-x { min-width: 0; flex: 1; }
.diff-add { background: rgba(26, 127, 75, .1); border-left: 3px solid #1a7f4b; }
.diff-add .diff-g { color: #1a7f4b; }
.diff-del { background: rgba(179, 55, 44, .08); border-left: 3px solid #b3372c; }
.diff-del .diff-g { color: #b3372c; }
.diff-ctx .diff-x { color: var(--ink-soft, #5a6678); }
.diff-ctx .diff-g { color: var(--ink-soft, #b7bfc9); }