/* builtbycolton.com/models: the AI model selection and token cheat sheet.
   The look is Colton's Model Selection Field Guide (colton.land/models, 2026-07): a paper sheet, Georgia and
   Courier, model cards with a cost gauge and an effort gauge, the effort dial, the escalation flow, trap boxes.
   Here the sheet sits on the site's blueprint ground. Field guide colours kept; the three that failed the
   LEGIBILITY LAW as text were given text-safe siblings (tag, signal, cost), measured in a11y-check.py.
   Nothing under 12px. VERSION 1.0.0 (2026-10-06). */
:root{
  --m-paper:#EFEDE5;
  --m-card:#F7F6F1;
  --m-ink:#1B1E1C;
  --m-ink-soft:#42463F;
  --m-rule:#C7C2B4;
  --m-edge:#8A8475;
  --m-tag:#5F5642;
  --m-signal:#A8431A;
  --m-signal-fill:#C4501F;
  --m-dial:#2C5F5A;
  --m-dial-soft:#DCE7E4;
  --m-cost:#7A5512;
  --m-cost-fill:#A9781E;
  --m-serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --m-mono:"Courier New",Courier,ui-monospace,monospace;
}
.sheet-wrap{padding:clamp(20px,4vw,48px) var(--gutter) 0}
.sheet{max-width:1080px;margin:0 auto;background:var(--m-paper);color:var(--m-ink);font-family:var(--m-serif);
  padding:clamp(24px,5vw,64px) clamp(18px,5vw,68px) clamp(28px,4vw,52px);box-shadow:0 10px 40px rgba(0,0,0,.35);border-radius:2px}
.sheet a{color:var(--m-dial);text-decoration:underline;text-underline-offset:3px}
.sheet a:hover{color:var(--m-signal)}
.sheet :focus-visible{outline:3px solid var(--m-signal);outline-offset:2px}
.sheet .m-eyebrow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;font-family:var(--m-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--m-tag);margin:0 0 10px}
.sheet h1{font-family:var(--m-serif);font-size:clamp(32px,5vw,48px);font-weight:700;letter-spacing:-.01em;line-height:1.06;margin:0 0 10px;color:var(--m-ink)}
.sheet h2{font-family:var(--m-mono);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--m-tag);
  margin:40px 0 14px;padding-bottom:7px;border-bottom:1px solid var(--m-rule);line-height:1.4}
.sheet h3{font-family:var(--m-mono);font-size:16px;font-weight:700;letter-spacing:.02em;margin:0;color:var(--m-ink)}
.sheet p{margin:0 0 12px;font-size:17px;line-height:1.6;max-width:70ch}
.sheet .m-sub{font-family:var(--m-mono);font-size:14px;color:var(--m-ink-soft);line-height:1.6;margin:0 0 20px;max-width:none}
.sheet .m-headrule{height:2px;background:var(--m-ink);margin:0 0 8px}
.sheet .m-note{font-size:15px;color:var(--m-ink-soft)}
.sheet ul.m-list{margin:0 0 12px;padding-left:20px;font-size:16px;line-height:1.6}
.sheet ul.m-list li{margin-bottom:6px}
.sheet code{font-family:var(--m-mono);font-size:15px;background:var(--m-card);border:1px solid var(--m-rule);padding:0 4px}

