/* Try page only. Loaded after site.css. */
/* ---- try page ---- */
.try-hero{padding-block:clamp(40px,6vw,88px) var(--section)}
.try-hero .intro{display:grid;gap:24px;max-width:820px}
.try-hero h1{font-weight:700;font-size:clamp(2.75rem,1.6rem + 5vw,6rem);line-height:.92;letter-spacing:-.035em}
.try-hero h1 span{display:block}
.try-hero h1 span:last-child{color:var(--star)}
.try-hero .lede{max-width:46ch}
.hint{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;align-items:baseline;margin:clamp(36px,5vw,56px) 0 14px}
.hint p{font-size:var(--t-sm);color:var(--ink-2)}
.hint strong{color:var(--ink)}
.hint ol{display:flex;flex-wrap:wrap;gap:4px 18px;list-style:none;margin:0;padding:0;font:400 var(--t-xs)/1.5 var(--mono);color:var(--ink-2);counter-reset:h}
.hint li{counter-increment:h}
.hint li::before{content:counter(h) ". ";color:var(--star)}
.hint li.done{color:var(--ink)}
.hint li.done::before{content:"✓ "}

/* the app window keeps the app's own Navy colorway in both modes */
.app{--a-deep:#081429;--a:#0B1B36;--a-raised:#132644;--a-line:#24324B;--a-text:#E7EBF2;--a-fog:#93A0B5;--a-mist:#7A88A0;
  --butter:#F2CF7E;--red:#E67C7C;--sage:#A9CDB0;--sky:#9DBFE6;--lav:#B4B0E0;--sand:#DCC7A1;--peach:#E6B8A2;
  background:var(--a);color:var(--a-text);border:1px solid #1B2A44;border-radius:12px;overflow:hidden;font:400 13.5px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;
  box-shadow:0 0 0 1px var(--rule-strong),var(--shadow);transition:box-shadow .28s var(--ease)}
