/* Community Apps: the small amount of styling Mythox does not already ship.
   Every colour, font and radius below is a Mythox token from codex-site.css.
   Nothing here repaints or replaces a Mythox component. */

/* ---------- the guide pages ---------- */
.guide-body h1{ font-family:var(--sans); font-weight:400; letter-spacing:-.05em; line-height:1.02;
  font-size:clamp(30px,4.6vw,54px); margin-bottom:8px; }
.guide-body h2{ font-family:var(--sans); font-weight:500; letter-spacing:-.03em;
  font-size:clamp(21px,2.4vw,29px); margin-top:52px; padding-top:26px; border-top:1px solid var(--border); }
.guide-body h3{ font-family:var(--sans); font-weight:600; letter-spacing:-.02em; font-size:18px; margin-top:34px; }
.guide-body h4{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); margin-top:26px; }
.guide-body p{ color:var(--muted); font-size:14.75px; line-height:1.68; margin-top:15px; max-width:74ch; }
.guide-body p strong, .guide-body li strong{ color:var(--text); font-weight:600; }
.guide-body ul, .guide-body ol{ margin-top:15px; padding-left:0; list-style:none; display:grid; gap:10px; max-width:74ch; }
.guide-body ul li{ color:var(--muted); font-size:14.5px; line-height:1.64; display:flex; gap:12px; }
.guide-body ul li::before{ content:"//"; color:var(--accent); font-family:var(--mono); flex:0 0 auto; }
.guide-body ol{ counter-reset:step; }
.guide-body ol li{ color:var(--muted); font-size:14.5px; line-height:1.64; display:flex; gap:12px; counter-increment:step; }
.guide-body ol li::before{ content:counter(step); color:var(--accent); font-family:var(--mono);
  font-size:11.5px; letter-spacing:.1em; flex:0 0 auto; padding-top:3px; }
.guide-body blockquote{ margin-top:18px; padding:16px 20px; border-left:2px solid var(--accent);
  background:var(--surface); border-radius:0 var(--radius) var(--radius) 0; color:var(--muted); font-size:14.5px; }
.guide-body code{ font-family:var(--mono); font-size:12.5px; color:var(--text);
  background:var(--surface-2); padding:2px 6px; border-radius:6px; }
.guide-body pre{ margin-top:16px; padding:18px 20px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); overflow-x:auto; }
.guide-body pre code{ background:none; padding:0; font-size:12.5px; line-height:1.7; color:var(--text); }
.guide-body hr.guide-rule{ border:0; border-top:1px solid var(--border); margin:34px 0 0; opacity:.6; }
.guide-body p.guide-verify{ color:var(--text); border-left:2px solid var(--accent); padding-left:16px; }

.guide-table-wrap{ margin-top:18px; overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); }
table.guide-table{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:460px; }
table.guide-table th{ text-align:left; font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--dim); padding:14px 16px;
  border-bottom:1px solid var(--border); background:var(--surface); }
table.guide-table td{ padding:14px 16px; color:var(--muted); line-height:1.6;
  border-bottom:1px solid var(--border); vertical-align:top; }
table.guide-table tr:last-child td{ border-bottom:0; }

.legal-nav{ display:grid; gap:9px; margin-top:16px; }
.legal-nav a{ font-size:12.75px; color:var(--muted); line-height:1.45; transition:color .2s; }
.legal-nav a:hover{ color:var(--text); }
@media (max-width:900px){
  .legal-layout{ grid-template-columns:minmax(0,1fr); }
  .legal-side{ display:none; }
}

/* ---------- the tools page cards ---------- */
.tool-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin-top:38px; }
.tool-card{ display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--surface); padding:26px 24px 24px; transition:transform .25s, border-color .3s, box-shadow .25s; }
.tool-card:hover{ transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--accent) 40%,var(--border)); box-shadow:0 18px 50px rgba(0,0,0,.3); }
.tool-card .cnum{ font-family:var(--mono); font-size:11.5px; color:var(--accent); letter-spacing:.16em; }
.tool-card h3{ font-weight:600; font-size:19px; letter-spacing:-.02em; margin-top:14px; color:var(--text); }
.tool-card p{ color:var(--muted); font-size:13.75px; line-height:1.62; margin-top:10px; }
.tool-card .tool-foot{ margin-top:auto; padding-top:20px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.tool-card .tool-ico{ width:26px; height:26px; stroke:var(--accent); stroke-width:1.4; fill:none; display:block; }

/* ---------- the browser app ---------- */
.app-step{ border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface);
  padding:24px 22px; margin-top:18px; }
