/* the calculators, the monitors and the other tools added to /tools */
.calc-warn{margin:0 0 16px}
.field.wide{grid-column:1 / -1}
.field textarea{width:100%;min-height:96px;padding:10px 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;line-height:1.7;resize:vertical;direction:ltr;text-align:left}
.field select,.field input{max-width:100%}
.result .res-label{display:block;margin-bottom:2px;font-size:13px;color:var(--muted)}
.stats dd bdi{direction:ltr;unicode-bidi:isolate}
.hash-out dd{overflow-wrap:anywhere;max-width:60ch;text-align:left;font-weight:500;font-size:12.5px}
.btn{min-height:40px;padding:0 18px;border:0;border-radius:999px;background:var(--ink);color:var(--bg);font:inherit;font-weight:650;cursor:pointer}
.btn:hover{opacity:.88}
.tbl-wrap{overflow-x:auto;margin-top:14px;border:1px solid var(--line);border-radius:12px}
.calc-table{width:100%;border-collapse:collapse;font-size:14px}
.calc-table th,.calc-table td{padding:10px 14px;text-align:start;border-top:1px solid var(--line);white-space:nowrap}
.calc-table thead th{border-top:0;background:var(--surface-2);font-size:12.5px;font-weight:650;color:var(--muted)}
.calc-table td.num{direction:ltr;text-align:right;font-variant-numeric:tabular-nums}
.calc-table tbody tr:hover{background:var(--surface-2)}
.calc-table tr.mid th,.calc-table tr.mid td{font-weight:700;color:var(--ink)}
/* keypad */
.keypad-panel{max-width:360px;margin-inline:auto}
.kp{display:grid;gap:10px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--surface-2)}
.kp-expr{width:100%;min-height:44px;padding:0 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:18px;text-align:left}
.kp-out{display:block;min-height:42px;padding:0 4px;font-size:30px;font-weight:750;color:var(--ink);text-align:left;overflow-wrap:anywhere}
.kp-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.kp-keys button{min-height:52px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit;font-size:20px;font-weight:650;cursor:pointer}
.kp-keys button:hover{border-color:var(--line-strong)}
.kp-keys button:active{transform:translateY(1px)}
.kp-keys .kp-fn{color:var(--muted)}
.kp-keys .kp-op{color:var(--brand)}
.kp-keys .kp-eq{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media (max-width:820px){.hash-out dd{max-width:100%}}
/* the /tools hub */
.tool-section{margin-bottom:34px}
.tool-section-title{margin:0 0 12px;font-size:19px;font-weight:700;color:var(--ink)}
.tool-card h3{margin:0;font-size:15.5px;font-weight:650;color:var(--ink)}
.tool-card.soon{opacity:.78}
/* the monitors */
.monitor-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.monitor-chips a{padding:6px 14px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--text)}
.monitor-chips a[aria-current=page]{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:650}
.breadth{margin:0 0 22px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.breadth-bar{height:10px;border-radius:999px;overflow:hidden}
.breadth-bar svg{display:block;width:100%;height:100%}
.breadth-bar .bg{fill:var(--surface-2)}
.breadth-bar .up{fill:var(--up)}
.breadth-bar .down{fill:var(--down)}
.breadth-legend{display:flex;flex-wrap:wrap;gap:8px 28px;margin:12px 0 0}
.breadth-legend dt{font-size:12px;color:var(--muted)}
.breadth-legend dd{margin:0;font-size:16px;font-weight:700;color:var(--ink)}
.breadth-legend dd small{font-size:12px;font-weight:500;color:var(--muted)}
.sig{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12.5px;font-weight:650;background:var(--flat-bg);color:var(--muted)}
.sig.up{background:var(--up-bg);color:var(--up)}
.sig.down{background:var(--down-bg);color:var(--down)}
.sig-note{display:block;margin-top:2px;font-size:11.5px;color:var(--muted)}
/* rate tools */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:32px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:13px;cursor:pointer}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:650}
.form-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.calc-table td.up{color:var(--up);font-weight:650}
.calc-table td.down{color:var(--down-label);font-weight:650}
.calc-table.cross th[scope=row]{background:var(--surface-2)}
.calc-table caption{padding:14px;color:var(--muted);text-align:center}
@media (max-width:820px){.form-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* calendars */
.calc-table tr.past{opacity:.55}
.calc-table.hours td{white-space:normal}
.calc-table .sig-note{white-space:normal}
/* information pages */
.sec-desc{margin:-6px 0 12px;max-width:70ch}
.card-sub{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.tag{padding:1px 8px;border-radius:999px;background:var(--flat-bg);font-size:11.5px;color:var(--muted)}
.info-table td,.info-table th{white-space:normal;min-width:120px}
div.card.tool-card{cursor:default}
/* the widget builder */
.pgrid.wb{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.wb-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.wb-pick{margin:12px 0 0;padding:0;list-style:none;max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:12px}
.wb-pick li{border-top:1px solid var(--line)}
.wb-pick li:first-child{border-top:0}
.wb-pick label{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer}
.wb-pick label:hover{background:var(--surface-2)}
.wb-pick small{margin-inline-start:auto;font-size:11.5px;color:var(--muted)}
.wb-cols{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.wb-cols legend{margin-bottom:6px;font-size:13px;color:var(--muted)}
.wb-cols label{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--text)}
.wb-frame{margin-top:6px;padding:12px;border:1px dashed var(--line-strong);border-radius:12px;background:var(--surface-2)}
.wb-frame iframe{display:block;width:100%;border:0;border-radius:8px;background:var(--bg)}
textarea.code{width:100%;padding:12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface-2);color:var(--ink);font:12.5px/1.7 ui-monospace,Menlo,monospace;direction:ltr;text-align:left;resize:vertical}
@media (max-width:820px){.pgrid.wb{grid-template-columns:minmax(0,1fr)}}