.app[data-env="production"]{box-shadow:0 0 0 2px color-mix(in oklab,var(--red) 75%,transparent),var(--shadow)}
.app button,.app select{font-family:inherit}
.titlebar{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--a-deep);border-bottom:1px solid var(--a-line);flex-wrap:wrap}
.lights{display:flex;gap:7px}.lights i{width:11px;height:11px;border-radius:50%;background:#2A3953}
.crumb{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px}
.crumb .sep{color:var(--a-mist);font-weight:400}
.envdot{width:8px;height:8px;border-radius:50%;background:var(--sage);display:inline-block}
.app[data-env="production"] .envdot{background:var(--red)}
.envswitch{margin:0 0 0 auto;position:relative;min-inline-size:0;display:inline-flex;border:1px solid var(--a-line);border-radius:8px;padding:2px;background:var(--a)}
.envswitch legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.envswitch input{position:absolute;opacity:0;pointer-events:none}
.envswitch label{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:6px;cursor:pointer;color:var(--a-fog);font-size:12.5px;font-weight:500}
.envswitch input:checked + label{background:var(--a-raised);color:var(--a-text)}
.envswitch input#env-production:checked + label{color:#F3B3B3;background:color-mix(in oklab,var(--red) 20%,var(--a))}
.envswitch input:focus-visible + label{outline:2px solid var(--sky);outline-offset:1px}
.palette{display:none;align-items:center;gap:8px;color:var(--a-mist);border:1px solid var(--a-line);border-radius:7px;padding:4px 10px;min-width:240px;font-size:12.5px}
.palette kbd{margin-left:auto;font-size:11px;color:var(--a-fog)}
@media (min-width:900px){.palette{display:flex}.envswitch{margin-left:0}.crumb{margin-right:auto}}
.banner{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding:10px 16px;background:color-mix(in oklab,var(--red) 16%,var(--a));border-bottom:1px solid color-mix(in oklab,var(--red) 40%,var(--a));color:#F6D0D0;font-size:13px}
.banner b{color:#FFE3E3;font-weight:600}
.banner button{margin-left:auto}
.abtn{min-height:30px;padding:0 12px;border-radius:6px;border:1px solid var(--a-line);background:var(--a-raised);color:var(--a-text);font-size:12.5px;font-weight:500;cursor:pointer}
.abtn:hover{border-color:var(--a-fog)}
.abtn:disabled{opacity:.45;cursor:not-allowed}
.abtn:focus-visible{outline:2px solid var(--sky);outline-offset:1px}
.abtn.primary{background:#fff;color:#0B1B36;border-color:#fff;font-weight:600}
.abtn.primary:hover{background:#E7EBF2}
.tabs{display:flex;align-items:center;gap:20px;padding:0 16px;border-bottom:1px solid var(--a-line);min-height:42px;overflow:hidden}
.tabs .tname{font:600 14px/1 var(--mono)}
.tabs span{color:var(--a-fog);font-size:13px;padding:12px 0;white-space:nowrap}
.tabs span.on{color:var(--a-text);box-shadow:inset 0 -2px 0 var(--sky)}
.gridwrap{overflow-x:auto}
table.grid{border-collapse:collapse;width:100%;min-width:560px;font:400 13px/1 var(--mono);font-variant-numeric:tabular-nums}
.grid th{font:500 12.5px/1 var(--mono);color:var(--a-fog);text-align:left;padding:10px 12px;border-bottom:1px solid var(--a-line);border-right:1px solid var(--a-line)}
.grid td{padding:0 12px;height:38px;border-bottom:1px solid var(--a-line);border-right:1px solid var(--a-line);white-space:nowrap}
.grid .rn{width:40px;text-align:right;color:var(--a-mist);font-size:11px;padding-right:10px}
.grid .num{text-align:right}
.grid .fk{color:var(--sky)}
.grid .null{color:var(--a-mist);font-style:italic}
.grid td.status{padding:0}
.grid select{appearance:none;-webkit-appearance:none;width:100%;height:37px;padding:0 30px 0 12px;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237A88A0' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 12px center;color:var(--a-text);font:inherit;border:0;cursor:pointer}
.grid select:focus-visible{outline:2px solid var(--sky);outline-offset:-2px}
.grid select:disabled{cursor:not-allowed;background-image:none}
.grid option{background:var(--a);color:var(--a-text)}
.grid tr.dirty td{background:color-mix(in oklab,var(--butter) 7%,var(--a))}
.grid td.status.dirty{background:color-mix(in oklab,var(--butter) 26%,var(--a));box-shadow:inset 0 0 0 1px var(--butter)}
.grid td.status.dirty select{color:#FFF3D6}
.grid tr.flash td{animation:flash 900ms var(--ease)}
@keyframes flash{from{background:color-mix(in oklab,var(--sage) 30%,var(--a))}to{background:var(--a)}}
.pending{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px 16px;background:color-mix(in oklab,var(--butter) 12%,var(--a-deep));border-top:1px solid color-mix(in oklab,var(--butter) 45%,var(--a));font-size:13px}
.pending .count{display:inline-flex;align-items:center;gap:8px;color:#FBE6B6;font-weight:500}
.pending .count::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--butter)}
.pending .acts,.review-head .acts{margin-left:auto;display:flex;gap:8px}
.review{border-top:1px solid var(--a-line);background:var(--a-deep)}
.review-head{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--a-line)}
.review-head h3{font-size:13.5px;font-weight:600;font-family:inherit}
.review-head p{color:var(--a-fog);font-size:12.5px}
.sql{margin:0;padding:14px 16px 16px;overflow-x:auto;font:400 13px/1.65 var(--mono);color:var(--a-text)}
.sql .k{color:var(--lav)} .sql .s{color:var(--sage)} .sql .n{color:var(--peach)} .sql .t{color:var(--sand)} .sql .c{color:var(--a-mist)}
.review-foot{padding:0 16px 14px;color:var(--a-fog);font-size:12.5px;max-width:72ch}
.statusbar{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;padding:8px 16px;border-top:1px solid var(--a-line);background:var(--a-deep);color:var(--a-fog);font-size:12px}
.statusbar output{color:var(--sage)}
.statusbar output.warn{color:#F3B3B3}

/* explanation */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(28px,4vw,48px);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.steps li{display:grid;gap:10px;align-content:start;padding-top:20px;border-top:2px solid var(--ink)}
.steps .n{font:500 var(--t-xs)/1 var(--mono);letter-spacing:.08em;color:var(--star)}
.steps h3{font-size:var(--t-lg);font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.steps h3 i{width:12px;height:12px;border-radius:2px;background:var(--butter);display:inline-block}
.steps p{color:var(--ink-2);font-size:var(--t-sm)}
.cards{display:grid;gap:clamp(20px,3vw,32px);grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
.card{display:grid;gap:10px;align-content:start;padding:clamp(20px,3vw,28px);background:var(--surface);border:1px solid var(--rule);border-radius:4px}
.card h3{font-size:var(--t-md);font-weight:700}
.card p{color:var(--ink-2);font-size:var(--t-sm)}
.next{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.next li{display:grid;gap:4px 32px;padding:18px 0;border-bottom:1px solid var(--rule)}
@media (min-width:760px){.next li{grid-template-columns:260px minmax(0,1fr)}}
.next b{font-weight:700;font-size:var(--t-md)}
.next span{color:var(--ink-2);font-size:var(--t-sm)}
.chapter.tight{padding-block:clamp(48px,6vw,88px)}
.chapter.tight .ch-head{margin-bottom:0}
.closing{background:var(--band);color:var(--band-ink);padding-block:var(--section)}
.closing .wrap{display:grid;gap:24px}
.closing h2{font-weight:700;font-size:var(--t-xl);line-height:1.04;letter-spacing:-.028em;max-width:18ch}
.closing p{color:var(--band-ink-2);max-width:52ch}
.closing .btn-ghost{color:var(--band-ink);border-color:color-mix(in oklab,var(--band-ink) 40%,transparent)}
.closing .btn-ghost:hover{background:color-mix(in oklab,var(--band-ink) 10%,transparent)}
.closing .btn-primary{background:var(--band-ink);border-color:var(--band-ink);color:#041D32}
.closing :focus-visible{outline-color:var(--band-link)}