/* Growth Map — parent surface. Adult register, sunlight-readable, big targets.
   Contrast: body text #17251d on #f7f5ef (≈13.5:1); muted #44564b on #f7f5ef (≈7.0:1). */
* { box-sizing: border-box; }
/* The hidden attribute must always win. Author display declarations
   (.gateOverlay flex, #bottomNav flex, .bigbtn inline-block) otherwise
   override the UA stylesheet's [hidden] rule, the attribute goes inert,
   and the element can never be hidden — the v0.1.0 Developer Options trap:
   the overlay rendered from first paint and Close/Escape did nothing. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: #f7f5ef; color: #17251d; font-size: 17px; line-height: 1.45; }
.screen { max-width: 760px; margin: 0 auto; padding: 16px 16px 96px; }
.card { background: #fff; border: 1px solid #c9d2c6; border-radius: 14px; padding: 20px; margin-top: 24px; }
h1 { font-size: 24px; margin: 0 0 8px; }
h2 { font-size: 20px; margin: 26px 0 8px; }
h3 { font-size: 17px; margin: 18px 0 6px; }
.note { color: #44564b; font-size: 15px; }
.bigbtn { display: inline-block; background: #274435; color: #fff; border: 0; border-radius: 10px; padding: 14px 18px; font-size: 17px; min-height: 52px; cursor: pointer; position: relative; overflow: hidden; }
.bigbtn.small { padding: 10px 14px; min-height: 48px; font-size: 16px; }
.bigbtn:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #b3540e; outline-offset: 2px; }
#holdFill { position: absolute; left: 0; bottom: 0; height: 4px; width: 0%; background: #e8b34b; }
.row { display: flex; gap: 10px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.row.wrap { flex-wrap: wrap; }
input[type="text"], input[type="search"], input[type="number"], input[type="password"], input[type="date"] { font-size: 17px; padding: 10px; border: 1.5px solid #44564b; border-radius: 8px; background: #fff; color: #17251d; min-height: 48px; flex: 1; min-width: 120px; }
.gateQ { font-size: 22px; font-weight: 600; }
.gateMsg { color: #7a1f1f; min-height: 1.2em; }
.statusLine { color: #274435; font-size: 15px; min-height: 1.2em; }
.topbar { display: flex; align-items: center; gap: 12px; }
.topbar h1 { flex: 1; }
.domainList { display: grid; gap: 10px; }
.domainCard { text-align: left; background: #fff; border: 1.5px solid #274435; border-radius: 12px; padding: 14px 16px; font-size: 18px; min-height: 56px; cursor: pointer; width: 100%; color: #17251d; }
.domainCard .sub { display: block; font-size: 14px; color: #44564b; margin-top: 4px; }
.listBox { display: grid; gap: 8px; }
.entryLine { background: #fff; border: 1px solid #c9d2c6; border-radius: 10px; padding: 10px 12px; font-size: 15px; }
.itemRow { width: 100%; text-align: left; background: #fff; border: 1px solid #c9d2c6; border-radius: 10px; padding: 12px; font-size: 16px; min-height: 56px; cursor: pointer; color: #17251d; display: block; margin-bottom: 8px; }
.itemRow .st { float: right; font-size: 13px; font-weight: 700; color: #274435; }
.itemRow.floorOnly { border-style: dashed; background: #efece3; } /* demotion is structural (dashed border + tint + tag), never opacity: text pairs stay at full computed contrast (DES D-3) */
.tag { display: inline-block; font-size: 12px; font-weight: 700; border: 1px solid #44564b; border-radius: 999px; padding: 1px 8px; margin-left: 6px; color: #44564b; }
.itemText { font-size: 20px; font-weight: 600; }
.sourceLine { font-size: 13.5px; color: #44564b; }
.segRow { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.segBtn { flex: 1; min-height: 52px; font-size: 16px; border-radius: 10px; border: 1.5px solid #274435; background: #fff; color: #17251d; cursor: pointer; padding: 10px; }
.segBtn[aria-pressed="true"] { background: #274435; color: #fff; }
.honestyBox { background: #fdf3e0; border: 1.5px solid #b3540e; border-radius: 12px; padding: 14px; font-size: 15px; margin: 12px 0; }
.setupBlock { background: #fff; border: 1px solid #c9d2c6; border-radius: 12px; padding: 14px 16px; margin-top: 16px; }
.photoRow { display: flex; gap: 8px; flex-wrap: wrap; }
.photoRow img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid #c9d2c6; }
.pairOut { word-break: break-all; font-size: 13px; background: #eef0e9; border-radius: 8px; padding: 8px; }
.fileLabel { cursor: pointer; }
.versionTag { color: #44564b; font-size: 13px; text-align: center; margin-top: 28px; }
#bottomNav { position: fixed; left: 0; right: 0; bottom: 0; background: #274435; display: flex; }
#bottomNav button { flex: 1; background: none; border: 0; color: #fff; font-size: 16px; min-height: 56px; cursor: pointer; }
.gateOverlay { position: fixed; inset: 0; background: rgba(23,37,29,.72); display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; overflow: auto; }
.gateCard { background: #fff; border-radius: 14px; padding: 20px; max-width: 560px; width: 100%; position: relative; }
.devCloseX { position: absolute; top: 8px; right: 8px; width: 48px; height: 48px; border: 0; border-radius: 10px; background: transparent; color: #274435; font-size: 24px; line-height: 1; cursor: pointer; }
.devCloseX:focus-visible { outline: 3px solid #b3540e; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (forced-colors: active) { .segBtn[aria-pressed="true"] { outline: 3px solid Highlight; } .itemRow, .domainCard { border: 1.5px solid ButtonText; } }