.app-step.is-locked{ opacity:.45; }
.app-step-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.app-step-head .snum{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--accent); }
.app-step-head h3{ font-weight:600; font-size:18px; letter-spacing:-.02em; color:var(--text); }
.app-step p.hint{ color:var(--muted); font-size:13.5px; line-height:1.6; margin-top:10px; }
.app-label{ display:block; margin-top:16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--dim); }
.app-input, .app-area{ width:100%; margin-top:8px; padding:12px 14px; font:inherit; font-size:14px;
  color:var(--text); background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius); outline:none; transition:border-color .2s, box-shadow .2s; }
.app-area{ min-height:150px; resize:vertical; line-height:1.6; font-family:var(--mono); font-size:12.5px; }
.app-input:focus, .app-area:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--glow); }
.prompt-box{ margin-top:12px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-2); }
.prompt-box .prompt-bar{ height:46px; padding:0 14px; display:flex; align-items:center; justify-content:space-between;
  gap:12px; border-bottom:1px solid var(--border); }
.prompt-box .prompt-bar span{ font-family:var(--mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--dim); }
.prompt-box pre{ margin:0; padding:16px 18px; max-height:300px; overflow:auto; white-space:pre-wrap;
  word-break:break-word; font-family:var(--mono); font-size:12.25px; line-height:1.66; color:var(--text); }
.copy-btn{ font-family:var(--sans); font-size:12.5px; font-weight:500; cursor:pointer;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  padding:7px 15px; border-radius:999px; transition:border-color .2s, box-shadow .2s, transform .2s; }
.copy-btn:hover{ transform:translateY(-1px); border-color:var(--accent); box-shadow:0 8px 22px var(--glow); }
.copy-btn.is-done{ color:var(--accent); border-color:var(--accent); }
.app-actions{ margin-top:18px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.app-note{ margin-top:14px; padding:12px 14px; border-radius:var(--radius); background:var(--surface-2);
  color:var(--muted); font-size:13px; line-height:1.55; }
.app-note.is-warn{ color:var(--text); border-left:2px solid var(--accent); }
.ch-row{ display:flex; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid var(--border);
  font-size:13.5px; color:var(--muted); }
.ch-row:last-child{ border-bottom:0; }
.ch-row .ch-state{ font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--dim); flex:0 0 66px; }
.ch-row.is-done .ch-state{ color:var(--accent); }
.ch-row .ch-title{ color:var(--text); }
.ch-row .ch-meta{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--dim); text-align:right; }
.ch-row .ch-pick{ font-family:var(--sans); font-size:12px; cursor:pointer; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); padding:5px 12px; border-radius:999px; }
.ch-row .ch-pick:hover{ border-color:var(--accent); }
.bar-track{ height:6px; border-radius:999px; background:var(--surface-2); overflow:hidden; margin-top:16px; }
.bar-fill{ height:100%; width:0%; background:var(--accent); box-shadow:0 0 16px var(--glow); transition:width .35s; }
.check-row{ display:flex; gap:13px; align-items:flex-start; padding:13px 0; border-bottom:1px solid var(--border);
  color:var(--muted); font-size:13.5px; line-height:1.6; }
.check-row:last-child{ border-bottom:0; }
.check-row input{ width:17px; height:17px; flex:0 0 auto; margin-top:2px; accent-color:var(--accent); cursor:pointer; }
.check-row.is-ticked span{ opacity:.5; text-decoration:line-through; }
.money-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:16px; margin-top:8px; }
.privacy-line{ display:flex; gap:11px; align-items:center; margin-top:24px; font-family:var(--mono);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.privacy-line::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 12px var(--glow); flex:0 0 auto; }
@media (max-width:640px){
  .prompt-box pre{ font-size:11.5px; }
  .ch-row{ flex-wrap:wrap; }
  .ch-row .ch-meta{ margin-left:0; width:100%; text-align:left; }
}

/* ---------- The AI key box and the Write it with AI buttons ---------- */

.ai-key { border-color: rgba(255,255,255,0.14); }
.ai-key select.app-input { cursor: pointer; }
.ai-btn { margin-left: 8px; }
.ai-btn.is-off { opacity: 0.55; }
.ai-btn[disabled] { opacity: 0.55; cursor: default; }
.ai-said { margin-top: 10px; min-height: 1em; }
.rowbtns { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.status { margin-top:12px; font-size:13px; color:var(--muted); min-height:1em; }