/*!
 * Merokalam Nepali Keyboard - page styles.
 * Uses the site's existing --paper/--cream/--ink/--muted/--border/--saffron/
 * --forest/--shadow tokens (assets/css/main.css + mk-theme.css) so dark mode
 * and the site's visual language work automatically. One content image
 * (nk-content-figure) for the SEO article section.
 */

@font-face{font-family:'Preeti';src:url('../fonts/Preeti.ttf') format('truetype');font-weight:normal;font-style:normal;font-display:swap}
@font-face{font-family:'Mangal';src:url('../fonts/Mangal-Bold.ttf') format('truetype');font-weight:normal;font-style:normal;font-display:swap}

.nk-content-figure{margin:0 0 1.6rem;text-align:center}
.nk-content-figure img{width:100%;max-width:640px;height:auto;border-radius:1rem;border:1px solid #e2e8f0;box-shadow:0 14px 34px rgba(15,23,42,.08)}
.nk-content-figure figcaption{margin-top:.6rem;font-size:.82rem;color:#64748b}
[data-theme="dark"] .nk-content-figure figcaption{color:#94a3b8}

.nk-shell{max-width:1100px;margin:0 auto;padding:.3rem 1rem 2.5rem}
.page{max-width:1120px;padding-top:.1rem}
/* Banner matches the site's other tool pages (e.g. /typeshala/) exactly: a
   bordered, centered "card" header with a solid dark title (no gradient
   text) and a plain descriptive paragraph underneath, instead of a cramped
   single-line subtitle - the same .ts-header proportions and copy length,
   just under the .nk- prefix used on this page. */
.nk-hero{position:relative;overflow:hidden;max-width:none;margin:.28rem auto .65rem;padding:.55rem 1.65rem .82rem;border:1px solid #e2e8f0;border-radius:1.1rem;background:#fff;box-shadow:0 14px 34px rgba(15,23,42,.06);text-align:center}
.nk-hero h1{display:block;width:100%;max-width:none;margin:0 0 .45rem;text-align:center;font-size:clamp(1.85rem,3.35vw,2.25rem);line-height:1;letter-spacing:-.045em;background:none!important;color:#0f172a!important;-webkit-text-fill-color:#0f172a!important}
.nk-hero p{max-width:1060px;width:100%;margin:0 auto;color:#1e293b;font-size:.98rem;line-height:1.62;text-align:center}
[data-theme="dark"] .nk-hero{background:#0f172a;border-color:rgba(59,130,246,.42);box-shadow:0 18px 45px rgba(0,0,0,.28)}
[data-theme="dark"] .nk-hero h1{color:#f1f5f9!important;-webkit-text-fill-color:#f1f5f9!important}
[data-theme="dark"] .nk-hero p{color:#dbeafe}
@media(min-width:1121px){
  html:not([data-theme="dark"]) body{background:linear-gradient(90deg,#e8e8eb 0 calc((100% - 1120px)/2),#fff calc((100% - 1120px)/2) calc(100% - ((100% - 1120px)/2)),#e8e8eb calc(100% - ((100% - 1120px)/2)) 100%)!important}
}
@media(max-width:768px){
  .page{padding-top:.1rem}
  .nk-hero{margin-top:.28rem;padding:.9rem 1rem .95rem;border-radius:1rem}
  .nk-hero h1{font-size:clamp(1.7rem,8vw,2.1rem);margin-bottom:.45rem}
  .nk-hero p{font-size:.92rem;line-height:1.58}
}

/* ---------- mode switch ---------- */
.nk-mode-switch{display:flex;gap:.4rem;margin:.4rem 0 .55rem;flex-wrap:wrap}
.nk-mode-btn{display:flex;align-items:center;gap:.4rem;padding:.55rem 1rem;border-radius:12px;border:1.5px solid var(--border);background:var(--paper);color:var(--ink);font-weight:700;font-size:.86rem;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .1s}
.nk-mode-btn .nk-mode-native{font-family:'Noto Sans Devanagari',sans-serif;opacity:.75;font-size:.78rem}
.nk-mode-btn:hover{border-color:#7fb0ff;transform:translateY(-1px)}
.nk-mode-btn.active{border-color:#2563eb;background:linear-gradient(135deg,#2563eb,#0891b2);color:#fff;box-shadow:0 10px 22px rgba(37,99,235,.25)}
.nk-mode-btn.active .nk-mode-native{color:#fff;opacity:.9}

/* ---------- workspace grid ---------- */
.nk-workspace{display:grid;grid-template-columns:1fr 280px;gap:1rem;align-items:start}
@media (max-width:980px){.nk-workspace{grid-template-columns:1fr}}

/* ---------- toolbar ---------- */
.nk-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;padding:.5rem .6rem;border:1px solid var(--border);border-radius:14px 14px 0 0;background:var(--paper);box-shadow:var(--shadow-sm)}
.nk-toolbar select{border:1px solid var(--border);border-radius:8px;background:var(--cream);color:var(--ink);font-size:.82rem;padding:.35rem .5rem;max-width:9.5rem}
.nk-tbtn{display:inline-flex;align-items:center;justify-content:center;min-width:2.05rem;height:2.05rem;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--ink);cursor:pointer;font-size:.92rem;font-weight:700}
.nk-tbtn svg{flex-shrink:0;display:block}
.nk-tbtn:hover{background:var(--warm)}
.nk-tbtn.active{background:#dbeafe;border-color:#93c5fd;color:#1d4ed8}
[data-theme="dark"] .nk-tbtn.active{background:rgba(59,130,246,.22);border-color:#3b82f6;color:#93c5fd}
.nk-tb-sep{width:1px;height:1.5rem;background:var(--border);margin:0 .3rem}
.nk-tb-spacer{flex:1}
.nk-tb-status{font-size:.72rem;color:var(--dim);font-weight:700}

/* ---------- file menu ---------- */
.nk-filemenu{position:relative}
.nk-filemenu-btn{display:inline-flex;align-items:center;gap:.3rem;padding:.45rem .7rem;border-radius:8px;border:1px solid var(--border);background:var(--cream);color:var(--ink);font-weight:700;font-size:.82rem;cursor:pointer}
.nk-filemenu-panel{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:210px;background:var(--paper);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:.4rem;z-index:40}
.nk-filemenu-panel.open{display:block}
.nk-filemenu-panel button{display:flex;align-items:center;gap:.55rem;width:100%;text-align:left;padding:.5rem .6rem;border:0;background:transparent;color:var(--ink);border-radius:8px;font-size:.84rem;cursor:pointer}
.nk-filemenu-panel button:hover{background:var(--warm)}
.nk-filemenu-panel hr{border:0;border-top:1px solid var(--border);margin:.35rem 0}

/* ---------- document title ---------- */
.nk-doc-titlebar{display:flex;align-items:center;gap:.6rem;padding:.5rem .9rem;border-left:1px solid var(--border);border-right:1px solid var(--border);background:var(--cream)}
.nk-doc-titlebar input{flex:1;border:0;background:transparent;font-size:.92rem;font-weight:700;color:var(--ink);padding:.2rem 0}
.nk-doc-titlebar input:focus{outline:none}

/* ---------- document page (A4-ish) ---------- */
.nk-page-wrap{background:#e9edf3;border:1px solid var(--border);border-top:0;border-bottom:0;padding:.75rem 1rem;display:flex;justify-content:center;overflow-x:hidden}
[data-theme="dark"] .nk-page-wrap{background:#0b1220}
/* min-width:0 lets #editor shrink inside the flex row instead of forcing
   .nk-page-wrap (and the whole page) wider; overflow-wrap/word-break force a
   line break even inside one long unbroken run of characters (e.g. Preeti-
   mode text typed without spaces), which is what was pushing the document
   pad - and the page around it - sideways instead of wrapping to a new
   line. */
/* Fixed-height typing pad: the page used to grow taller with every new line
   (especially noticeable with bullet/numbered lists), pushing the toolbar,
   keyboard and rest of the page down as the user typed. #editor is a true
   fixed height (not min-height, not a tall viewport-relative cap) - it never
   grows past its default size no matter how much is typed; overflow-y:auto
   scrolls the text inside the pad instead, so the toolbar/keyboard/palette
   stay exactly where they render on page load. Print keeps the old
   uncapped/unscrolled layout (see the print media query below) so a long
   document still prints in full. */
/* line-height is unitless (a ratio, not a fixed px value) so it scales
   automatically with whatever font-size applies at each point in the
   document - the editor's own base size, the larger Preeti-mode default,
   Focus Mode's size, or a font-size the user applied to part of the text
   via the toolbar's size dropdown (an inline element inherits the same
   ratio and recomputes it against its own font-size, which is exactly how
   a larger "heading" line ends up with a proportionally taller line box
   for free, with no separate heading feature needed). 1.35 was chosen by
   rendering real Devanagari text (matras, conjuncts, halants) in both Noto
   Sans Devanagari and the Preeti font at several candidate ratios and
   checking for clipping: 1.15-1.3 already rendered every mark cleanly, so
   1.35 keeps a comfortable safety margin while still reading as compact,
   single-spaced text - the previous 1.85 was close to double-spacing and
   is what produced the oversized gaps between every wrapped line. */
#editor{width:100%;max-width:760px;min-width:0;height:240px;overflow-y:auto;background:#fff;color:#1c1c1c;padding:1.5cm 1.6cm;border-radius:2px;box-shadow:0 2px 3px rgba(0,0,0,.08),0 18px 40px rgba(15,23,42,.14);font-size:20px;line-height:1.35;outline:none;overflow-wrap:anywhere;word-break:break-word}
[data-theme="dark"] #editor{background:#0f172a;color:#eef4fb;box-shadow:0 2px 3px rgba(0,0,0,.3),0 18px 40px rgba(0,0,0,.4)}
#editor:empty:before{content:attr(data-placeholder);color:#9aa3b2;pointer-events:none}
/* Paragraph spacing is deliberately separate from line spacing (the
   line-height above only controls the gap between wrapped lines WITHIN a
   paragraph). Enter creates a new <p> (see editor.js's
   defaultParagraphSeparator setup) which gets this margin-bottom for a
   modest Word-like gap between paragraphs; Shift+Enter instead inserts a
   plain <br> inside the current <p>, which carries no margin of its own,
   so it produces a line break with no paragraph gap. #editor div is styled
   identically because a document saved before this change (or any edge
   case where the browser falls back to its own default block tag) still
   used <div> per paragraph - both need to look and space the same way. */
#editor p,#editor div{margin:0 0 .5em;overflow-wrap:anywhere;word-break:break-word}
#editor br{line-height:inherit}
/* mk-shared.css sets bare, unscoped p/li rules (font-size:.93rem, its own
   color) for blog-article typography, PLUS a second, stronger rule -
   p,li,dd,dt,...{color:...!important;line-height:1.8!important} - written
   for prose elsewhere on the site. Both directly target any <p>/<li>
   element on the page, including ones the browser creates inside #editor
   for Bullet List, Numbered List, and paragraph blocks, beating whatever
   #editor itself sets: a rule that names the element directly always wins
   over inheritance, and !important always wins over a non-important
   declaration regardless of specificity. That second rule is what was
   silently forcing every wrapped paragraph back to ~1.8 line-height (and
   the wrong text color) even after the #editor line-height fix below -
   restoring inherit here only cancels the first, non-important rule.
   Matching !important on all three properties is what actually reclaims
   the paragraph gap/line-height fix and the intended text color. */
#editor p,#editor li{font-size:inherit!important;color:inherit!important;line-height:inherit!important}
#editor:focus{box-shadow:0 0 0 3px rgba(37,99,235,.18),0 18px 40px rgba(15,23,42,.14)}
/* Preeti typing mode (legacy byte mode): by explicit choice, Preeti-mode
   keystrokes insert raw roman/ASCII characters, not Unicode - see
   handleResolvedKey() in editor.js. This default font makes that raw text
   render as Devanagari, exactly like an old Preeti-encoded .doc file. It
   only sets the *default* - text with its own inline font (from the Font
   toolbar) keeps that font regardless of typing mode, and real Unicode
   Devanagari text (e.g. typed earlier in Unicode mode) simply falls
   through to the Devanagari fallback below since Preeti.ttf has no
   Unicode glyphs. */
#editor[data-typing-mode="preeti"]{font-family:'Preeti','Noto Sans Devanagari',sans-serif;font-size:26px}

.nk-status-bar{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;padding:.55rem .9rem;border:1px solid var(--border);border-top:0;border-radius:0 0 14px 14px;background:var(--paper);font-size:.76rem;color:var(--dim);font-weight:700}
.nk-status-bar .nk-status-save{margin-left:auto;color:var(--forest,#1e5c3a)}

/* ---------- reference panel ---------- */
.nk-ref-panel{border:1px solid var(--border);border-radius:14px;background:var(--paper);overflow:hidden;box-shadow:var(--shadow-sm)}
.nk-ref-tabs{display:flex;border-bottom:1px solid var(--border)}
.nk-ref-tabs button{flex:1;padding:.6rem .3rem;border:0;background:transparent;color:var(--muted);font-size:.76rem;font-weight:800;cursor:pointer;border-bottom:2px solid transparent}
.nk-ref-tabs button.active{color:#2563eb;border-bottom-color:#2563eb}
.ref-panel-body{padding:.7rem .75rem;max-height:640px;overflow:auto}
.ref-section-title{font-size:.7rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:.15rem 0 .4rem}
.ref-chip{display:inline-flex;align-items:center;justify-content:center;min-width:2.2rem;height:2.2rem;padding:0 .5rem;margin:0 .3rem .3rem 0;border:1px solid var(--border);border-radius:9px;background:var(--cream);color:var(--ink);font-family:'Noto Sans Devanagari',sans-serif;font-size:1rem;cursor:pointer}
.ref-chip:hover{border-color:#93c5fd;background:#eff6ff}
.ref-chip.ref-chip-preeti{font-family:'Preeti','Noto Sans Devanagari',sans-serif;font-size:1.25rem}

/* ---------- character palette (embedded in the side panel's "Character
   Palette" tab - see #refPalette in the aside markup, not a modal) ---------- */
.cp-groups{display:flex;flex-wrap:wrap;gap:.3rem;padding:0 0 .55rem;border-bottom:1px solid var(--border);margin-bottom:.55rem}
.cp-group-tab{padding:.3rem .6rem;border-radius:999px;border:1px solid var(--border);background:var(--cream);color:var(--muted);font-size:.72rem;font-weight:700;cursor:pointer}
.cp-group-tab.active{background:#2563eb;border-color:#2563eb;color:#fff}
.cp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(2.3rem,1fr));grid-auto-rows:2.3rem;gap:.3rem;min-height:3rem}
.cp-cell{aspect-ratio:1;min-height:2.3rem;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:8px;background:var(--cream);color:var(--ink);font-family:'Noto Sans Devanagari',sans-serif;font-size:1.05rem;cursor:pointer}
.cp-cell:hover{border-color:#93c5fd;background:#eff6ff}
.cp-cell.cp-cell-preeti{font-family:'Preeti','Noto Sans Devanagari',sans-serif;font-size:1.3rem}

/* ---------- toast ---------- */
.nk-toast{position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,12px);background:#0f172a;color:#fff;padding:.6rem 1rem;border-radius:10px;font-size:.82rem;font-weight:600;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:200;box-shadow:0 12px 30px rgba(0,0,0,.28)}
.nk-toast.show{opacity:1;transform:translate(-50%,0)}

/* =====================================================================
   VIRTUAL KEYBOARD - built from real <button> elements, no images
   ===================================================================== */
.nk-kb-wrap{margin-top:.6rem;transition:opacity .15s,max-height .2s}
.nk-kb-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem}
.nk-kb-head h2{font-size:.82rem;margin:0;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.vk-board{background:#1b2330;border-radius:18px;padding:.85rem;box-shadow:0 20px 45px rgba(15,23,42,.35),inset 0 1px 0 rgba(255,255,255,.04)}
[data-theme="dark"] .vk-board{background:#0b1220;box-shadow:0 20px 45px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.03)}
.vk-rows{display:flex;flex-direction:column;gap:.32rem}
.vk-row{display:flex;gap:.32rem}
/* Plain, uncolored keys - no finger-zone coding, by explicit choice, closer
   to how a real physical keyboard looks. */
.vk-key{flex:1;min-width:0;height:2.55rem;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;border:1px solid rgba(255,255,255,.06);border-bottom:3px solid #10151f;background:linear-gradient(180deg,#2b3446,#232b3a);color:#e6ebf5;cursor:pointer;font-family:inherit;line-height:1.05;transition:transform .05s,box-shadow .05s,background .1s;user-select:none;padding:.15rem}
.vk-key:hover{background:linear-gradient(180deg,#333e54,#2a3345)}
.vk-key.is-pressed,.vk-key:active{transform:translateY(2px);border-bottom-width:1px;background:linear-gradient(180deg,#3a4666,#2f3a52)}
.vk-key.is-active{background:linear-gradient(180deg,#2563eb,#1d4ed8);border-bottom-color:#1e3a8a;color:#fff}
.vk-legend-top{font-size:1rem;font-weight:600}
.vk-legend-bottom{font-size:.62rem;color:#9aa7c2;margin-top:.1rem}
/* Font per mode - each mode's key label renders in the font that actually
   matches what that mode produces, matching Typeshala's on-screen keyboard:
   - Preeti: the label shows the *roman* key you press (see legendFor() in
     editor.js), rendered through the real Preeti.ttf font. Preeti.ttf remaps
     ASCII codepoints to Devanagari glyph shapes, so typing "q" through this
     font visually renders as the Devanagari conjunct that key produces -
     the same trick Typeshala's own keyboard uses. In Preeti mode this is no
     longer just a label trick: handleResolvedKey() in editor.js actually
     inserts that same raw roman character into the document, and #editor
     picks up the matching Preeti font below - so the key legend always
     shows exactly what typing it will produce on the page.
   - Unicode: real Devanagari Unicode characters, shown in an actual
     Devanagari font (Preeti.ttf has no Unicode Devanagari glyphs, so it
     must never be first in this stack or the letters render blank/wrong).
   - English: plain roman letters, shown in a normal UI font. */
/* :not(.vk-fn) keeps these mode fonts scoped to actual character keys only -
   function keys (Backspace, Enter, Tab, Caps, Shift, Ctrl, Alt) carry plain
   hardcoded English labels and must always render in a normal UI font, or
   the Preeti font's ASCII-remap trick garbles words like "Backspace"/"Enter"
   into unrelated Devanagari shapes. */
.vk-board[data-mode="preeti"] .vk-key:not(.vk-fn) .vk-legend-top{font-family:'Preeti','Noto Sans Devanagari',sans-serif;font-size:1.32rem;font-weight:400}
.vk-board[data-mode="preeti"] .vk-key:not(.vk-fn) .vk-legend-bottom{font-family:'Preeti','Noto Sans Devanagari',sans-serif;font-size:.86rem}
.vk-board[data-mode="unicode"] .vk-key:not(.vk-fn) .vk-legend-top,
.vk-board[data-mode="unicode"] .vk-key:not(.vk-fn) .vk-legend-bottom{font-family:'Noto Sans Devanagari','Mangal',sans-serif}
.vk-board[data-mode="english"] .vk-key:not(.vk-fn) .vk-legend-top,
.vk-board[data-mode="english"] .vk-key:not(.vk-fn) .vk-legend-bottom{font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.vk-key.vk-fn{font-size:.7rem;font-weight:700;color:#c8d2e6}
.vk-key.vk-shift{font-size:.72rem;font-weight:800}
.vk-w1{flex:1.4}
.vk-w15{flex:1.9}
.vk-w2{flex:2.3}
.vk-space{flex:6}
.nk-kb-hint{margin-top:.5rem;font-size:.72rem;color:var(--dim);text-align:center}

/* keyboard show/hide + focus mode. Only the board itself (and its hint line)
   hide - the header bar stays visible so its "Show Keyboard" button is
   always reachable to bring the board back (hiding the whole .nk-kb-wrap
   used to hide that button too, leaving no way to undo the hide). */
body.mk-kb-hidden .nk-kb-wrap .vk-board,
body.mk-kb-hidden .nk-kb-wrap .nk-kb-hint{display:none}
body.mk-focus-mode .mk-nav,
body.mk-focus-mode .footer,
body.mk-focus-mode .nk-hero,
body.mk-focus-mode .nk-ref-panel,
body.mk-focus-mode .nk-kb-head{display:none!important}
body.mk-focus-mode .nk-workspace{grid-template-columns:1fr}
body.mk-focus-mode .nk-shell{max-width:1080px;padding-top:1.2rem}
/* Focus mode is meant for distraction-free writing, so the document and the
   on-screen keyboard both render about 20% larger than their normal size. */
body.mk-focus-mode #editor{max-width:912px;font-size:24px;padding:1.8cm 1.92cm;height:360px}
body.mk-focus-mode #editor[data-typing-mode="preeti"]{font-size:31px}
body.mk-focus-mode .vk-key{height:3.06rem}
body.mk-focus-mode .vk-key.vk-fn{font-size:.84rem}
body.mk-focus-mode .vk-key.vk-shift{font-size:.86rem}
body.mk-focus-mode .vk-legend-top{font-size:1.2rem}
body.mk-focus-mode .vk-legend-bottom{font-size:.75rem}
body.mk-focus-mode .vk-board[data-mode="preeti"] .vk-key:not(.vk-fn) .vk-legend-top{font-size:1.58rem}
body.mk-focus-mode .vk-board[data-mode="preeti"] .vk-key:not(.vk-fn) .vk-legend-bottom{font-size:1.03rem}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1180px){
  .vk-legend-bottom{display:none}
  .vk-key{height:2.35rem}
}
@media (max-width:980px){
  .nk-workspace{grid-template-columns:1fr}
  .nk-ref-panel{order:3}
}
@media (max-width:760px){
  .nk-shell{padding:.4rem .6rem 2.4rem}
  .nk-toolbar select{max-width:6rem}
  .nk-tbtn{min-width:1.9rem;height:1.9rem}
  #editor{padding:1cm .9cm;height:180px;font-size:15px}
  .vk-legend-top{font-size:.86rem}
  .vk-key.vk-fn{font-size:.62rem}
  .vk-row{gap:.22rem}
  .vk-rows{gap:.22rem}
  .vk-key{height:2.05rem;border-radius:6px}
  .vk-board{padding:.55rem;border-radius:14px}
}
/* Below this width the 104-key desktop shape is genuinely unusable: swap to a
   compact 4-row touch layout (letters row only, no numbers/fn row) driven by
   the same data - see buildMobileKeyboard() usage of MK_KEYBOARD_ROWS in
   nk-editor.js. Numbers/symbols move to a togglable second panel. */
@media (max-width:600px){
  .vk-row[data-row="row1"]{display:none}
  .vk-row[data-row="row5"] .vk-key[data-code="ControlLeft"],
  .vk-row[data-row="row5"] .vk-key[data-code="ControlRight"],
  .vk-row[data-row="row5"] .vk-key[data-code="AltLeft"],
  .vk-row[data-row="row5"] .vk-key[data-code="AltRight"]{display:none}
  .vk-key{height:2.5rem;min-height:44px}
  .nk-kb-hint{display:none}
  .nk-doc-titlebar{padding:.4rem .6rem}
  .nk-status-bar{font-size:.68rem;gap:.5rem}
}

/* print */
@media print{
  .mk-nav,.footer,.nk-hero,.nk-mode-switch,.nk-toolbar,.nk-doc-titlebar,.nk-status-bar,.nk-ref-panel,.nk-kb-wrap,.nk-toast,.nk-quick-modes,.nk-content{display:none!important}
  .nk-page-wrap{background:#fff;border:0;padding:0}
  #editor{box-shadow:none;max-width:none;padding:0;height:auto;min-height:0;overflow:visible}
}

/* =====================================================================
   REFERENCE CONTENT LAYER - sits below the tool. Reuses the site-wide
   .article / .tbl / .accordion components (main.css, already loaded) for
   prose, tables and FAQ so this page matches every other content page's
   visual language; only the card-grid and step-list widgets below are
   specific to this tool, following the same #f8fafc/#e2e8f0/#2563eb tool-
   page token convention used in .nk-hero above.
   ===================================================================== */
.nk-quick-modes{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin:1.1rem 0}
.nk-qm-item{background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:1rem;padding:.9rem 1rem;transition:border-color .15s}
.nk-qm-item:hover{border-color:#bfdbfe}
.nk-qm-item h3{margin:0 0 .3rem;font-size:.86rem;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.nk-qm-item p{margin:0;font-size:.78rem;color:var(--muted);line-height:1.5}
[data-theme="dark"] .nk-qm-item{background:#0f172a;border-color:rgba(59,130,246,.25)}
[data-theme="dark"] .nk-qm-item:hover{border-color:#3b82f6}

.nk-content{margin-top:.5rem}

.nk-feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin:.9rem 0 1.1rem}
.nk-feature-card{background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:1rem;padding:1rem 1.1rem;transition:border-color .15s}
.nk-feature-card:hover{border-color:#bfdbfe}
.nk-feature-card h3{margin:0 0 .3rem;font-size:.88rem;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.nk-feature-card p{margin:0;font-size:.82rem;color:var(--muted);line-height:1.55}
[data-theme="dark"] .nk-feature-card{background:#0f172a;border-color:rgba(59,130,246,.25)}
[data-theme="dark"] .nk-feature-card:hover{border-color:#3b82f6}

.nk-steps{display:flex;flex-direction:column;gap:.6rem;margin:.9rem 0 1.1rem}
.nk-step{display:flex;gap:.8rem;align-items:flex-start;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:1rem;padding:.85rem 1rem}
.nk-step-num{flex-shrink:0;width:1.9rem;height:1.9rem;border-radius:50%;background:#2563eb;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.86rem}
.nk-step-body h3{margin:0 0 .2rem;font-size:.86rem;font-weight:800;color:var(--ink)}
.nk-step-body p{margin:0;font-size:.82rem;color:var(--muted);line-height:1.55}
[data-theme="dark"] .nk-step{background:#0f172a;border-color:rgba(59,130,246,.25)}

@media (max-width:760px){
  .nk-quick-modes{grid-template-columns:repeat(2,1fr)}
  .nk-feature-grid{grid-template-columns:1fr}
}