/* The one-minute version and the effort dial: soft teal cells */
.m-cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.m-cells.five{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:900px){.m-cells,.m-cells.five{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.m-cells,.m-cells.five{grid-template-columns:1fr}}
.m-cell{background:var(--m-dial-soft);padding:14px 15px 15px;border-radius:2px}
.m-cell b{display:block;font-family:var(--m-mono);font-size:14px;margin-bottom:6px;color:var(--m-ink)}
.m-cell span{display:block;font-size:15px;line-height:1.5;color:var(--m-ink)}
.m-bars{display:flex;gap:3px;align-items:flex-end;height:18px;margin-bottom:9px}
.m-bars i{flex:1;background:var(--m-edge);border-radius:1px}
.m-bars i.on{background:var(--m-dial)}

/* Model cards */
.m-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.m-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.m-grid,.m-grid.three{grid-template-columns:1fr}}
.m-card{background:var(--m-card);border:1px solid var(--m-rule);border-left:5px solid var(--m-dial);padding:16px 18px 18px;min-width:0}
.m-card.top{border-left-color:var(--m-signal-fill)}
.m-card.cost{border-left-color:var(--m-cost-fill)}
.m-card-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.m-tier{font-family:var(--m-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--m-tag)}
.m-card.top .m-tier{color:var(--m-signal)}
.m-desc{font-size:16px;font-style:italic;color:var(--m-ink-soft);margin:4px 0 12px;line-height:1.5}
.m-gauge{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:8px;margin:0 0 8px}
.m-gauge .k{font-family:var(--m-mono);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--m-tag)}
.m-gauge .segs{display:flex;gap:2px;height:8px}
.m-gauge .segs i{flex:1;background:var(--m-rule);border-radius:1px}
.m-gauge.cost .segs i.on{background:var(--m-cost-fill)}
.m-gauge.effort .segs i.on{background:var(--m-dial)}
.m-card.top .m-gauge .segs i.on{background:var(--m-signal-fill)}
.m-gauge .v{font-family:var(--m-mono);font-size:12px;font-weight:700;color:var(--m-cost);white-space:nowrap}
.m-gauge.effort .v{color:var(--m-dial)}
.m-card.top .m-gauge .v{color:var(--m-signal)}
.m-legend{display:flex;justify-content:space-between;font-family:var(--m-mono);font-size:12px;color:var(--m-tag);margin:-2px 0 12px 70px}
.m-facts{display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--m-mono);font-size:13px;color:var(--m-ink);margin:0 0 10px}
.m-uses{list-style:none;margin:0;padding:0}
.m-uses li{font-family:var(--m-mono);font-size:14px;line-height:1.6;margin-bottom:6px;padding-left:16px;position:relative}
.m-uses li::before{content:"\203A";position:absolute;left:0;color:var(--m-dial);font-weight:700}
.m-card.top .m-uses li::before{color:var(--m-signal)}
.m-card.cost .m-uses li::before{color:var(--m-cost)}
.m-more{margin-top:12px;border-top:1px dashed var(--m-rule);padding-top:4px}
.m-more summary{font-family:var(--m-mono);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--m-dial);cursor:pointer;list-style:none;min-height:44px;display:flex;align-items:center}
.m-more summary::-webkit-details-marker{display:none}
.m-more summary::before{content:"\25B8\00a0"}
.m-more[open] summary::before{content:"\25BE\00a0"}
.m-more p{font-size:15px;margin:2px 0 6px}

/* Two-column lists: bump up / bump down, too small / too big */
.m-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:760px){.m-cols{grid-template-columns:1fr}}
.m-col{background:var(--m-card);border:1px solid var(--m-rule);border-top:5px solid var(--m-dial);padding:16px 18px;min-width:0}
.m-col.down{border-top-color:var(--m-cost-fill)}
.m-col.warn{border-top-color:var(--m-signal-fill)}
.m-col h3{margin-bottom:10px}
.m-col ul{margin:0;padding-left:18px;font-size:16px;line-height:1.55}
.m-col li{margin-bottom:7px}
.m-col .fix{font-family:var(--m-mono);font-size:14px;margin:10px 0 0;color:var(--m-ink)}

/* Escalation flow */
.m-flow{display:flex;align-items:center;gap:10px;background:var(--m-card);border:1px solid var(--m-rule);padding:16px 18px}
.m-flow .s{font-family:var(--m-mono);font-size:14px;text-align:center;flex:1;line-height:1.45}
.m-flow .s b{display:block;font-size:15px;margin-bottom:4px}
.m-flow .a{color:var(--m-signal);font-size:20px;font-weight:700}
@media (max-width:760px){.m-flow{flex-direction:column;align-items:stretch}.m-flow .a{transform:rotate(90deg);align-self:center}}

