/* Public reading surfaces: blog and guides. Core colors come from landing.css.
   The additional status/surface tokens use the existing DESIGN.md palette. */
.guide-page {
  --amber:#856017;
  --amber-wash:#f8efd9;
  --rust:#a04535;
  --rule-strong:#b4c4b3;
  --card-alt:#f4f8ef;
  /* Read mode: fixed rem roles from the established 12–32 px scale. */
  --reading-title:2rem;
  --reading-section:1.5rem;
  --reading-subhead:1.25rem;
  --reading-lead:1.125rem;
  --reading-prose:1.0625rem;
  --reading-body:1rem;
  --reading-meta:.875rem;
  --reading-label:.75rem;
}

.guide-page .guide{max-width:70ch;margin:0 auto;padding:2.5rem 0 4rem;font-size:var(--reading-prose);line-height:1.75;overflow-wrap:anywhere}
.guide-page .guide-header .header-actions{flex-wrap:wrap}
.guide-page .guide-header .login-link{min-width:44px;justify-content:center}
.guide-page .guide .button{max-width:100%}
.guide-page .guide h1{font-size:var(--reading-title);font-weight:600;line-height:1.2;letter-spacing:-.025em;margin:0 0 .75rem}
.guide-page .guide .meta{color:var(--muted);margin:0 0 1.6rem;font-size:var(--reading-meta)}
.guide-page .guide .lead{font-size:var(--reading-lead);line-height:1.65;color:var(--ink);margin:0 0 1.4rem}
.guide-page .guide h2{font-size:var(--reading-section);font-weight:600;line-height:1.3;letter-spacing:-.015em;margin:2.5rem 0 .75rem;color:var(--forest);scroll-margin-top:1rem}
.guide-page .guide h3{font-size:var(--reading-subhead);font-weight:600;line-height:1.4;letter-spacing:normal;margin:1.75rem 0 .5rem}
.guide-page .guide p,.guide-page .guide li{line-height:1.75}
.guide-page .guide em{letter-spacing:normal}
/* Restore prose rhythm after the landing page's paragraph reset. */
.guide-page .guide>p:not([class]),.guide-page .article-body :where(p){margin:0 0 1em;color:inherit}
.guide-page .article-body :is(h4,h5,h6){font-size:var(--reading-prose);font-weight:600;line-height:1.5;margin:1.5rem 0 .5rem}
.guide-page .article-body :is(dl,details){margin-block:1rem}
.guide-page .article-body li>p:last-child,.guide-page .article-body blockquote>p:last-child{margin-bottom:0}
.guide-page .article-body :is(ul,ol) :is(ul,ol){margin-block:.35rem}
.guide-page .article-body summary{font-weight:600;line-height:1.5;min-block-size:44px;padding-block:.45rem;cursor:pointer}
.guide-page .article-body details[open]>summary{margin-bottom:.75rem}
.guide-page .guide ul,.guide-page .guide ol{padding-inline-start:1.3rem;margin:.5rem 0}
.guide-page .guide li{margin:.35rem 0}
.guide-page .guide a:not(.button){color:var(--leaf)}
.guide-page .guide table{width:100%;border-collapse:collapse;margin:1.1rem 0;font-size:var(--reading-body)}
.guide-page .guide th,.guide-page .guide td{text-align:start;padding:.6rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
.guide-page .guide th{background:var(--card-alt);font-weight:600;color:var(--forest)}
.guide-page .article-table-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;margin:1.1rem 0}
.guide-page .article-table-scroll table{margin:0;overflow-wrap:normal}
.guide-page .answer{background:var(--mint);border:1px solid var(--line);border-inline-start:4px solid var(--leaf);border-radius:14px;padding:1rem 1.2rem;font-size:var(--reading-prose);line-height:1.75;margin:0 0 1.6rem}
.guide-page .toc{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem;margin:0 0 2rem}
.guide-page .toc strong{display:block;margin-bottom:.4rem;font-size:var(--reading-label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.guide-page .toc ol{margin:0;padding-inline-start:1.1rem}
.guide-page .toc ol ol{margin:.15rem 0 .35rem;padding-inline-start:1rem;font-size:var(--reading-body)}
/* The whole contents row is a target, including nested and wrapped entries. */
.guide-page .toc a{display:block;min-block-size:44px;padding-block:.45rem}
.guide-page .guide .toc ol ol a{color:var(--muted)}
.guide-page .model{border:1px solid var(--line);border-radius:14px;margin:1.1rem 0;overflow:hidden;background:var(--white)}
.guide-page .model__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--card-alt);padding:.55rem .9rem;border-bottom:1px solid var(--line)}
.guide-page .model__head b{font-size:var(--reading-body)}
.guide-page .model__copy{cursor:pointer;border:1px solid var(--leaf);background:var(--white);color:var(--leaf);border-radius:8px;padding:.3rem .75rem;font:inherit;font-size:var(--reading-meta);font-weight:600;white-space:nowrap}
.guide-page .model__copy[data-copied]{background:var(--leaf);color:var(--white)}
.guide-page .model__body{padding:.9rem 1.1rem;white-space:pre-wrap;font-size:var(--reading-prose);line-height:1.6;color:var(--ink)}
.guide-page .model__subject{display:block;font-size:var(--reading-meta);color:var(--muted);margin-bottom:.6rem}
.guide-page .cta{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;background:var(--forest);color:var(--white);border-radius:16px;padding:1.4rem 1.5rem;margin:2.6rem 0}
.guide-page .cta p{margin:0;flex:1 1 17rem;min-width:0;font-size:var(--reading-body);font-weight:450;line-height:1.65;letter-spacing:.005em;color:var(--white)}
.guide-page .cta strong{font-size:var(--reading-prose);color:var(--white)}
.guide-page .download{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;background:var(--mint);border:1px solid var(--line);border-radius:16px;padding:1.3rem 1.5rem;margin:1.6rem 0}
.guide-page .download__text{flex:1 1 15rem}
.guide-page .download__text strong{font-size:var(--reading-prose);color:var(--forest)}
.guide-page .download__text span{display:block;color:var(--muted);font-size:var(--reading-meta);margin-top:.2rem}
.guide-page .guide-card{display:block;border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.3rem;margin:1rem 0;text-decoration:none;color:inherit;transition:border-color .15s}
.guide-page .guide-card:hover{border-color:var(--leaf)}
.guide-page .guide-card h2,.guide-page .guide-card h3{margin:0 0 .5rem;font-size:var(--reading-subhead);font-weight:600;line-height:1.4;letter-spacing:normal;color:var(--forest)}
.guide-page .guide-card p{margin:0;font-size:var(--reading-body);color:var(--ink-2);line-height:1.65}
.guide-page .guide-card .card-meta{display:block;margin-top:.5rem;font-size:var(--reading-meta);color:var(--muted)}
.guide-page .crumbs{margin:0 0 .6rem;font-size:var(--reading-meta)}
.guide-page .crumbs a{color:var(--muted)}
.guide-page :is(.crumbs,.feed-link) a{display:inline-flex;align-items:center;min-inline-size:44px;min-block-size:44px}
.guide-page .preview-banner{background:var(--amber-wash);border:1px solid var(--rule-strong);border-radius:14px;padding:.8rem 1.1rem;margin:0 0 1.4rem;color:var(--amber)}
.guide-page .preview-banner p{margin:0;line-height:1.55;color:inherit}
.guide-page .preview-banner--live{background:var(--mint);border-color:var(--line);color:var(--forest)}
.guide-page .preview-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.8rem}
.guide-page .preview-actions form{margin:0}
.guide-page .preview-actions .button{min-height:44px;padding:7px 14px;font-size:var(--reading-body)}
.guide-page .preview-actions__archive{color:var(--ink-2);border-color:var(--line)}
.guide-page .preview-actions__archive:hover{background:var(--card-alt);color:var(--rust);border-color:var(--rust)}
.guide-page .guide a.preview-actions__admin{display:inline-flex;align-items:center;min-block-size:44px;padding-block:.35rem;margin-inline-start:auto;font-size:var(--reading-meta);color:var(--ink-2);text-decoration:underline}
.guide-page .pending{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem;margin:0 0 2rem;overflow-x:auto}
.guide-page .pending h2{margin:0 0 .3rem;font-size:var(--reading-subhead);letter-spacing:normal}
.guide-page .pending__hint{margin:0;font-size:var(--reading-meta);color:var(--muted);line-height:1.5}
.guide-page .pending table{margin:.8rem 0 0;font-size:var(--reading-body)}
.guide-page .pending th{background:var(--mint)}
.guide-page .pending td:first-child a{display:inline-flex;align-items:center;min-block-size:44px}
@media (max-width:650px){
  .guide-page .site-header.guide-header{height:auto;min-height:84px;flex-wrap:wrap;row-gap:.4rem;padding-block:1rem}
  .guide-page .guide-header .header-actions{width:100%}
  .guide-page .guide-header .header-actions>.login-link{display:inline-flex}
  .guide-page .guide-header .button{margin-inline-start:auto}
  .guide-page .guide a.preview-actions__admin{margin-inline-start:0;flex-basis:100%}
  /* The queue as stacked rows: four columns do not fit a phone. */
  .guide-page .pending thead{display:none}
  .guide-page .pending tr{display:flex;flex-wrap:wrap;gap:.15rem .8rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
  .guide-page .pending td{padding:0;border:0}
  .guide-page .pending td:first-child{flex-basis:100%}
  .guide-page .pending td:not(:first-child){font-size:var(--reading-meta);color:var(--muted)}
}
.guide-page .empty{color:var(--ink-2);line-height:1.6}
.guide-page .feed-link{margin-top:2.4rem;font-size:var(--reading-meta);color:var(--muted)}
.guide-page .pagination{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin:2rem 0 0;font-size:var(--reading-meta)}
.guide-page .pagination a{display:inline-flex;align-items:center;min-height:44px}
.guide-page .pagination__where{color:var(--muted)}
.guide-page .guide :is(time,.meta,.card-meta,.pagination__where,td){font-variant-numeric:tabular-nums}
@media (max-width:400px){.guide-page .pagination__where{order:-1;flex-basis:100%;text-align:center}}
.guide-page .article-body img{max-width:100%;height:auto;border-radius:14px}
.guide-page .article-body figure{margin:1.8rem 0}
.guide-page .article-body figure img{display:block;width:100%;border-radius:16px}
.guide-page .article-body figcaption{margin-top:.55rem;font-size:var(--reading-meta);line-height:1.5;color:var(--muted)}
.guide-page .article-body blockquote{margin:1.2rem 0;padding:.2rem 1.1rem;border-inline-start:4px solid var(--line);color:var(--ink-2)}
.guide-page .article-body pre{background:var(--card-alt);border:1px solid var(--line);border-radius:14px;padding:.9rem 1.1rem;overflow:auto;font-size:var(--reading-body)}
.guide-page .article-body code{background:var(--card-alt);border-radius:6px;padding:.1rem .3rem;font-size:.9375em}
.guide-page .article-body pre code{background:none;padding:0}

/* Keep inline destinations identifiable without relying on color perception. */
.guide-page .guide a[href]:not(.button):not(.guide-card) {
  text-decoration:underline;
  text-decoration-thickness:from-font;
  text-underline-offset:.18em;
}
.guide-page .answer { color:var(--ink-2); }
.guide-page .guide .cta a:not(.button) { color:var(--white); }
.guide-page .cta :focus-visible { outline-color:var(--lime); }