/* Workstream E batch 3 — tool-specific styles (use component classes first; only what components cannot express goes here). */
/* Owns: timestamp.js, base64.js, diff.js, hash.js, uuid.js, url.js */

.tool-body{display:flex;flex-direction:column;gap:16px;min-height:0} /* gutter comes from .tool-content (shell.css) */
.tool-body .panes{flex:1}
.stack{display:flex;flex-direction:column;gap:10px}
.pane-pad{padding:14px;display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.toggle:disabled{opacity:.5;cursor:not-allowed}
@media (max-width:820px){.grid-2{grid-template-columns:1fr}}
.opt-label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2)}
.label-sm{font-size:13px;color:var(--text-2)}
.muted-xs{font-size:12px;color:var(--text-3)}
.field-inline{display:flex;flex-direction:row;align-items:center;gap:6px}
.field-grow{flex:1;min-width:240px}
.count-input{width:70px;height:32px}
.mono{font-family:var(--font-mono)}
.self-end{align-self:flex-end}
.ta-md{height:100px;resize:vertical}
.file-info{color:var(--text-3);font-size:13px;flex:1}
.file-name-tag{color:var(--accent-text);font-size:12px}
.pane-body.scroll{overflow:auto}
.pane-body.static{flex:none;border-top:1px solid var(--stroke-card)}
.result-pane{flex:1;min-height:280px}
.hash-text{min-height:120px}
.empty .e-icon.err{color:var(--err)}

/* ---- timestamp: live clock card ---- */
.now-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;padding:14px}
.now-grid .n-label{font-size:12px;color:var(--text-3);margin-bottom:4px;display:block}
.now-grid .n-value{font-family:var(--font-mono);font-size:20px;color:var(--accent-text)}
.now-grid .n-value.small{font-size:14px;font-family:var(--font-ui);color:var(--text);font-weight:400}

/* ---- key/value result blocks (timestamp, uuid validate) ---- */
.kv{display:grid;grid-template-columns:120px 1fr;gap:6px 10px;font-family:var(--font-mono);font-size:13px;padding:12px 14px}
.kv dt{color:var(--text-3);font-family:var(--font-ui)}
.kv dd{margin:0;word-break:break-word}

/* ---- drag/drop file target (hash) ---- */
.drop{border:1px dashed var(--stroke-strong);border-radius:var(--r-card);padding:24px;text-align:center;color:var(--text-2);cursor:pointer;display:grid;gap:6px;justify-items:center}
.drop.drag{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text)}
.drop input[type="file"]{display:none}

/* ---- hash result rows ---- */
.hash-list{display:flex;flex-direction:column}
.hash-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--stroke-card)}
.hash-row:last-child{border-bottom:0}
.hash-row .h-algo{width:70px;font-weight:600;font-size:12px;color:var(--text-2);flex:none}
.hash-row .h-val{flex:1;min-width:0;font-family:var(--font-mono);font-size:12px;word-break:break-all}
.hash-row .h-val.muted{color:var(--text-3)}

/* ---- uuid generated list ---- */
.id-list{display:flex;flex-direction:column}
.id-row{display:flex;align-items:center;gap:10px;padding:7px 14px;border-bottom:1px solid var(--stroke-card);font-family:var(--font-mono);font-size:13px}
.id-row:last-child{border-bottom:0}
.id-row .id-val{flex:1;min-width:0;word-break:break-all}

/* ---- diff line-level render ---- */
.diff-lines{font-family:var(--font-mono);font-size:13px}
.diff-line{display:flex;white-space:pre-wrap;word-break:break-word}
.diff-line .dl-num{width:38px;flex:none;text-align:right;color:var(--text-3);user-select:none;padding:0 10px 0 0}
.diff-line .dl-num2{width:38px;flex:none;text-align:right;color:var(--text-3);user-select:none;padding:0 10px 0 0}
.diff-line .dl-code{flex:1;min-width:0;padding:0 14px 0 0}
.diff-line.added{background:var(--ok-soft)}
.diff-line.removed{background:var(--err-soft)}

/* ---- diff char-level render ---- */
.diff-char{font-family:var(--font-mono);font-size:13px;white-space:pre-wrap;word-break:break-word;padding:12px 14px}
.diff-char .c-add{background:var(--ok-soft);color:var(--ok);border-radius:2px}
.diff-char .c-rem{background:var(--err-soft);color:var(--err);text-decoration:line-through;border-radius:2px}

/* ---- legend swatches ---- */
.legend{display:flex;gap:12px;font-size:11px;font-family:var(--font-mono);color:var(--text-3)}
.legend .sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.legend .sw.added{background:var(--ok)}
.legend .sw.removed{background:var(--err)}
.legend .sw.unchanged{background:var(--text-3)}

/* ---- base64 file preview ---- */
.file-preview{display:flex;align-items:center;gap:12px;padding:12px 14px}
.file-preview img{max-width:64px;max-height:64px;border-radius:6px;border:1px solid var(--stroke-card)}