/* Kinsley Crew Development. Colors from the Superintendent Development Prototype v2.
   Phone first: one column, up to 640px of content, tap targets at least 44px, body text 16px+. */
:root {
	--r: #ad121f;        /* Kinsley red */
	--r-soft: #fff5f6;
	--g: #2f6849;        /* Kinsley green */
	--g-soft: #f3f7f4;
	--ink: #303030;
	--m: #5f5f5f;        /* muted text; 6.4:1 on white */
	--line: #dddddd;
	--bg: #f4f5f6;
	--amber: #8b6718;
	--amber-soft: #fff8e8;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.45; background: var(--bg); color: var(--ink); }
a { color: var(--r); }
h1, h2, h3 { line-height: 1.2; }

.envbar { text-align: center; font-size: 13px; font-weight: bold; padding: 4px 8px; }
.envbar-test { background: #ffd400; color: #303030; }
.envbar-dev { background: #3b3836; color: #fff; }

.top { background: #fff; border-bottom: 1px solid var(--line); padding: 8px 16px; display: flex; align-items: center; gap: 12px; position: relative; }
.top-logo { display: block; flex: 0 0 auto; line-height: 0; }
.top-logo img { height: 34px; width: auto; }
.top-title { flex: 1 1 auto; font-weight: bold; font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.menu { flex: 0 0 auto; }
.menu summary { list-style: none; cursor: pointer; min-height: 44px; min-width: 44px; padding: 10px 12px; border: 1px solid #aaa; border-radius: 8px; font-weight: bold; font-size: 15px; }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; right: 16px; top: 100%; z-index: 10; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px #0002; min-width: 230px; padding: 6px 0; }
.menu-panel a, .menu-btn { display: block; width: 100%; text-align: left; padding: 12px 16px; min-height: 44px; color: var(--ink); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; }
.menu-panel a:hover, .menu-btn:hover { background: var(--bg); }
.menu-btn-quiet { color: var(--m); font-size: 14px; }
.menu-who { padding: 8px 16px; font-size: 13px; color: var(--m); border-bottom: 1px solid var(--line); margin-bottom: 4px; }

.shell { max-width: 640px; margin: 0 auto; padding: 16px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px; box-shadow: 0 2px 7px #0000000b; margin-bottom: 16px; }
.narrow { max-width: 440px; margin-left: auto; margin-right: auto; }
.big { font-size: 26px; font-weight: bold; margin: 4px 0 12px; }
.kicker { font-size: 13px; color: var(--m); }
.small, .hint { font-size: 14px; color: var(--m); }
.hint { margin: 4px 0 0; }
.center { text-align: center; }
.back { display: inline-block; min-height: 44px; padding: 10px 0; font-weight: bold; text-decoration: none; }

.form label { display: block; font-weight: bold; margin: 14px 0 6px; }
.form input[type=email], .form input[type=password], .form input[type=text], .form input[type=date], .form textarea, .form select {
	width: 100%; font: inherit; font-size: 17px; padding: 11px 12px; min-height: 48px; border: 1px solid #999; border-radius: 8px; background: #fff; color: var(--ink);
}
.form input:focus, .form textarea:focus, .form select:focus { outline: 3px solid #ad121f55; border-color: var(--r); }

.btn { display: inline-block; border: 0; background: var(--r); color: #fff; min-height: 48px; padding: 12px 18px; border-radius: 8px; font: inherit; font-weight: bold; cursor: pointer; text-decoration: none; text-align: center; }
.btn:disabled { opacity: .55; cursor: default; }
.btn-alt { background: #fff; color: var(--ink); border: 1px solid #999; }
.btn-green { background: var(--g); }
.btn-block { display: block; width: 100%; margin-top: 20px; }

.flash { border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; font-size: 15px; }
.flash-ok { background: var(--g-soft); border: 1px solid #cbded0; color: #1f4732; }
.flash-error { background: var(--r-soft); border: 1px solid #e8b9be; color: #7d0d17; }
.flash-warn { background: var(--amber-soft); border: 1px solid #e4d4a5; color: #5d450f; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }

@media (min-width: 700px) {
	.top { padding: 10px 24px; }
	.top-logo img { height: 42px; }
	.top-title { font-size: 18px; }
	.shell { padding: 24px 16px; }
}

/* ---------------------------------------------------------------- shared bits */
.h2 { font-size: 18px; margin: 18px 0 8px; }
.muted { color: var(--m); }
.links { font-size: 15px; text-align: center; }
.links a { display: inline-block; padding: 10px 4px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.btn-row form { margin: 0; }
.btn-row.three > * { flex: 1 1 30%; }
.btn-row.three .btn, .btn-row.three form .btn { width: 100%; }
.btn small { display: block; font-size: 12px; font-weight: normal; opacity: .9; }
.btn[aria-disabled=true] { opacity: .4; }
.tag { display: inline-block; font-size: 12px; background: #eee; color: var(--m); border-radius: 4px; padding: 1px 6px; vertical-align: middle; }
.tight { margin: 4px 0 10px; padding-left: 20px; }
.tight li { margin: 4px 0; }
details > summary { cursor: pointer; min-height: 44px; padding: 10px 0; font-weight: bold; color: var(--r); }
.collapse ul { margin-top: 0; }
.bar { height: 8px; background: #eee; border-radius: 9px; overflow: hidden; margin: 11px 0 6px; }
.bar i { display: block; height: 100%; background: var(--r); }
.w0 { width: 0%; } .w5 { width: 5%; } .w10 { width: 10%; } .w15 { width: 15%; } .w20 { width: 20%; } .w25 { width: 25%; } .w30 { width: 30%; } .w35 { width: 35%; } .w40 { width: 40%; } .w45 { width: 45%; } .w50 { width: 50%; } .w55 { width: 55%; } .w60 { width: 60%; } .w65 { width: 65%; } .w70 { width: 70%; } .w75 { width: 75%; } .w80 { width: 80%; } .w85 { width: 85%; } .w90 { width: 90%; } .w95 { width: 95%; } .w100 { width: 100%; }

/* ---------------------------------------------------------------- G3 My Crew */
.card { display: block; position: relative; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 12px; color: var(--ink); text-decoration: none; box-shadow: 0 2px 7px #0000000b; }
.card:active { background: #fafafa; }
.card .name { font-size: 19px; font-weight: bold; }
.card .role { font-size: 14px; color: var(--m); }
.card .label { font-size: 13px; color: var(--m); margin-top: 12px; }
.card .focus-line { color: var(--r); font-weight: bold; }
.card .move-line { font-size: 14px; font-weight: bold; color: var(--g); }
.card .needs { color: var(--amber); }
.badge { position: absolute; top: 12px; right: 12px; background: var(--r); color: #fff; font-size: 12px; font-weight: bold; padding: 4px 9px; border-radius: 99px; }
.badge.badge-inline { position: static; display: inline-block; vertical-align: 1px; }

/* ---------------------------------------------------------------- G4 Person overview */
.pill { display: inline-block; background: #f5e9ea; color: var(--r); font-size: 12px; font-weight: bold; padding: 6px 10px; border-radius: 99px; }
.ready { border-left: 4px solid var(--g); background: var(--g-soft); padding: 12px 14px; border-radius: 5px; margin: 14px 0; }
.ready b { color: var(--g); }
.ready ul { margin: 6px 0 0; padding-left: 20px; }
.move-big { font-size: 24px; font-weight: bold; margin: 6px 0 12px; }
.move-big.green { color: var(--g); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.comp { border: 1px solid var(--line); padding: 8px 6px; border-radius: 8px; font-size: 13px; line-height: 1.25; min-height: 44px; }
.comp .mark { font-weight: bold; }
.comp.demonstrated { background: #f2f7f3; }
.comp.demonstrated .mark { color: var(--g); }
.comp.current { border: 2px solid var(--r); background: #fff7f7; }
.comp.current .mark { color: var(--r); }
.legend { margin-top: 8px; }
.gates { list-style: none; padding: 0; margin: 10px 0; font-size: 15px; }
.gates li { padding: 5px 0; border-bottom: 1px solid #f0f0f0; }
.gates li.met span { color: var(--g); font-weight: bold; }
.gates li.remain { color: var(--amber); font-weight: bold; }
.gate-desc { font-weight: normal; font-size: 13px; color: var(--m); margin-left: 20px; }

/* ---------------------------------------------------------------- G5 Choose focus */
.focuslist { display: grid; gap: 8px; margin-top: 14px; }
.focusrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 13px; min-height: 52px; border: 1px solid #bbb; border-radius: 8px; background: #fff; color: var(--ink); text-decoration: none; }
.focusrow span { font-size: 13px; color: var(--m); text-align: right; }
.focusrow.current { border: 2px solid var(--r); background: #fff7f7; }
.focusrow.done { background: #f2f7f3; border-color: #cbded0; }
.notice { background: var(--amber-soft); border: 1px solid #e4d4a5; border-radius: 8px; padding: 12px; font-size: 15px; margin: 6px 0 4px; }

/* ---------------------------------------------------------------- G6 readiness, G9 ratings: radio buttons as big buttons */
.question { border: 0; padding: 0; margin: 18px 0; }
.question legend { font-weight: bold; font-size: 16px; margin-bottom: 8px; }
.qnum { color: var(--m); font-weight: normal; }
.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.opt, .rating { position: relative; display: block; cursor: pointer; }
.opt input, .rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 8px 6px; border: 1px solid #999; border-radius: 8px; background: #fff; font-size: 14px; line-height: 1.2; }
.opt input:checked + span, .rating input:checked + span { border: 2px solid var(--r); background: var(--r-soft); font-weight: bold; }
.opt input:focus-visible + span, .rating input:focus-visible + span { outline: 3px solid #ad121f55; }
.ratings { border: 0; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.rating span { display: block; padding: 12px 14px; border: 1px solid #999; border-radius: 8px; background: #fff; min-height: 56px; }
.rating b { display: block; font-size: 17px; }
.rating small { display: block; font-size: 13px; color: var(--m); margin-top: 2px; }
.when { border: 0; padding: 0; margin: 16px 0 0; }
.when legend { font-weight: bold; margin-bottom: 6px; }
.when-date { margin-top: 8px; }
.js .when-date { display: none; }
.js .when-date.show { display: block; }

/* ---------------------------------------------------------------- G7/G8 strip and next move */
.strip { list-style: none; display: flex; gap: 4px; padding: 0; margin: 16px 0; counter-reset: s; }
.strip li { flex: 1; text-align: center; font-size: 10px; line-height: 1.2; color: #777; padding-top: 10px; border-top: 4px solid #ddd; }
.strip li.on { color: var(--r); font-weight: bold; border-top-color: var(--r); }
.strip li.past { color: var(--g); font-weight: bold; border-top-color: var(--g); }
.next { background: var(--g-soft); border: 1px solid #cbded0; border-radius: 10px; padding: 14px 16px; margin: 12px 0; }
.next h2 { color: var(--g); margin: 0 0 6px; font-size: 18px; }
.prompt-banner { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--r); color: #fff; padding: 14px 16px; border-radius: 10px; margin-bottom: 12px; text-decoration: none; }
.prompt-banner span { white-space: nowrap; font-weight: bold; }
.values { margin-top: 8px; }

/* ---------------------------------------------------------------- evidence, decisions, history */
.evidence-list, .compact, .timeline { list-style: none; padding: 0; margin: 0; }
.evidence-list li { border-top: 1px solid var(--line); padding: 10px 0; }
.ev-note { margin: 4px 0; font-size: 15px; white-space: normal; }
.voided { opacity: .6; }
.voided .ev-head b, .compact .voided { text-decoration: line-through; }
.void summary { font-size: 14px; color: var(--m); min-height: 36px; padding: 6px 0; font-weight: normal; }
.void-why { color: var(--r); }
.compact li { padding: 4px 0; font-size: 15px; }
.choices { display: grid; gap: 8px; }
.choices .btn { width: 100%; }
.timeline li { border-left: 3px solid var(--line); padding: 6px 0 10px 12px; margin-left: 4px; }
.timeline li.ev-observation { border-left-color: var(--r); }
.timeline li.ev-decision, .timeline li.ev-status { border-left-color: var(--g); }
.inline-form { margin-bottom: 12px; }
.inline-form select { max-width: 100%; }

/* ---------------------------------------------------------------- our guesses (config show_guesses)
   Purple dotted = placeholder wording; dashed purple box = a feature or layout the spec doesn't
   cover. Subtle on purpose: readable as normal text, obvious once you know to look. */
.show-guesses .guess { background: #f3effa; border-bottom: 1px dotted #7a5cc0; padding: 0 1px; border-radius: 2px; }
.show-guesses .guess-area { border: 1px dashed #a48fd6; border-radius: 8px; padding: 6px 10px 8px; margin: 10px 0; background: #fbf9fe; }
.show-guesses .guess-area::before { content: "guess · " attr(data-note); display: block; margin-bottom: 4px; font-size: 11px; line-height: 1.3; letter-spacing: .02em; color: #6a4fb0; }
.guess-key { background: #f3effa; border-bottom: 1px dotted #7a5cc0; color: #303030; padding: 0 3px; }
.envbar a { color: inherit; }

/* ---------------------------------------------------------------- A pages (desktop-first, plain) */
.wide .shell { max-width: 1180px; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
table.data th, table.data td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { background: #f7f7f7; font-size: 13px; color: var(--m); white-space: nowrap; }
table.data th a { color: inherit; text-decoration: none; }
table.data tr.stale td { background: #fff4e5; }
table.data td.nw { white-space: nowrap; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 8px; }
.measures { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 16px; }
.measures .guess-area { margin: 0; }
.measure { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.measure b { display: block; font-size: 22px; }
.measure span { font-size: 13px; color: var(--m); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
.row-actions form { display: inline; }
.row-actions .btn { min-height: 34px; padding: 6px 10px; font-size: 13px; }
pre.preview { background: #f7f7f7; padding: 10px; overflow-x: auto; font-size: 13px; }
.errors li { color: #7d0d17; }

@media (max-width: 380px) {
	.opts { grid-template-columns: 1fr; }
	.strip li { font-size: 9px; }
}
.spaced { margin-top: 16px; }
.check { display: flex; gap: 8px; align-items: center; font-weight: normal !important; }
.check input { width: 22px; height: 22px; }
.row-actions input[type=text] { width: auto; min-width: 140px; display: inline-block; min-height: 36px; padding: 6px 8px; font-size: 14px; }
.row-actions input[type=date], .row-actions select { width: auto; display: inline-block; min-height: 36px; padding: 6px 8px; font-size: 14px; }
.gaps code { background: #f2f2f2; padding: 0 4px; border-radius: 3px; font-size: 14px; }
.gaps h2 { margin-top: 22px; }

/* ---------------------------------------------------------------- the prototype's look (Prototype v2)
   GS screens copy its sizes and colors: wide shell, dark banner, two-column person and development
   pages, three cards across. Differences on purpose: sentence case instead of capitals (Rob,
   Oct 15), and 44px tap targets from the spec. */
.wide .shell { max-width: 1160px; }
.banner { background: #3b3836; color: #fff; padding: 15px 18px; border-radius: 11px; display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; margin-bottom: 20px; }
.two, .grid { display: grid; gap: 18px; align-items: start; }
.two { grid-template-columns: 1.45fr .8fr; }
.grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.two > *, .grid > * { min-width: 0; }
.mid { max-width: 850px; margin-left: auto; margin-right: auto; }
.panel h3, .crew-title { margin: 18px 0 10px; }
.crew-title { font-size: 24px; margin-top: 0; }
.kicker { font-size: 11px; letter-spacing: .07em; color: #6b6b6b; }
.big { font-size: 27px; margin: 5px 0; }
.pill { display: inline-block; background: #f5e9ea; color: var(--r); font-size: 12px; font-weight: bold; padding: 5px 9px; border-radius: 99px; }
.focus-by { margin-top: 8px; }
.link { color: var(--r); font-weight: bold; text-decoration: none; }
.why { display: none; margin-top: 10px; padding: 12px; background: #f7f7f7; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.why.show, .why:target { display: block; }
.ready { border-left: 4px solid var(--g); background: #f3f7f4; padding: 14px 16px; border-radius: 5px; margin: 16px 0; }
.ready ul { margin: 2px 0 0; padding-left: 18px; }
.comps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.comp { border: 1px solid var(--line); padding: 10px; border-radius: 8px; font-size: 12px; min-height: 0; }
.comp.demonstrated { background: #f2f7f3; }
.comp.current { border: 2px solid var(--r); background: #fff7f7; }
.comp-short { display: none; }
.gates { font-size: 13px; line-height: 1.75; margin: 12px 0; }
.gates .remain { color: #8b6718; font-weight: bold; }
.notice { background: #fff8e8; border: 1px solid #e4d4a5; border-radius: 8px; padding: 12px; font-size: 13px; }
.notice-ok { background: var(--g-soft); border-color: #cbded0; }
.links-left { margin: 14px 0 0; }
.card { padding: 19px; margin-bottom: 0; }
.card .name { font-size: 19px; }
.card .role { font-size: 13px; color: #6b6b6b; }
.card .label { font-size: 11px; letter-spacing: .07em; color: #6b6b6b; margin-top: 16px; }
.card .red { color: var(--r); font-weight: bold; }
.card .btn { min-height: 44px; padding: 10px 14px; }
.btn { padding: 10px 14px; min-height: 44px; }
.btn-alt { border-color: #aaa; }
.panel { padding: 19px; }

@media (min-width: 801px) {
	.top { padding: 10px 25px; gap: 20px; }
	.top-logo img { height: 50px; }
	.top-title { font-size: 20px; }
	.wide .shell { padding: 24px; }
	.small { font-size: 12px; }
	.hint { font-size: 13px; }
	.ratings { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
	.two, .grid { grid-template-columns: 1fr; }
	.banner { font-size: 14px; }
}
@media (max-width: 600px) {
	.comp-full { display: none; }
	.comp-short { display: inline; }
}

/* ---------------------------------------------------------------- A pages in the prototype's style */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-block; white-space: nowrap; padding: 7px 14px; border: 1px solid var(--line); border-radius: 99px; background: #fff; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: bold; }
.chip:hover { border-color: #aaa; }
.chip.on { background: var(--r); border-color: var(--r); color: #fff; }
.admin-nav { margin: 0 0 18px; }
.week-nav { margin: -8px 0 14px; }
.measures { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin-bottom: 18px; }
.measure { padding: 12px 14px; margin: 0; }
.measure .big { font-size: 26px; margin: 4px 0 2px; }
.measure .of { font-size: 15px; color: #6b6b6b; font-weight: normal; }
.measure .bar { margin: 6px 0 4px; height: 6px; }
.show-guesses .guess-area.measure { padding-top: 8px; }
.big.green, .green-b { color: var(--g); font-weight: bold; }
.red { color: var(--r); font-weight: bold; }
.amber { color: #8b6718; font-weight: bold; }
.table-panel { padding: 0; overflow: hidden; }
.table-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 19px 12px; }
.table-head h3 { margin: 0; }
.table-panel .table-wrap { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
table.overview { font-size: 14px; }
table.overview th { background: #fafafa; font-size: 12px; letter-spacing: .02em; padding: 10px; }
table.overview td { padding: 12px 10px; vertical-align: middle; }
table.overview tbody tr:hover td { background: #fcfcfc; }
table.overview tr.stale td { background: #fff8e8; }
table.overview tr.stale td:first-child { box-shadow: inset 4px 0 0 #e4b94a; }
table.overview .who { color: var(--ink); font-weight: bold; text-decoration: none; font-size: 15px; }
table.overview .who:hover { color: var(--r); text-decoration: underline; }
table.overview td.mini { min-width: 92px; }
table.overview td.mini .bar { margin: 0 0 3px; height: 6px; }
table.overview td.num { text-align: center; font-weight: bold; }
.bar-g i { background: var(--g); }
.legend-line { padding: 10px 19px 14px; margin: 0; }
.swatch-stale { display: inline-block; width: 12px; height: 12px; background: #fff8e8; border-left: 4px solid #e4b94a; vertical-align: -1px; margin-right: 4px; }
.table-head-plain { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
table.overview tr.inactive td { color: #999; }
.danger { color: var(--r); }
.gate-row { padding: 8px 0; border-top: 1px solid #f0f0f0; font-size: 14px; }
.gate-row .row-actions { margin-top: 4px; }
.row-actions.stack select, .row-actions.stack input[type=text] { margin: 0 4px 4px 0; }
.steps li { margin: 6px 0; }

/* ---------------------------------------------------------------- pages added as our guesses */
.chip.chip-guess { border-style: dashed; border-color: #a48fd6; }
.edit-user { display: inline-block; vertical-align: top; }
.edit-user > summary { list-style: none; cursor: pointer; }
.edit-user > summary::-webkit-details-marker { display: none; }
.edit-user[open] { display: block; min-width: 260px; }
.tag-gap { background: #f3effa; color: #6a4fb0; }
.tag-late { background: #fff3d6; color: #7a5200; margin-left: 4px; }
.rule-a tr.gap-row td { background: #fbf9fe; }
.rule-a td.lvl1 b, .rule-a td.lvl2 b { color: var(--r); }
.rule-a td.lvl4 b, .rule-a td.lvl5 b { color: var(--g); }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid #eee; }
.checklist li:first-child { border-top: 0; }
.checklist .ck { flex: 0 0 26px; height: 26px; border-radius: 50%; text-align: center; line-height: 26px; font-weight: bold; }
.ck-ok .ck { background: #e4f0e9; color: var(--g); }
.ck-todo .ck { background: #fbe9ea; color: var(--r); }
.ck-note .ck { background: #fdf3dc; color: #8a5a00; }
details.mail { border-top: 1px solid #eee; padding: 8px 0; }
details.mail > summary { cursor: pointer; min-height: 44px; }
.mail-body { white-space: pre-wrap; word-break: break-word; font: 14px/1.45 ui-monospace, Menlo, Consolas, monospace; background: #f7f7f7; padding: 10px; border-radius: 6px; }
.content-comp h3 { margin-top: 14px; }
.print-events td { vertical-align: top; }
@media print {
	header.top, .envbar, .banner, .no-print, .admin-nav, .flash { display: none !important; }
	body, .shell { background: #fff; max-width: none; padding: 0; margin: 0; }
	.print-sheet .data { font-size: 11px; }
	.print-sheet h2 { break-after: avoid; }
	.print-sheet tr { break-inside: avoid; }
}
.envbar-viewas { background: #6a4fb0; color: #fff; display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.envbar-viewas form { margin: 0; }
.btn.btn-small { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.viewer .loop-steps { list-style: none; counter-reset: s; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 8px 0 12px; }
.viewer .loop-steps li { counter-increment: s; font-size: 13px; padding: 5px 10px; border-radius: 99px; background: #f1f1f1; color: #666; }
.viewer .loop-steps li::before { content: counter(s) ". "; }
.viewer .loop-steps li.done { background: var(--g-soft); color: var(--g); }
.viewer .loop-steps li.now { background: var(--r); color: #fff; font-weight: bold; }
.viewer-actions form { margin: 0; }
.dev-tools { margin-top: 18px; border: 2px solid #3b3836; }
.dev-tools .table-head p { margin: 4px 0 0; }
.dev-chip { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 99px; background: #3b3836; color: #fff; font-size: 12px; font-weight: normal; vertical-align: middle; }
.demo-links .link-cell { display: flex; gap: 8px; align-items: center; min-width: 320px; }
.demo-links .copy-src { flex: 1; min-width: 0; min-height: 44px; font: 13px ui-monospace, Menlo, Consolas, monospace; color: #555; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.viewer-track { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; }
.viewer-track .h3 { font-size: 15px; margin: 4px 0 0; }
.tracks-list { margin: 8px 0; padding: 0; list-style: none; }
.tracks-list li { padding: 6px 0; border-top: 1px solid var(--line); }
.tracks-list li:first-child { border-top: 0; }
.who-line { color: #666; }
.focusrow.taken { background: #f7f7f7; color: #777; }
.track-line + .track-line { margin-top: 4px; }
.which-focus { max-width: 1160px; margin: 8px auto 0; padding: 6px 16px; font-size: 14px; }
.focus-tabs { margin: 8px 0; }