@import url("./site.v2.css");

:root {
  --ink: #1b211b;
  --muted: #50574b;
  --paper: #f4f3eb;
  --white: #fbfbf6;
  --line: #c8ccbd;
  --purple: #31503a;
  --purple-dark: #203c28;
  --tint: #e7eadc;
  --acid: #d8ed9b;
  --rule: #292f26;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
body { background: var(--paper); }
.shell { width: min(1320px, calc(100% - 64px)); }
.site-header { border-bottom: 1px solid var(--rule); background: var(--paper); }
.header-inner { min-height: 60px; }
.brand { gap: 9px; font-size: 1.36rem; letter-spacing: -.06em; font-weight: 825; }
.brand img { width: 30px; height: 30px; }
.header-inner nav { gap: 6px 22px; }
.header-inner nav a { color: var(--ink); font-weight: 650; font-size: .84rem; }
.hero { padding: 36px 0 26px; }
.home-hero { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.eyebrow { font: 650 .7rem/1.4 var(--mono); letter-spacing: .13em; margin: 0 0 9px; }
.eyebrow::before { display: none; }
h1 { font-family: var(--serif); font-weight: 550; font-size: clamp(2.55rem, 5vw, 5rem); line-height: .98; letter-spacing: -.058em; }
h1 span { color: inherit; }
.lede { margin-top: 12px; max-width: 58ch; font-size: clamp(.96rem, 1.6vw, 1.12rem); }
.session-note { align-self: end; flex: 0 0 auto; border-left: 1px solid var(--rule); padding: 3px 0 3px 14px; margin: 0 0 3px; font: .71rem/1.6 var(--mono); letter-spacing: .035em; color: var(--muted); }
.session-note strong { color: var(--ink); display: block; font-weight: 700; }
.editor { display: grid; grid-template-columns: minmax(174px, 205px) minmax(0, 1fr); border: 1px solid var(--rule); border-radius: 0; box-shadow: 3px 3px 0 #d0d4c6; }
.editor:not(:has(.tool-shelf)) { display: block; }
.tool-shelf { padding: 0 10px 12px; background: #eeefe5; border-right: 1px solid var(--rule); }
.shelf-heading { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin: 0 -10px; padding: 11px 12px; color: var(--white); background: var(--ink); font: 650 .7rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.shelf-heading span { color: var(--acid); }
.tool-group { margin: 12px 0 0; }
.tool-group p { margin: 0 4px 3px; color: var(--muted); font: 650 .65rem/1.35 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.tool-group button { border: 1px solid transparent; background: transparent; display: block; width: 100%; min-height: 32px; color: var(--ink); padding: 4px 7px; text-align: left; font-size: .83rem; line-height: 1.26; }
.tool-group button:hover { background: #dde2d2; }
.tool-group button[aria-pressed="true"] { background: var(--acid); border-color: var(--rule); box-shadow: inset 3px 0 var(--rule); font-weight: 730; }
.bench-content { min-width: 0; }
.editor-toolbar { gap: 10px; padding: 11px 14px; background: var(--ink); color: var(--white); }
.bench-heading { flex: 1 1 220px; min-width: 0; }
.bench-heading h2 { font-size: 1.05rem; letter-spacing: -.01em; margin: 0; }
.bench-heading p { font-size: .76rem; color: #d4dccb; margin: 4px 0 0; line-height: 1.4; }
.toolbar-more { gap: 6px; }
.editor-toolbar .text-button { color: var(--white); background: transparent; border: 1px solid #8e9b87; min-height: 36px; }
.editor-toolbar .text-button:hover:not(:disabled) { background: var(--acid); color: var(--ink); }
.mobile-tools { display: none; min-width: 0; }
.toolbar-more select { background: var(--acid); color: var(--ink); }
.text-button, .button, .toolbar-more select, .tool-controls select, .tool-controls input[type="text"] { border-radius: 2px; }
.tool-controls select, .tool-controls input[type="text"] { border-color: #a8ae9f; }
.tool-settings { background: #eef0e7; border-color: var(--line); }
.tool-settings fieldset { min-width: 0; }
.tool-controls .select-label { min-width: 0; max-width: 100%; }
.tool-controls .select-label select { min-width: 0; }
.tool-controls .select-label input { width: min(155px, 40vw); }
.settings-note { margin: 0; font: .8rem/1.5 var(--mono); color: var(--muted); }
.editor-panes { border-color: var(--line); }
.pane { background: #fcfcf7; }
.pane-output { background: #eef1e5; }
.pane-header { border-bottom: 1px solid var(--line); padding-inline: 13px; background: #e7eadd; }
.pane-header label { display: inline-flex; align-items: center; gap: 8px; font-weight: 760; }
.pane-index { font: .7rem var(--mono); color: var(--muted); }
.pane textarea { border-radius: 0; margin: 0; width: 100%; padding: 13px; min-height: 240px; font: 1rem/1.65 var(--mono); background: transparent; }
.pane textarea:focus-visible { outline-offset: -4px; }
.pane textarea.drop-ready { background: var(--acid); outline: 2px dashed var(--ink); outline-offset: -5px; }
.pane textarea::placeholder { color: #616859; }
.pane-footer { border-top: 1px solid var(--line); padding: 8px 13px; font: .72rem/1.45 var(--mono); }
.live-label { font: .7rem var(--mono); color: var(--muted); }
.live-label span { border-radius: 0; background: #456740; }
.editor-actions { background: var(--white); border-color: var(--line); }
.button.primary { background: var(--acid); color: var(--ink); border-color: var(--rule); }
.button.primary:hover:not(:disabled) { background: #c1df73; color: var(--ink); }
.button.secondary { border-color: #a8ae9f; color: var(--ink); }
.button:disabled, .button.primary:disabled { background: #edf0e7; border-color: var(--line); color: #5c6557; }
:focus-visible { outline-color: #406b34; }
.editor-toolbar :focus-visible { outline-color: var(--acid); }
.review, .diff-result { border-top: 1px solid var(--line); background: #eef1e5; }
.review [data-inspect-items] li { padding-block: 5px; }
.review code { font: .82em var(--mono); padding: 2px 4px; background: #dfe4d6; }
.diff-result { padding: 12px 14px; }
.diff-result h3 { font-size: .9rem; margin: 0 0 7px; }
.diff-result pre { font: .88rem/1.5 var(--mono); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; max-height: 290px; margin: 0; background: var(--white); border: 1px solid var(--line); padding: 8px; }
.diff-result pre span { display: block; padding: 1px 5px; }
.diff-added { background: #dfeecb; color: #20371a; }
.diff-removed { background: #f6e4df; color: #622c22; }
.issue { border-left: 3px solid #91583b; padding: 4px 10px; margin: 4px 14px 10px; color: #653e2b; font-size: .8rem; }
.privacy-note { font-size: .82rem; margin: 13px 0 0; }
.privacy-note svg { color: var(--purple-dark); }
.content { padding: 30px 0 46px; }
.content h2 { font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 550; }
.content h3 { letter-spacing: -.025em; }
.content .group-title { margin-top: 25px !important; padding-bottom: 6px; font: 650 .73rem/1.45 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.tool-index { margin: 0 0 28px; border-top: 1px solid var(--rule); }
.tool-index li { display: grid; grid-template-columns: minmax(210px, .65fr) 1fr; gap: 6px 16px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.tool-index a { font-weight: 720; text-decoration: none; }
.tool-index a:hover { text-decoration: underline; }
.tool-index span { color: var(--muted); font-size: .92rem; }
.tool-index { padding: 0; list-style: none; }
.examples pre, .metrics div { border: 1px solid var(--line); border-radius: 0; background: #eef1e5; }
.site-footer { border-color: var(--rule); }
@media (max-width: 1060px) {
  .shell { width: calc(100% - 42px); }
  .editor { grid-template-columns: minmax(155px, 172px) minmax(0, 1fr); }
}
@media (max-width: 850px) {
  .editor { grid-template-columns: minmax(0, 1fr); }
  .tool-shelf { display: none; }
  .mobile-tools { display: block; }
  .toolbar-more select { min-height: 44px; font-size: 1rem; }
  .editor-toolbar .text-button { min-height: 44px; }
}
@media (max-width: 620px) {
  .shell { width: calc(100% - 26px); }
  .hero { padding: 21px 0 17px; }
  .header-inner { min-height: 51px; }
  .session-note { display: none; }
  h1 { font-size: clamp(2.3rem, 9vw, 3.45rem); }
  .editor-toolbar, .editor-actions, .tool-settings { padding-inline: 9px; }
  .pane textarea { min-height: 127px; padding: 10px; }
  .tool-index li { display: block; }
  .tool-index span { display: block; margin-top: 2px; }
  .output-actions .button { flex: 1 1 auto; }
}
@media (max-width: 390px) {
  .toolbar-more { width: 100%; }
  .mobile-tools { width: 100%; }
  .toolbar-more select { width: 100%; }
  .header-inner nav { gap: 0 16px; }
}