/* Trap and note boxes, the black prompt callout */
.m-trap{background:var(--m-dial-soft);border-left:4px solid var(--m-signal-fill);padding:14px 16px;margin:18px 0 0;font-size:16px;line-height:1.6;color:var(--m-ink)}
.m-trap .tag,.m-nest .tag{display:block;font-family:var(--m-mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--m-signal);margin-bottom:6px}
.m-nest{background:var(--m-dial-soft);border-left:4px solid var(--m-dial);padding:14px 16px;margin:0 0 18px;font-size:16px;line-height:1.6;color:var(--m-ink)}
.m-nest .tag{color:var(--m-dial)}
.m-callout{background:var(--m-ink);color:var(--m-paper);padding:14px 16px;font-family:var(--m-mono);font-size:15px;line-height:1.6;margin:18px 0 0}
.m-callout .tag{display:block;color:#E8C9A8;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}

/* Tables (plans, effort) */
.m-table{overflow-x:auto;border:1px solid var(--m-rule);background:var(--m-card)}
.m-table table{border-collapse:collapse;width:100%;min-width:620px;font-size:15px}
.m-table th,.m-table td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--m-rule);line-height:1.5}
.m-table th{font-family:var(--m-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--m-tag)}
.m-table td:first-child{font-family:var(--m-mono);font-weight:700;white-space:nowrap}

/* App picker */
.m-apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:860px){.m-apps{grid-template-columns:1fr}}
.m-app{background:var(--m-card);border:1px solid var(--m-rule);border-top:5px solid var(--m-dial);padding:16px;min-width:0}
.m-app.alt{border-top-color:var(--m-cost-fill)}
.m-app.alt2{border-top-color:var(--m-signal-fill)}
.m-app h3{margin-bottom:6px}

/* Sources and the sheet's own foot */
.m-sources{font-size:15px;line-height:1.6}
.m-sources li{margin-bottom:4px}
.m-foot{margin-top:28px;padding-top:12px;border-top:1px solid var(--m-rule);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;font-family:var(--m-mono);font-size:12px;color:var(--m-tag);letter-spacing:.04em}
.m-subnav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.m-subnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--m-edge);border-radius:3px;font-family:var(--m-mono);font-size:14px;text-decoration:none;color:var(--m-ink)}
.m-subnav a[aria-current="page"]{background:var(--m-ink);color:var(--m-paper);border-color:var(--m-ink)}
.m-subnav a:hover{border-color:var(--m-signal);color:var(--m-signal)}
.m-subnav a[aria-current="page"]:hover{color:var(--m-paper)}

@media print{
  body{background:#fff}
  .top,.foot,.topstamp{display:none}
  .sheet-wrap{padding:0}
  .sheet{box-shadow:none;background:#fff;padding:0}
  .m-card,.m-col,.m-app,.m-flow,.m-table{background:#fff}
}

/* The companion guide (/models/claude-md/), ported from the token cheat sheet's markup */
.sheet.guide .wrap{max-width:none;margin:0;padding:0}
.sheet.guide .hero{padding:0}
.sheet.guide .lede{font-size:18px;line-height:1.6;color:var(--m-ink-soft);max-width:70ch}
.sheet.guide .tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:900px){.sheet.guide .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.sheet.guide .tiles{grid-template-columns:1fr}}
.sheet.guide .tile{background:var(--m-dial-soft);padding:14px 15px;border-radius:2px}
.sheet.guide .tile b{display:block;font-family:var(--m-mono);font-size:14px;margin-bottom:6px}
.sheet.guide .tile span{display:block;font-size:15px;line-height:1.5}
.sheet.guide .label{font-family:var(--m-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--m-tag);margin:14px 0 6px}
.sheet.guide ol,.sheet.guide ul{font-size:16px;line-height:1.6;padding-left:22px;max-width:72ch}
.sheet.guide li{margin-bottom:6px}
.sheet.guide pre{background:var(--m-ink);color:var(--m-paper);font-family:var(--m-mono);font-size:14px;line-height:1.55;padding:14px 16px;overflow-x:auto;white-space:pre-wrap;margin:0 0 12px}
.sheet.guide pre code{background:none;border:0;padding:0;font-size:14px;color:inherit}
.sheet.guide .table-wrap{overflow-x:auto;border:1px solid var(--m-rule);background:var(--m-card);margin:0 0 12px}
.sheet.guide table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
.sheet.guide th,.sheet.guide td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--m-rule);line-height:1.5}
.sheet.guide th{font-family:var(--m-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--m-tag)}
.sheet.guide .copy-row{margin:0 0 12px}
.sheet.guide .btn{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--m-ink);color:var(--m-paper);border:0;border-radius:3px;font-family:var(--m-mono);font-size:14px;font-weight:700;cursor:pointer}
.sheet.guide .btn:hover{background:var(--m-signal)}
.sheet.guide .sources{font-size:15px}