/* osir.co.uk: shared styles for the smaller utilities (cable, UUID, Base64, JSON, timestamps, download time, headers) */

.u-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-top: 14px; }
.u-range { margin-top: 14px; display: grid; gap: 6px; }
.u-range label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: var(--text-2); }
.u-range label span { flex: 1; }
.u-range input[type=range] { width: 100%; accent-color: var(--brand-1); }
.u-num { width: 90px; height: 36px; text-align: right; }
.u-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.u-row > .t-field { flex: 1 1 160px; }

/* Tiles */
.u-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.u-tile { display: grid; gap: 2px; align-content: start; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); border-top: 3px solid var(--border-strong); min-width: 0; }
.u-tile b { font-size: 20px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; word-break: break-word; }
.u-tile-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.u-tile-sub { font-size: 12.5px; color: var(--muted); }
.u-tile.is-ok { border-top-color: #16a34a; }
.u-tile.is-warn { border-top-color: #d97706; }
.u-tile.is-bad { border-top-color: #dc2626; }
.u-notes { margin-top: 12px; padding-left: 20px; display: grid; gap: 8px; color: var(--text-2); }
.t-table tr.is-pick td { background: color-mix(in srgb, var(--brand-1) 8%, transparent); font-weight: 650; }

/* Cable diagram */
.cb-diagram { margin-top: 14px; }
.cb-diagram svg { width: 100%; height: auto; display: block; }
.cb-box { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1.5; }
.cb-port { fill: var(--surface-solid); stroke: var(--border-strong); }
.cb-t { font-size: 13px; fill: var(--muted); }
.cb-t-b { font-size: 14.5px; font-weight: 700; fill: var(--text); }
.cb-wire { stroke-width: 6; stroke-linecap: round; fill: none; }
.cb-patch { stroke: var(--text-2); stroke-width: 6; stroke-linecap: round; opacity: .45; }
.cb-ok { stroke: #16a34a; } .cb-warn { stroke: #d97706; } .cb-bad { stroke: #dc2626; }
.cb-ok-t { fill: #15803d; } .cb-warn-t { fill: #b45309; } .cb-bad-t { fill: #b91c1c; }
:root[data-theme="dark"] .cb-ok-t { fill: #4ade80; }
:root[data-theme="dark"] .cb-warn-t { fill: #fbbf24; }
:root[data-theme="dark"] .cb-bad-t { fill: #f87171; }

/* Editors: text in, text out */
.u-io { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.u-io > .t-card + .t-card { margin-top: 0; }
.u-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.u-pane-head h2 { font-size: 17px; }
.u-text { width: 100%; min-height: 280px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface-solid);
  font-family: var(--mono); font-size: 13.5px; line-height: 1.5; resize: vertical; outline: none; tab-size: 2; white-space: pre; overflow-wrap: normal; overflow: auto; color: var(--text); }
.u-text.is-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.u-text:focus { border-color: var(--brand-1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-1) 18%, transparent); }
.u-out { min-height: 280px; max-height: 70vh; margin: 12px 0 0; }
.u-meta { margin-top: 8px; font-size: 12.5px; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; }
.u-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 10px; }
.u-drop { border: 2px dashed var(--border-strong); border-radius: 14px; padding: 16px; text-align: center; color: var(--muted); font-size: 14px; margin-top: 12px; cursor: pointer; }
.u-drop.is-over { border-color: var(--brand-1); background: color-mix(in srgb, var(--brand-1) 7%, transparent); color: var(--text); }
.u-preview { margin-top: 12px; max-width: 100%; max-height: 320px; border-radius: 10px; border: 1px solid var(--border); background: repeating-conic-gradient(var(--surface-2) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.u-hex { font-family: var(--mono); font-size: 12.5px; white-space: pre; overflow-x: auto; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); }
.u-err { margin-top: 12px; }
.u-err .t-code { margin-top: 8px; white-space: pre; }

/* Syntax colours (JSON) */
.j-key { color: #0b5cad; } .j-str { color: #0f7b3f; } .j-num { color: #b4530a; } .j-bool { color: #8b2fc9; } .j-null { color: #8a8f98; } .j-punc { color: var(--muted); }
:root[data-theme="dark"] .j-key { color: #7cb7ff; }
:root[data-theme="dark"] .j-str { color: #6ee7a0; }
:root[data-theme="dark"] .j-num { color: #fbbf72; }
:root[data-theme="dark"] .j-bool { color: #d8a6ff; }
.j-err-mark { background: rgba(220, 38, 38, .25); outline: 1px solid #dc2626; border-radius: 2px; }

/* JSON tree */
.j-tree { margin-top: 12px; font-family: var(--mono); font-size: 13px; line-height: 1.6; max-height: 70vh; overflow: auto; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-solid); }
.j-tree details { padding-left: 16px; }
.j-tree details > summary { margin-left: -16px; cursor: pointer; list-style: none; }
.j-tree details > summary::before { content: "▸"; display: inline-block; width: 16px; color: var(--muted); }
.j-tree details[open] > summary::before { content: "▾"; }
.j-tree .j-leaf { padding-left: 16px; cursor: pointer; }
.j-tree .j-leaf:hover, .j-tree summary:hover { background: var(--surface-2); }
.j-count { color: var(--muted); font-size: 12px; }
.j-path { margin-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }

/* Big live values (timestamps, UUIDs) */
.u-live { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 14px; }
.u-live-item { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.u-live-item span { display: block; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.u-live-item b { display: block; margin-top: 2px; font-family: var(--mono); font-size: 18px; font-weight: 700; word-break: break-all; cursor: pointer; }
.u-kv-table td:first-child { color: var(--muted); font-weight: 600; white-space: nowrap; width: 1%; }
.u-kv-table td.t-mono { word-break: break-all; }
.u-copy { border: 0; background: none; color: var(--brand-1); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 650; padding: 0 4px; }

/* Header checker and email header analyser */
.h-hops { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.h-hop { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); display: grid; gap: 4px; min-width: 0; }
.h-hop-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.h-hop-url { font-family: var(--mono); font-size: 13px; word-break: break-all; }
.h-code { font-family: var(--mono); font-weight: 800; padding: 2px 8px; border-radius: 8px; font-size: 13px; background: var(--surface-solid); border: 1px solid var(--border-strong); }
.h-code.c2 { color: #15803d; } .h-code.c3 { color: #1d4ed8; } .h-code.c4, .h-code.c5 { color: #b91c1c; }
:root[data-theme="dark"] .h-code.c2 { color: #4ade80; }
:root[data-theme="dark"] .h-code.c3 { color: #93c5fd; }
:root[data-theme="dark"] .h-code.c4, :root[data-theme="dark"] .h-code.c5 { color: #f87171; }
.h-grade { flex: none; width: 76px; height: 76px; border-radius: 18px; display: grid; place-items: center; font-size: 34px; font-weight: 900; color: #fff; background: #64748b; }
.h-grade.g-a { background: #15803d; } .h-grade.g-b { background: #4d7c0f; } .h-grade.g-c { background: #b45309; } .h-grade.g-d, .h-grade.g-e { background: #c2410c; } .h-grade.g-f { background: #b91c1c; }
.h-score { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.h-checks { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.h-checks li { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-solid); }
.h-checks li > .t-badge { grid-row: span 2; margin-top: 1px; }
.h-checks li strong { font-size: 14.5px; }
.h-checks li p { margin: 0; font-size: 13.5px; color: var(--text-2); grid-column: 2; }
.h-checks li code { font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
.h-hdrs td:first-child { font-family: var(--mono); font-size: 13px; font-weight: 650; white-space: nowrap; }
.h-hdrs td:nth-child(2) { font-family: var(--mono); font-size: 13px; word-break: break-all; }
.h-hdrs .h-explain { display: block; margin-top: 3px; font-family: inherit; color: var(--muted); font-size: 12.5px; word-break: normal; }
.h-timeline { margin-top: 14px; display: grid; gap: 6px; }
.h-tl-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 90px; gap: 10px; align-items: center; font-size: 13px; }
.h-tl-bar { display: block; height: 10px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.h-tl-bar i { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; background: #2a78d6; }
.h-tl-bar i.is-slow { background: #d95926; }
.h-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-solid); border: 1px solid var(--border-strong); font-size: 12px; font-weight: 800; }

@media (max-width: 860px) { .u-io { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .u-fields { grid-template-columns: 1fr; } .u-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Voltage drop scale (cable size calculator) */
.cs-scale { margin-top: 16px; }
.cs-bar { position: relative; display: flex; height: 26px; }
.cs-seg { display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; }
.cs-seg:first-child { border-radius: 8px 0 0 8px; }
.cs-seg:last-of-type { border-radius: 0 8px 8px 0; }
.cs-ex { background: #15803d; } .cs-good { background: #4d7c0f; } .cs-ok { background: #b45309; } .cs-poor { background: #c2410c; } .cs-bad { background: #b91c1c; }
.cs-mark { position: absolute; top: -6px; bottom: -6px; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--text); box-shadow: 0 0 0 2px var(--surface-solid); }
.cs-ticks { position: relative; height: 18px; font-size: 11px; color: var(--muted); }
.cs-ticks span { position: absolute; top: 3px; transform: translateX(-50%); }
.t-badge.cs-b-ex { color: #15803d; background: rgba(34, 197, 94, .14); }
.t-badge.cs-b-good { color: #4d7c0f; background: rgba(132, 204, 22, .16); }
.t-badge.cs-b-ok { color: #a16207; background: rgba(245, 158, 11, .16); }
.t-badge.cs-b-poor { color: #c2410c; background: rgba(249, 115, 22, .14); }
.t-badge.cs-b-bad { color: #b91c1c; background: rgba(220, 38, 38, .12); }
:root[data-theme="dark"] .t-badge.cs-b-ex { color: #4ade80; }
:root[data-theme="dark"] .t-badge.cs-b-good { color: #a3e635; }
:root[data-theme="dark"] .t-badge.cs-b-ok { color: #fbbf24; }
:root[data-theme="dark"] .t-badge.cs-b-poor { color: #fb923c; }
:root[data-theme="dark"] .t-badge.cs-b-bad { color: #f87171; }

/* Wire gauge converter */
.wg-result { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 14px; }
.wg-circle { display: grid; place-items: center; margin-top: 14px; min-height: 120px; }
.wg-circle svg { max-width: 100%; height: auto; }
.wg-cu { fill: #d97b3a; stroke: #9a4d1a; }
.wg-ins { fill: none; stroke: var(--border-strong); stroke-dasharray: 4 3; }
.wg-label { font-size: 12px; fill: var(--muted); }

/* Passwords: input, meter, pattern chips, generated list */
.pw-input { display: flex; gap: 8px; align-items: center; }
.pw-input .t-input { flex: 1; font-size: 17px; height: 50px; }
.pw-meter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 14px; }
.pw-meter i { height: 8px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border); transition: background .25s; }
.pw-meter i.on-bad { background: #dc2626; border-color: #dc2626; }
.pw-meter i.on-warn { background: #d97706; border-color: #d97706; }
.pw-meter i.on-good { background: #16a34a; border-color: #16a34a; }
.pw-summary { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-top: 10px; }
.pw-summary strong { font-size: 20px; font-weight: 800; }
.pw-parts { display: grid; gap: 8px; margin-top: 12px; }
.pw-part { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border-left: 4px solid var(--border-strong); background: var(--surface-2); font-size: 14px; min-width: 0; }
.pw-part code { flex: 0 1 auto; max-width: 55%; font-family: var(--mono); font-weight: 700; word-break: break-all; }
.pw-part span { color: var(--text-2); }
.pw-common { border-left-color: #dc2626; } .pw-word { border-left-color: #d97706; } .pw-seq { border-left-color: #c2410c; } .pw-date { border-left-color: #b45309; } .pw-rand { border-left-color: #16a34a; }
.pw-out { display: flex; gap: 10px; align-items: center; margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--surface-solid); border: 1px solid var(--border-strong); }
.pw-out-text { flex: 1; min-width: 0; font-family: var(--mono); font-size: clamp(17px, 2.4vw, 24px); font-weight: 700; word-break: break-all; letter-spacing: .02em; }
.pw-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.pw-list li { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-family: var(--mono); font-size: 14.5px; word-break: break-all; }
.pw-list li span { flex: 1; min-width: 0; }
.pw-d { color: #1d4ed8; } .pw-s { color: #b91c1c; }
:root[data-theme="dark"] .pw-d { color: #93c5fd; }
:root[data-theme="dark"] .pw-s { color: #fca5a5; }

/* Key generator */
.kg-item { margin-top: 14px; }
.kg-item-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.kg-label { font-size: 13px; font-weight: 700; color: var(--text-2); }
.kg-val { margin: 4px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); font-family: var(--mono); font-size: 13px; word-break: break-all; white-space: pre-wrap; }
pre.kg-val { max-height: 340px; overflow: auto; }
.kg-qr-wrap { display: grid; justify-items: center; gap: 6px; margin-top: 16px; }
.kg-qr { border-radius: 8px; border: 1px solid var(--border); }

/* Subnet calculator */
.sn-bits { font-family: var(--mono); font-size: 13.5px; line-height: 1.9; overflow-x: auto; white-space: nowrap; padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); margin-top: 12px; }
.sn-net { color: #1d4ed8; font-weight: 700; } .sn-host { color: #b45309; }
:root[data-theme="dark"] .sn-net { color: #93c5fd; }
:root[data-theme="dark"] .sn-host { color: #fbbf24; }
.sn-bits-legend { display: flex; gap: 16px; font-size: 12.5px; margin-top: 6px; color: var(--muted); }

/* Backup planner */
.bk-rows { display: grid; gap: 8px; margin-top: 12px; }
.bk-row { display: grid; grid-template-columns: minmax(0, 1fr) 100px 76px 40px; gap: 6px; align-items: center; }
.bk-custom { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bk-321 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.bk-copy { display: grid; gap: 2px; align-content: start; padding: 12px; border-radius: 14px; border: 1.5px dashed var(--border-strong); background: transparent; opacity: .65; min-width: 0; }
.bk-copy.is-on { border-style: solid; border-color: #16a34a; background: rgba(34, 197, 94, .07); opacity: 1; }
.bk-copy-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 800; font-size: 13px; background: var(--surface-2); }
.bk-copy.is-on .bk-copy-n { background: #16a34a; color: #fff; }
.bk-copy strong { margin-top: 6px; font-size: 14.5px; }
.bk-copy-v { font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .bk-321 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bk-row { grid-template-columns: minmax(0, 1fr) 80px 66px 36px; } .bk-custom { grid-template-columns: repeat(2, minmax(0, 1fr)); } }