/* dfpm visual system: high-contrast editorial UI with restrained retro detail. */
:root {
  --white: #ffffff;
  --canvas: #ffffff;
  --panel: #ffffff;
  --sidebar: #e5e5e5;
  --text: #000000;
  --muted: #5f6672;
  --border: #d1d4d8;
  --border-dark: #000000;
  --accent: #fca311;
  --accent-dark: #d78500;
  --accent-soft: #fff1d6;
  --yellow: #fca311;
  --green: #287a52;
  --blue: #14213d;
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

body { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; color: var(--text); font-size:16px; line-height:1.6; }
.app-shell { grid-template-columns: 244px minmax(0, 1fr); }
.sidebar { border-right-color: var(--text); }
.wordmark { border-bottom-color: var(--text); }
.logo-mark { background: var(--accent); color: #000; border: 2px solid #000; border-radius: 0; box-shadow: 3px 3px 0 var(--blue); font: 800 17px var(--mono); }
.wordmark b { font-size: 18px; letter-spacing: -.02em; }
.wordmark small { font: 10px var(--mono); }
.tiny-computer i { background:#e5e5e5; }
.nav-heading, .kicker, .kit-card > span { font-family: var(--mono); }
/* The base sheet hard-codes a mid-grey here, which is unreadable on the dark
   sidebar. Driving it from tokens instead keeps both themes legible. */
.nav-link { border-radius: 0; color: var(--muted); }
.nav-link > span { color: var(--muted); }
.nav-link:hover { background: #d9d9d9; color: var(--text); }
.nav-link:hover > span { color: var(--text); }
.nav-link.active { border-color: var(--text); box-shadow: 3px 3px 0 var(--accent); color: var(--text); }
.nav-heading { color: var(--muted); }
.local-card { border-color: var(--text); border-radius: 0; box-shadow: 3px 3px 0 var(--blue); }
.pixel-button { border-color: var(--text); border-radius: 0; font: 600 12px Arial,"Helvetica Neue",sans-serif; text-transform: none; letter-spacing: 0; }
.pixel-button.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.pixel-button.primary:hover { background: #0b1428; }
.page { padding: 58px 52px 80px; }
.intro-grid h1, .page-title h1 { font-family:Georgia,"Times New Roman",serif; font-size:clamp(40px,5vw,64px); line-height:1.02; letter-spacing:-.035em; font-weight:500; }
.browse-head h2,.kit-card h2,.learn-grid h2,.drawer-hero h2,.modal h2 { font-family:Georgia,"Times New Roman",serif; font-weight:500; }
.lead,.page-title>p,.page-title>div>p { font-size:18px; line-height:1.65; }
.kicker { color:var(--blue); font-size:11px; letter-spacing:.04em; text-transform:none; }
.how-card { position: relative; border-color: var(--text); border-radius: 0; box-shadow: 5px 5px 0 var(--accent); }
.how-card::after { content: ""; position: absolute; width: 10px; height: 10px; right: -1px; top: -1px; background: var(--blue); border-left: 1px solid var(--text); border-bottom: 1px solid var(--text); }
.step-no { font-family: var(--mono); border-radius: 0; color: #000; }
.search-box { border: 1px solid var(--text); border-radius: 0; box-shadow: 4px 4px 0 var(--accent); }
.search-box kbd { font-family: var(--mono); border-color: var(--text); border-radius: 0; background: var(--accent); color: #000; }
.quick-searches span { font-family: var(--mono); }
.filter-bar { border-bottom-color: var(--text); }
.filter-bar button.active { border-color: var(--blue); background: #edf0f5; color: var(--blue); }
.tool-card { position: relative; border-radius: 0; box-shadow: none; padding: 18px; }
.tool-card::before { content: ""; position: absolute; width: 5px; height: 5px; right: 8px; top: 8px; background: var(--accent); }
.tool-card:hover { transform: translate(-2px, -2px); border-color: var(--text); box-shadow: 5px 5px 0 var(--accent); }
.tool-badge { border-color: var(--text); border-radius: 0; font-family: var(--mono); }
.tool-badge.gold { background:#fca311; }
.tool-badge.silver { background:#e5e5e5; }
.tool-badge.navy { background:#d9e0ec; }
.tags span { border-radius: 0; font-family: var(--mono); }
/* A discipline says which part of the field a tool belongs to, which is what
   somebody browsing without a tool in mind is reading for. It leads the row. */
.tags span.accent { background: var(--accent-soft); border-color: #d1a24c; color: var(--accent-dark); }

/* One search box, the same on both surfaces. */
.list-search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border-dark); background: var(--white); padding: 0 13px; height: 44px; margin-top: 24px; }
.list-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.list-search > span { font-family: var(--mono); font-size: 19px; color: var(--muted); }
.list-search input { flex: 1; border: 0; background: none; outline: 0; color: var(--text); font: 14px inherit; }
.list-search input::-webkit-search-cancel-button { cursor: pointer; }

/* Copying a command. Inside a code block the button floats over it; standing
   on its own it sits in the flow beside what it copies. */
.copy-button { border: 1px solid var(--border-dark); background: var(--white); color: var(--text); font: 600 10px var(--mono); padding: 0 13px; cursor: pointer; }
.copy-button:hover { border-color: var(--accent); background: var(--accent-soft); }
pre { position: relative; }
pre .copy-button { position: absolute; top: 8px; right: 8px; padding: 5px 10px; border-color: #55607a; background: #2e364a; color: #e8ecf5; }
pre .copy-button:hover { background: #3c465e; border-color: #7d8aa6; }

/* The invocation is the thing an installed tool is most often opened to find,
   so it is set as a command rather than described in a sentence. Styled
   outright instead of inheriting from pre and code, whose defaults are meant
   for documentation blocks and fight each other at this size. */
.run-row { display: flex; align-items: stretch; gap: 8px; margin-top: 14px; }
.run-command { flex: 1; min-width: 0; margin: 0; white-space: pre; overflow-x: auto; background: #202631; color: #f5f7fa; padding: 10px 13px; font: 12px/1.65 var(--mono); }
.install-facts { font-size: 11px; color: var(--muted); margin: 10px 0 0; overflow-wrap: anywhere; }

/* Both surfaces say "there is nothing here" the same way, so the rule is
   shared rather than belonging to either one. */
.empty-state { border: 1px dashed var(--text); padding: 36px; text-align: center; color: var(--muted); font-size: 14px; }
.filter-bar button[disabled] { opacity: .45; cursor: default; }
.filter-bar button[disabled]:hover { background: transparent; }

/* Everything a catalog entry knows, laid out as labelled rows rather than
   more chips. Nine capabilities and artefacts in a chip row reads as noise;
   under a heading that says what the list is, it reads as an answer. */
.meta-rows { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 12px 0 0; font-size: 12px; }
/* The list layout puts a card's prose in its second column, and these rows are
   prose about the same package, so they line up with it rather than under the
   badge. */
.tool-grid.list .meta-rows { grid-column: 2; }
.meta-rows dt { font-size: 9px; font-weight: 800; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; padding-top: 2px; }
/* var(--muted) rather than a fixed grey, because the same value has to stay
   readable on the dark canvas as well as the light one. */
.meta-rows dd { margin: 0; color: var(--muted); line-height: 1.5; }
@media (max-width: 700px) { .meta-rows { grid-template-columns: 1fr; gap: 2px } .meta-rows dd { margin-bottom: 8px } }
.kit-card { border-color: var(--text); border-radius: 0; box-shadow: 4px 4px 0 var(--accent); }
.kit-card:nth-child(2) { box-shadow: 4px 4px 0 var(--blue); }
.kit-card:nth-child(3) { box-shadow: 4px 4px 0 #9ba5b8; }
.learn-grid article { border-color:var(--text); border-radius:0; box-shadow:3px 3px 0 var(--accent); }
.learn-grid article>span { color:var(--blue); }
.location-card { border-color: var(--text); border-radius: 0; box-shadow: 4px 4px 0 var(--accent); }
.system-note { border-color:#c9a24a; background:#fff8e8; }
.system-note p { color:#5d5137; }

.theme-button { display:flex; align-items:center; gap:8px; width:auto; margin:15px 7px 10px; padding:6px 0; border:0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:transparent; color:var(--muted); text-align:left; cursor:pointer; }
.theme-button:hover { color:var(--text); }
.theme-button > span:first-child { display:grid; place-items:center; width:21px; height:21px; flex:0 0 21px; background:transparent; border:1px solid var(--border); color:var(--text); font-size:11px; }
.theme-button > span:last-child { display:grid; }
.theme-button b { font-size:11px; }
.theme-button small { font:9px var(--mono); color:var(--muted); }

html[data-appearance="dark"] {
  --white: #181818;
  --canvas: #0d0d0d;
  --panel: #181818;
  --sidebar: #121212;
  --text: #f4f2ed;
  --muted: #b6b2aa;
  --border: #343434;
  --border-dark: #ffffff;
  --accent-soft: #34280f;
  --green: #74c79e;
  --blue: #fca311;
}
html[data-appearance="dark"] main { background:var(--canvas); }
html[data-appearance="dark"] .logo-mark, html[data-appearance="dark"] .step-no, html[data-appearance="dark"] .search-box kbd { color:#000; }
html[data-appearance="dark"] .nav-link:hover { background:#202020; }
html[data-appearance="dark"] .nav-link.active { background:#1d1d1d; }
html[data-appearance="dark"] .search-box input { color:var(--text); }
html[data-appearance="dark"] .filter-bar button.active { background:#2a2418; color:#fff; border-color:var(--accent); }
html[data-appearance="dark"] .tags span, html[data-appearance="dark"] code, html[data-appearance="dark"] .table-head { background:#242424; color:var(--text); }
html[data-appearance="dark"] .tags span.accent { background:#2a2418; border-color:var(--accent); color:#ffc45d; }
html[data-appearance="dark"] .tool-card footer button, html[data-appearance="dark"] .learn-grid button, html[data-appearance="dark"] .quick-searches button { color:#ffc45d; }
html[data-appearance="dark"] .local-banner { background:#3c2d13; color:#fff4d7; border-color:#8c681f; }
html[data-appearance="dark"] .local-banner p { color:#e1d2ac; }
html[data-appearance="dark"] .pixel-button.primary { background:var(--accent); border-color:var(--accent); color:#000; }
html[data-appearance="dark"] .theme-button > span:first-child { background:transparent; color:var(--accent); }
html[data-appearance="dark"] .system-note { background:#251f14; border-color:#6e5726; }
html[data-appearance="dark"] .system-note p { color:#c8baa0; }

@media (max-width: 760px) {
  .app-shell { display:block; }
  .page { padding:38px 18px 60px; }
  .theme-button { display:none; }
}