/* utils: layout on top of packages/ui (tokens.css, newsprint.css). Unlayered, so these rules win over the newsprint layer. */

.tools { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0 0 1rem; border-bottom: 1px solid var(--line-strong); margin-bottom: 1.2rem; }
.tools a {
  font: 0.7rem/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--ink); padding: 0.4rem 0.6rem; background: var(--paper);
}
.tools a:hover { background: var(--paper-deep); }
.tools a[aria-current='page'] { background: var(--ink); color: var(--paper); }
h1 a { text-decoration: none; }
#tool-title { font-style: italic; font-weight: 400; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.2rem; }
.card { display: block; text-decoration: none; transition: transform 0.08s ease; }
.card:hover, .card:focus-visible { transform: translate(-2px, -2px); box-shadow: var(--shadow-pop); }
.card h2 { margin: 0 0 0.4rem; font-size: 1.35rem; }
.card p:last-child { margin: 0; line-height: 1.45; }

.tool { display: grid; gap: 1.2rem; }
.tool-body { display: grid; gap: 1rem; margin-top: 1rem; }
.pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1rem; }
.row { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem 1.2rem; margin: 0.8rem 0; }
.row > label:not(:has(> input[type='checkbox'])) { min-width: 10rem; }
.panel { display: grid; gap: 0.7rem; align-content: start; }
.panel > p { margin: 0; }
textarea { font-family: var(--mono); font-size: 0.85rem; line-height: 1.5; }
textarea[readonly] { background: var(--paper); }
.section-label > :first-child { margin-right: auto; }
.section-label button { padding: 0.3rem 0.6rem; }

.segmented { display: inline-flex; flex-wrap: wrap; }
.segmented button + button { border-left-width: 0; }
.segmented button[aria-checked='true'] { background: var(--ink); color: var(--paper); }
.segmented[hidden], [hidden] { display: none !important; }

.link-report { display: grid; gap: 0.5rem; }
.link-row { display: grid; gap: 0.2rem; padding: 0.45rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }

/* Diffs */
.diff-summary { display: flex; gap: 0.3rem; }
table.diff { border-top-width: 1px; font: 0.8rem/1.5 var(--mono); table-layout: fixed; }
table.diff td { padding: 0.05rem 0.4rem; border-bottom: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
table.diff col.ln { width: 3.2rem; }
table.diff col.sign { width: 1.4rem; }
table.diff td.ln { color: var(--muted); text-align: right; user-select: none; background: var(--paper); }
table.diff td.sign { user-select: none; color: var(--muted); }
td.code.del { background: #fbe3dd; }
td.code.ins { background: #e2f0e4; }
td.code.empty { background: repeating-linear-gradient(-45deg, var(--paper), var(--paper) 4px, var(--paper-deep) 4px, var(--paper-deep) 8px); }
td.code.del mark { background: #f2b5a8; color: inherit; }
td.code.ins mark { background: #a9d6b2; color: inherit; }
pre.diff.flow { background: var(--surface); border: 1px solid var(--line-strong); font-size: 0.85rem; }
pre.diff del { background: #f2b5a8; text-decoration: line-through; }
pre.diff ins { background: #a9d6b2; text-decoration: none; }

/* Character inspector */
pre.reveal { background: var(--surface); border: 1px solid var(--line-strong); min-height: 3rem; font-size: 0.9rem; }
mark.glyph { background: var(--coral); color: #fff; font-size: 0.62rem; padding: 0 0.2rem; margin: 0 1px; border-radius: 2px; vertical-align: 1px; }
mark.glyph.space { background: var(--teal); }
mark.glyph.tag { background: var(--bad); }
mark.look { background: var(--acid); color: inherit; outline: 1px solid var(--ink); }

/* Text cleanup */
.counts { margin: 0; font: 0.68rem/1.5 var(--mono); letter-spacing: 0.04em; color: var(--muted); }
.steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 0.45rem 1rem; }

/* JSON */
pre.caret { background: var(--bad-soft); white-space: pre; overflow-x: auto; }

/* Generators */
.secret-row { display: flex; gap: 0.6rem; align-items: stretch; flex-wrap: wrap; }
.secret { flex: 1 1 20rem; display: block; padding: 0.7rem; background: var(--paper-deep); border: 1px solid var(--line-strong); font-size: 1.1rem; overflow-wrap: anywhere; min-height: 1.5em; }
td.hash { overflow-wrap: anywhere; font-size: 0.78rem; }
td:has(> button) { white-space: nowrap; width: 1%; }

/* QR */
.qr { display: grid; place-items: center; min-height: 12rem; }
.qr svg { width: min(100%, 22rem); height: auto; border: 1px solid var(--line-strong); }

.footer { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; padding-top: 0.6rem; border-top: 1px solid var(--line-strong); font: 0.62rem/1.5 var(--mono); letter-spacing: 0.08em; color: var(--muted); }