/* NotesNepal tools. Colours come from the theme via custom properties; these are fallbacks. */
.nn-tool {
  /* Defaults match the current NotesNepal theme (style.css: #3b9dc1 / #07bafc, Jost). */
  --nn-primary: var(--brand-primary, #3b9dc1);
  --nn-primary-hover: var(--brand-primary-hover, #07bafc);
  --nn-accent: var(--brand-accent, #d32f2f);
  --nn-bg: var(--surface, #fff);
  --nn-soft: var(--surface-soft, #f4f6f9);
  --nn-text: var(--text, #1b2330);
  --nn-muted: var(--text-muted, #5b6676);
  --nn-line: var(--line, #dde2ea);
  --nn-radius: 10px;
  color: var(--nn-text);
  margin: 0 0 2rem;
}
.nn-tool [hidden] { display: none !important; }
.nn-tool *, .nn-tool *::before, .nn-tool *::after { box-sizing: border-box; }
.nn-tool__ui { background: var(--nn-bg); border: 1px solid var(--nn-line); border-radius: var(--nn-radius); padding: 1rem; }
.nn-tool .nn-btn, .nn-tool .nn-tab, .nn-tool h2 { font-family: inherit; }
.nn-tool h2 { font-size: 1.25rem; margin: 2rem 0 .75rem; }

.nn-fieldset { border: 0; padding: 0; margin: 0; }
.nn-fieldset legend { font-weight: 600; margin-bottom: .5rem; }
.nn-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.nn-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; font-weight: 600; }
.nn-form label span[lang] { font-weight: 400; color: var(--nn-muted); }
.nn-form input, .nn-form select {
  font: inherit; font-size: 1rem; padding: .6rem .7rem; border: 1px solid var(--nn-line);
  border-radius: 8px; background: var(--nn-bg); color: var(--nn-text); width: 100%; min-height: 44px;
}
.nn-form input:focus-visible, .nn-form select:focus-visible, .nn-btn:focus-visible, .nn-tab:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--nn-primary) 40%, transparent); outline-offset: 1px;
}
.nn-inline { display: flex; gap: .5rem; }
.nn-inline select { width: auto; }

.nn-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.nn-tab { font: inherit; padding: .45rem .8rem; border: 1px solid var(--nn-line); border-radius: 999px; background: var(--nn-soft); color: var(--nn-text); cursor: pointer; }
.nn-tab.is-active { background: var(--nn-primary); border-color: var(--nn-primary); color: #fff; }

.nn-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.nn-btn { font: inherit; font-weight: 600; min-height: 44px; padding: .55rem 1.1rem; border-radius: 8px; border: 1px solid var(--nn-primary); background: var(--nn-primary); color: #fff; cursor: pointer; }
.nn-btn:hover { background: var(--nn-primary-hover); border-color: var(--nn-primary-hover); }
.nn-btn--ghost:hover { color: #fff; }
.nn-btn--ghost { background: transparent; color: var(--nn-primary); }
.nn-error { color: var(--nn-accent); font-weight: 600; margin: .75rem 0 0; }
.nn-notice { padding: .75rem 1rem; background: var(--nn-soft); border-left: 4px solid var(--nn-accent); }
.nn-muted { color: var(--nn-muted); font-size: .9rem; }

.nn-result { margin-top: 1rem; padding: 1rem; background: var(--nn-soft); border-radius: var(--nn-radius); }
.nn-result__lead p { margin: .2rem 0; font-size: 1.05rem; }
.nn-stats { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0 0 1rem; }
.nn-stats div { background: var(--nn-bg); border: 1px solid var(--nn-line); border-radius: 8px; padding: .75rem; }
.nn-stats dt { font-size: .85rem; color: var(--nn-muted); }
.nn-stats dd { margin: .2rem 0 0; font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.nn-table { width: 100%; border-collapse: collapse; margin: .75rem 0; font-variant-numeric: tabular-nums; }
.nn-table th, .nn-table td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--nn-line); }
.nn-table td { text-align: right; }
.nn-scroll { overflow-x: auto; }

.nn-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--nn-line); }
.nn-bar span:first-child, .nn-key--p { background: var(--nn-primary); }
.nn-bar span:last-child, .nn-key--i { background: var(--nn-accent); }
.nn-key { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin: 0 .3rem 0 .6rem; vertical-align: middle; }

.nn-tool details { margin: .75rem 0; }
.nn-tool summary { cursor: pointer; font-weight: 600; }
.nn-tool__faq details { border-bottom: 1px solid var(--nn-line); padding: .6rem 0; }
.nn-tool__related ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; }
.nn-tool__related a { display: inline-block; padding: .4rem .8rem; border: 1px solid var(--nn-line); border-radius: 999px; text-decoration: none; }

:root[data-theme="dark"] .nn-tool { --nn-bg: var(--surface, #141a24); --nn-soft: var(--surface-soft, #1c2431); --nn-text: var(--text, #e6ebf2); --nn-muted: var(--text-muted, #9aa6b5); --nn-line: var(--line, #2c3646); --nn-primary: var(--brand-primary, #5b8fd8); }

/* Old theme dark mode: body/html carries id="dm" */
#dm .nn-tool { --nn-bg: #2e2e2e; --nn-soft: #252525; --nn-text: #eee; --nn-muted: #bbb; --nn-line: #444; --nn-primary: #f90; --nn-primary-hover: #ffad33; }

/* Converters */
.nn-convert { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.nn-convert__pane { display: flex; flex-direction: column; gap: 6px; }
.nn-convert label { font-weight: 600; font-size: .9rem; }
.nn-convert textarea { font: 1.05rem/1.6 "Noto Sans Devanagari", system-ui, sans-serif; padding: .7rem; border: 1px solid var(--nn-line); border-radius: 8px; background: var(--nn-bg); color: var(--nn-text); resize: vertical; min-height: 180px; width: 100%; }
.nn-convert textarea[readonly] { background: var(--nn-soft); }
.nn-convert .nn-preeti { font-family: Preeti, ui-monospace, monospace; }
.nn-convert .nn-error, .nn-convert .nn-actions { grid-column: 1 / -1; }
.nn-convert .nn-actions { align-items: center; margin-top: 0; }
@media (max-width: 640px) { .nn-convert { grid-template-columns: 1fr; } }

/* Shared controls for the basic tools */
.nn-label { display: block; font-weight: 600; font-size: .9rem; margin: 0 0 6px; }
.nn-area { display: block; width: 100%; font: 1rem/1.6 "Noto Sans Devanagari", system-ui, sans-serif; padding: .7rem; border: 1px solid var(--nn-line); border-radius: 8px; background: var(--nn-bg); color: var(--nn-text); resize: vertical; margin: 0 0 12px; }
.nn-area[readonly] { background: var(--nn-soft); }
.nn-mono, .nn-code, .nn-pwlist code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.nn-tool input:not([type]), .nn-tool input[type="date"], .nn-tool input[type="search"], .nn-tool select, .nn-title { font: inherit; font-size: 1rem; padding: .55rem .7rem; border: 1px solid var(--nn-line); border-radius: 8px; background: var(--nn-bg); color: var(--nn-text); min-height: 44px; width: 100%; }
.nn-tool .nn-grid label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; font-weight: 600; }
.nn-tool .nn-grid { margin-bottom: 12px; }
.nn-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 12px; font-size: .95rem; }
.nn-checks label { display: inline-flex; align-items: center; gap: 6px; }
.nn-file { display: flex; flex-wrap: wrap; max-width: 100%; box-sizing: border-box; align-items: center; gap: 10px; padding: .6rem 1rem; border: 2px dashed var(--nn-line); border-radius: 10px; cursor: pointer; font-weight: 600; margin-bottom: 6px; }
.nn-file input { font-size: .9rem; max-width: 100%; min-width: 0; flex: 1 1 180px; }
.nn-stats--sm dd { font-size: 1.1rem; }
.nn-big { font-size: 1.4rem; font-weight: 700; margin: 0 0 8px; }
.nn-preview img, .nn-preview canvas, .nn-cropper canvas { display: block; max-width: 100%; height: auto; border-radius: 8px; margin-top: 12px; }
.nn-cropper canvas { touch-action: none; cursor: crosshair; }
.nn-preview--pick canvas { cursor: crosshair; }
.nn-swatch-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.nn-swatch { width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--nn-line); flex: none; }
.nn-codes { display: grid; gap: 6px; margin: 0; }
.nn-codes div { display: flex; gap: 10px; align-items: center; }
.nn-codes dt { width: 40px; font-weight: 600; }
.nn-codes dd, .nn-hashes dd { margin: 0; }
.nn-code { font-size: .92rem; padding: 4px 8px; border: 1px solid var(--nn-line); border-radius: 6px; background: var(--nn-soft); color: var(--nn-text); cursor: pointer; word-break: break-all; text-align: left; }
.nn-hashes { display: grid; gap: 4px 12px; margin: 12px 0 0; }
.nn-hashes dt { font-weight: 600; font-size: .85rem; margin-top: 8px; }
.nn-pwlist { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.nn-pwlist li { display: flex; gap: 8px; align-items: center; justify-content: space-between; background: var(--nn-soft); border-radius: 8px; padding: 6px 6px 6px 12px; }
.nn-pwlist code { font-size: 1.05rem; word-break: break-all; }
.nn-clock { font: 700 clamp(2.4rem, 9vw, 4rem)/1.1 ui-monospace, Menlo, Consolas, monospace; text-align: center; margin: 16px 0; font-variant-numeric: tabular-nums; }
.nn-laps { max-height: 220px; overflow: auto; font-family: ui-monospace, Menlo, monospace; }
.nn-ok { color: #1b8a3a; font-weight: 700; }
.nn-notepad { display: grid; grid-template-columns: 220px 1fr; gap: 14px; }
.nn-notepad aside { display: flex; flex-direction: column; gap: 8px; }
.nn-notepad ul { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow: auto; }
.nn-notepad li button { width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--nn-text); cursor: pointer; font: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nn-notepad li button.is-active, .nn-notepad li button:hover { background: var(--nn-soft); }
.nn-title { margin-bottom: 8px; font-weight: 600; }
@media (max-width: 640px) { .nn-notepad { grid-template-columns: 1fr; } }

/* Nepali keyboard, IP */
.nn-kb { margin-top: 12px; padding: 10px; background: var(--nn-soft); border-radius: 10px; }
.nn-kb__row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.nn-kb button { min-width: 40px; min-height: 40px; padding: 4px 8px; border: 1px solid var(--nn-line); border-radius: 6px; background: var(--nn-bg); color: var(--nn-text); font: 1.1rem "Noto Sans Devanagari", system-ui, sans-serif; cursor: pointer; }
.nn-kb button:hover { border-color: var(--nn-primary); }
.nn-ip { font: 700 clamp(1.4rem, 6vw, 2.2rem)/1.2 ui-monospace, Menlo, Consolas, monospace; word-break: break-all; margin: 4px 0 8px; }
.nn-big--sm { font-size: 1.05rem; font-weight: 600; }
.nn-codes dd { word-break: break-word; font-size: .9rem; }