/* OBSCURA OS - the reference pages: /sheets-functions, /shortcuts,
   /formats, /glossary and /templates. The prose and the tables are the
   guides' own (.gd, .gd-sum in theme.css); this is only what a long list
   needs besides: the box that narrows it, the letters across the top of
   the glossary, and the template cards. Every size, corner and colour is
   one of theme.css's tokens. */

.ref-find { display: grid; gap: var(--space-1); margin: 0 0 var(--space-5); max-width: 460px; }
.ref-find[hidden] { display: none; }
.ref-find-label { font-size: var(--text-xs); font-weight: 600; color: var(--ink-soft); }
.ref-find-input { font: var(--text-md) var(--font-ui); padding: var(--space-2) var(--space-3); border: 1px solid var(--rule-strong, var(--rule)); border-radius: var(--radius-md); background: var(--paper-raised, var(--paper)); color: var(--ink); }
.ref-find-input:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 1px; }
.ref-find-count { margin: 0; min-height: 1.4em; font-size: var(--text-xs); color: var(--ink-soft); }

.ref-section { margin: 0 0 var(--space-6); }
.ref-section[hidden] { display: none; }
.ref-section > h2 { scroll-margin-top: var(--space-8); }
/* A section's heading is a link to the application it lists (/shortcuts),
   and alone on its line it is a control, not a link in a sentence: it
   takes the 44px a finger needs. */
.ref-section > h2 > a { display: inline-flex; align-items: center; box-sizing: border-box; min-height: 44px; min-width: 44px; vertical-align: middle; }
.gd-sum tr[hidden] { display: none; }
.gd-sum kbd, .gd kbd { font: var(--text-2xs)/1.5 var(--font-mono); padding: 0 var(--space-1); border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--paper-inset); color: var(--ink); white-space: nowrap; }
.gd-sum [id] { scroll-margin-top: var(--space-8); }
.ref-note { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--ink-soft); }
.ref-sig { font: var(--text-xs)/1.5 var(--font-mono); overflow-wrap: anywhere; }

/* The glossary: the letters, then a definition list per letter. */
.ref-az { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.ref-az a { display: inline-block; min-width: 2em; padding: var(--space-1) var(--space-2); text-align: center; font: 600 var(--text-sm) var(--font-mono); color: var(--accent-strong); text-decoration: none; border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.ref-az a:hover, .ref-az a:focus-visible { border-color: var(--accent-strong); }
.ref-terms { margin: 0; }
.ref-term { padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); scroll-margin-top: var(--space-8); }
.ref-term[hidden] { display: none; }
.ref-term dt { font: 600 var(--text-md) var(--font-ui); margin: 0 0 var(--space-1); }
.ref-term dt small { font-weight: 400; font-size: var(--text-xs); color: var(--ink-soft); }
.ref-term dd { margin: 0; font-size: var(--text-sm); line-height: var(--leading-prose); }
.ref-term dd + dd { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--ink-soft); }

/* The templates: a card each, with a small drawing of what opens. */
.ref-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.ref-tpl { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; padding: var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-raised, var(--paper)); color: var(--ink); text-decoration: none; }
.ref-tpl:hover, .ref-tpl:focus-visible { border-color: var(--accent-strong); }
.ref-tpl-name { font: 600 var(--text-md) var(--font-ui); }
.ref-tpl-sub { font-size: var(--text-xs); line-height: var(--leading-ui); color: var(--ink-soft); }
.ref-tpl-open { margin-top: auto; font-size: var(--text-xs); font-weight: 600; color: var(--accent-strong); }
.ref-thumb { height: 150px; overflow: hidden; padding: var(--space-2) var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-inset); font-size: var(--text-2xs); line-height: 1.35; color: var(--ink-soft); }
.ref-thumb-title { display: block; margin-bottom: var(--space-1); font: 600 var(--text-xs) var(--font-display); color: var(--ink); }
.ref-thumb-h { display: block; margin-top: var(--space-1); font-weight: 600; color: var(--ink); }
.ref-thumb table { width: 100%; border-collapse: collapse; font: var(--text-2xs)/1.3 var(--font-mono); }
.ref-thumb td { padding: 1px var(--space-1); border: 1px solid var(--rule); white-space: nowrap; overflow: hidden; max-width: 7em; text-overflow: ellipsis; }
.ref-thumb tr:first-child td { font-weight: 600; color: var(--ink); }