/* Minn Admin — app styles. Tokens + components translated from the Minn Admin design. */
/* Bundled locally so the admin makes no external font requests. Split by
script the way Google Fonts ships them, so a reader whose language needs no
accented Latin never downloads the extra files. A latin-only subset was the
whole story before, which left Polish, Czech, Hungarian, Turkish and
Vietnamese text falling back to a system font mid-sentence. Scripts these
ranges do not cover (Cyrillic, Greek, Arabic, Hebrew, CJK) still fall back,
which is correct: this typeface does not draw them. */
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/hanken-grotesk-vietnamese.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Hanken Grotesk';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/hanken-grotesk.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 100 800;
font-display: swap;
/* calt-off is a face default: form controls reset element-level ligature
properties via the UA `font` shorthand, and the :// ligature would
otherwise still fire inside those boxes. */
font-feature-settings: "calt" 0;
src: url('../fonts/jetbrains-mono-vietnamese.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 100 800;
font-display: swap;
font-feature-settings: "calt" 0;
src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 100 800;
font-display: swap;
font-feature-settings: "calt" 0;
src: url('../fonts/jetbrains-mono.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--font-ui: 'Hanken Grotesk', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
}
html[data-font="wordpress"] {
--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
--font-mono: Consolas, Monaco, monospace;
}
/* Density skin — same switch as the typeface. wp-admin is 13px body, 40px
fields, 2px corners, no tracking, subpixel smoothing. Scheme colors stay;
light-mode help text uses core's description gray. */
html[data-font="wordpress"] body {
font-size: 13px;
line-height: 1.4;
-webkit-font-smoothing: subpixel-antialiased;
}
html[data-font="wordpress"] .minn-page { padding: 20px 20px 48px; }
html[data-font="wordpress"] .minn-topbar { height: 48px; padding: 0 16px; }
html[data-font="wordpress"] .minn-topbar-title,
html[data-font="wordpress"] .minn-logo-name,
html[data-font="wordpress"] .minn-settings-title,
html[data-font="wordpress"] .minn-panel-title,
html[data-font="wordpress"] .minn-setup-title {
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
}
html[data-font="wordpress"] .minn-logo-mark {
width: 24px; height: 24px; border-radius: 2px; font-size: 13px; letter-spacing: 0; font-weight: 600;
}
html[data-font="wordpress"] .minn-nav-label {
font-size: 11px; letter-spacing: 0; text-transform: none; font-weight: 600;
}
html[data-font="wordpress"] .minn-nav-btn {
font-size: 14px;
font-weight: 400;
line-height: 1.3;
min-height: 34px;
border-radius: 2px;
padding: 0 8px;
}
html[data-font="wordpress"] .minn-nav-btn svg { width: 20px; height: 20px; }
html[data-font="wordpress"] .minn-nav-btn.active { font-weight: 400; }
html[data-font="wordpress"] .minn-search-btn {
font-size: 13px; border-radius: 2px; padding: 6px 8px;
}
html[data-font="wordpress"] .minn-card { border-radius: 2px; }
html[data-font="wordpress"] .minn-panel-pad { padding: 14px 16px; }
html[data-font="wordpress"] .minn-input {
border-radius: 2px;
font-size: 14px;
}
html[data-font="wordpress"] input.minn-input {
padding: 0 12px;
min-height: 40px;
line-height: normal;
}
html[data-font="wordpress"] input.minn-input.minn-ac-input,
html[data-font="wordpress"] select.minn-input {
padding: 0 12px;
padding-inline-end: 32px;
min-height: 40px;
line-height: 2.71428571; /* 38px inner, same as wp-admin select */
}
html[data-font="wordpress"] textarea.minn-input {
padding: 8px 12px;
min-height: 60px;
line-height: 1.42857143; /* 20px, same as wp-admin textarea */
}
/* wp-admin .form-wrap label: 13px, padding 2px 0, no extra margin — the
input sits against the label box (the ~4px you see is line-box, not gap). */
html[data-font="wordpress"] .minn-field-label {
font-size: 13px;
font-weight: 600;
margin-bottom: 0;
padding: 2px 0;
line-height: 1.4;
}
html[data-font="wordpress"] .minn-toggle-label { font-size: 13px; font-weight: 600; }
html[data-font="wordpress"] .minn-side-toggles .minn-toggle-label { font-size: 13px; font-weight: 400; }
html[data-font="wordpress"] .minn-toggle-desc,
html[data-font="wordpress"] .minn-settings-sub,
html[data-font="wordpress"] .minn-toggle-info .minn-toggle-desc {
font-size: 13px;
}
html[data-font="wordpress"][data-theme="light"] .minn-toggle-desc,
html[data-font="wordpress"][data-theme="light"] .minn-settings-sub {
color: #646970;
}
html[data-font="wordpress"][data-theme="light"] .minn-field-label {
color: #1d2327;
}
html[data-font="wordpress"] .minn-btn-primary,
html[data-font="wordpress"] .minn-btn-soft {
border-radius: 2px;
font-size: 13px;
font-weight: 500;
padding: 0 16px;
min-height: 40px;
line-height: 2.92307692; /* 38px inner, same as wp-admin .button */
}
html[data-font="wordpress"] .minn-comment-action {
border-radius: 2px;
font-size: 13px;
font-weight: 500;
padding: 0 12px;
min-height: 32px;
line-height: 2.30769231; /* wp-admin .button-compact */
display: inline-flex;
align-items: center;
}
html[data-font="wordpress"] .minn-pager-btn,
html[data-font="wordpress"] .minn-copy-btn,
html[data-font="wordpress"] .minn-find-btn,
html[data-font="wordpress"] .minn-cted-setbtn,
html[data-font="wordpress"] .minn-toast-btn,
html[data-font="wordpress"] .minn-lic-actions button,
html[data-font="wordpress"] .minn-load-more {
border-radius: 2px;
}
html[data-font="wordpress"] .minn-icon-btn,
html[data-font="wordpress"] .minn-topbar-ver,
html[data-font="wordpress"] .minn-settings-nav-item {
border-radius: 2px;
}
html[data-font="wordpress"] .minn-icon-btn { width: 30px; height: 30px; }
html[data-font="wordpress"] .minn-topbar-sub { border-radius: 2px; font-size: 12px; }
html[data-font="wordpress"] .minn-nav-count { border-radius: 2px; }
html[data-font="wordpress"] .minn-kbd { border-radius: 2px; }
html[data-font="wordpress"] .minn-new-menu,
html[data-font="wordpress"] .minn-ac-panel {
border-radius: 2px;
}
html[data-font="wordpress"] .minn-new-menu button,
html[data-font="wordpress"] .minn-site-switch,
html[data-font="wordpress"] .minn-site-switch-search,
html[data-font="wordpress"] .minn-sp-row,
html[data-font="wordpress"] .minn-user-logout {
border-radius: 2px;
}
html[data-font="wordpress"] .minn-profile-fields { gap: 10px; }
html[data-font="wordpress"] .minn-settings-body { gap: 18px; }
html[data-font="wordpress"] .minn-toggle-rows { gap: 10px; }
html[data-font="wordpress"] .minn-search-clear { border-radius: 2px; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
font-family: var(--font-ui);
-webkit-font-smoothing: antialiased;
font-size: 15px;
background: var(--bg);
color: var(--text);
/* JetBrains Mono ships programming ligatures on contextual alternates, and
one of them kerns the colon away from the slashes in `://` so a typed URL
reads as "https: /anchor.localhost" — it looks like Minn mangled the value
while the stored string was always correct.
Minn renders mono for DATA (urls, paths, versions, ip addresses), not for
code authoring, so contextual alternates are off. `no-contextual` is
deliberate rather than `none`: it leaves the sans face's ordinary prose
ligatures (fi, fl) alone. `calt` 0 is the OpenType switch those ligatures
actually key on: some engines (and every text box) ignore the variant
property. Inherited on the page; input/textarea re-inherit below because
the UA `font` shorthand resets both properties to initial. */
font-variant-ligatures: no-contextual;
font-feature-settings: "calt" 0;
}
/*
* Color schemes (user meta minn_admin_appearance).
* data-theme = light|dark surface mode (System/Light/Dark preference).
* data-scheme = named package | custom (inline CSS vars from JS).
* Status colors (--green/--amber/--red/…) stay semantic and are NOT scheme-bound.
* --accent-soft / --accent-ring always derive from --accent.
*/
:root, [data-theme="dark"] {
--bg:#0b0b0d; --bg2:#101013; --panel:#151518; --panel2:#1b1b1f; --hover:#202027;
--border:#242429; --border2:#31313a; --text:#ececed; --text2:#9d9da7; --text3:#8a8a94;
--accent:#6459f0; --accent2:#8a80f8; --accent-fg:#fff;
--accent-soft: color-mix(in srgb, var(--accent) 15%, transparent);
--accent-ring: color-mix(in srgb, var(--accent) 35%, transparent);
--green:#46b881; --amber:#e0a458; --red:#e46b6b; --blue:#5b9be0; --pink:#d073c0;
/* TEXT-role variants of the status colors (a11y pass): identical to the
semantic tokens in dark, darkened in light where the pastel originals
sit below 4.5:1 on white. Pills/dots/borders keep the semantic tokens. */
--green-text: var(--green); --amber-text: var(--amber);
--red-text: var(--red); --blue-text: var(--blue);
--shadow:0 12px 40px rgba(0,0,0,0.5); --shadow-sm:0 4px 16px rgba(0,0,0,0.35);
}
[data-theme="light"] {
--bg:#f6f6f7; --bg2:#ffffff; --panel:#ffffff; --panel2:#f4f4f6; --hover:#eeeef1;
--border:#e7e7ea; --border2:#dadade; --text:#1a1a1f; --text2:#5e5e69; --text3:#696973;
--green-text:#1d6f47; --amber-text:#89651d; --red-text:#ad4141; --blue-text:#2b68af;
--accent:#6a5ef2; --accent2:#5a4ef0; --accent-fg:#fff;
--accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
--accent-ring: color-mix(in srgb, var(--accent) 28%, transparent);
--shadow:0 12px 40px rgba(30,30,50,0.14); --shadow-sm:0 3px 14px rgba(30,30,50,0.08);
}
/* —— Named schemes: full packages (surfaces + brand) —— */
[data-theme="dark"][data-scheme="ocean"] {
--bg:#0a0e14; --bg2:#0e1420; --panel:#121a28; --panel2:#182234; --hover:#1e2a40;
--border:#243044; --border2:#334860; --text:#e8eef6; --text2:#93a4bc; --text3:#6a7c96;
--accent:#3b82f6; --accent2:#60a5fa; --accent-fg:#fff;
}
[data-theme="light"][data-scheme="ocean"] {
--bg:#f3f6fb; --bg2:#ffffff; --panel:#ffffff; --panel2:#eef3fa; --hover:#e4ebf6;
--border:#d5e0ee; --border2:#c0cfe3; --text:#152033; --text2:#4d607a; --text3:#7a8da8;
--accent:#2563eb; --accent2:#1d4ed8; --accent-fg:#fff;
}
[data-theme="dark"][data-scheme="forest"] {
--bg:#0a100c; --bg2:#0e1611; --panel:#131c16; --panel2:#1a261e; --hover:#213028;
--border:#2a3a30; --border2:#3a4e40; --text:#e8f0ea; --text2:#95ad9c; --text3:#6a8272;
--accent:#34a06c; --accent2:#4fc48a; --accent-fg:#fff;
}
[data-theme="light"][data-scheme="forest"] {
--bg:#f3f7f4; --bg2:#ffffff; --panel:#ffffff; --panel2:#eef4f0; --hover:#e4ede7;
--border:#d2e0d6; --border2:#b9ccbf; --text:#15241a; --text2:#4a6554; --text3:#73907d;
--accent:#1f8a56; --accent2:#176b43; --accent-fg:#fff;
}
[data-theme="dark"][data-scheme="amber"] {
--bg:#100e0a; --bg2:#16130e; --panel:#1c1812; --panel2:#262018; --hover:#2e271d;
--border:#3a3226; --border2:#4e4434; --text:#f3eee4; --text2:#b3a58c; --text3:#847866;
--accent:#d4923a; --accent2:#e8b05c; --accent-fg:#14110c;
}
[data-theme="light"][data-scheme="amber"] {
--bg:#faf6f0; --bg2:#ffffff; --panel:#ffffff; --panel2:#f5efe6; --hover:#eee4d6;
--border:#e4d6c0; --border2:#d2c0a4; --text:#2a2114; --text2:#6b5a3e; --text3:#978564;
--accent:#c47a18; --accent2:#a36512; --accent-fg:#fff;
}
[data-theme="dark"][data-scheme="rose"] {
--bg:#100a0e; --bg2:#160e14; --panel:#1c121a; --panel2:#261822; --hover:#301e2c;
--border:#3c2838; --border2:#523a4c; --text:#f4e8f0; --text2:#b89aaf; --text3:#876a7e;
--accent:#d063b0; --accent2:#e08cc8; --accent-fg:#fff;
}
[data-theme="light"][data-scheme="rose"] {
--bg:#faf3f7; --bg2:#ffffff; --panel:#ffffff; --panel2:#f6ecf2; --hover:#efdfe9;
--border:#e5cddc; --border2:#d4b3c8; --text:#2a1524; --text2:#6b4560; --text3:#987288;
--accent:#b84496; --accent2:#9a347d; --accent-fg:#fff;
}
[data-theme="dark"][data-scheme="coral"] {
--bg:#120c0b; --bg2:#18110f; --panel:#1e1614; --panel2:#2a1e1b; --hover:#342622;
--border:#42322e; --border2:#58443e; --text:#f4ebe8; --text2:#b8a09a; --text3:#87746e;
--accent:#e06b5a; --accent2:#f08a7c; --accent-fg:#fff;
}
[data-theme="light"][data-scheme="coral"] {
--bg:#faf4f2; --bg2:#ffffff; --panel:#ffffff; --panel2:#f6eeeb; --hover:#efe3df;
--border:#e5d2cc; --border2:#d4b8b0; --text:#2a1612; --text2:#6b4a42; --text3:#98756c;
--accent:#d14a38; --accent2:#b53a2a; --accent-fg:#fff;
}
[data-theme="dark"][data-scheme="teal"] {
--bg:#0a1010; --bg2:#0e1616; --panel:#121c1c; --panel2:#182626; --hover:#1e3030;
--border:#283c3c; --border2:#385050; --text:#e6f2f1; --text2:#92b0ae; --text3:#688482;
--accent:#2aa8a0; --accent2:#4bc4bc; --accent-fg:#fff;
}
[data-theme="light"][data-scheme="teal"] {
--bg:#f2f7f7; --bg2:#ffffff; --panel:#ffffff; --panel2:#eaf3f2; --hover:#dfeceb;
--border:#c9dedc; --border2:#b0ccc9; --text:#122422; --text2:#44615e; --text3:#6f8f8b;
--accent:#1f8a84; --accent2:#176e69; --accent-fg:#fff;
}
[data-theme="dark"][data-scheme="slate"] {
--bg:#0c0d10; --bg2:#111318; --panel:#16181e; --panel2:#1d2028; --hover:#262a34;
--border:#303540; --border2:#424856; --text:#e8eaef; --text2:#9aa1b0; --text3:#6d7484;
--accent:#7b8599; --accent2:#9aa3b5; --accent-fg:#fff;
}
[data-theme="light"][data-scheme="slate"] {
--bg:#f4f5f7; --bg2:#ffffff; --panel:#ffffff; --panel2:#eef0f3; --hover:#e5e8ed;
--border:#d5d9e0; --border2:#c0c5d0; --text:#181b22; --text2:#555c6b; --text3:#838a9a;
--accent:#5c6678; --accent2:#4a5363; --accent-fg:#fff;
}
[data-theme="dark"][data-scheme="dusk"] {
--bg:#0e0b12; --bg2:#14101a; --panel:#1a1522; --panel2:#221c2c; --hover:#2a2436;
--border:#342e42; --border2:#463e58; --text:#efeaf6; --text2:#a89ab8; --text3:#7a6e8e;
--accent:#9b7aef; --accent2:#b59af5; --accent-fg:#fff;
}
[data-theme="light"][data-scheme="dusk"] {
--bg:#f6f3fb; --bg2:#ffffff; --panel:#ffffff; --panel2:#f0ebf8; --hover:#e7dff3;
--border:#d8cee8; --border2:#c4b6db; --text:#1c1528; --text2:#5a4d72; --text3:#87789e;
--accent:#7c5ce0; --accent2:#6548c4; --accent-fg:#fff;
}
/* minn = root defaults. custom = inline CSS vars from JS (data-scheme="custom"). */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }
/* WebKit paints the scrollbar CORNER (where X/Y meet) white by default —
a bright square on dark UI (revision diff modal). Match the track. */
::-webkit-scrollbar-corner { background: transparent; }
@keyframes minnFadeUp { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: none; } }
@keyframes minnScaleIn { from { opacity:0; transform: translateY(-6px) scale(0.98); } to { opacity:1; transform: none; } }
@keyframes minnSlideIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes minnSlideInRtl { from { transform: translateX(-100%); } to { transform: none; } }
/* Keep the translateX(-50%) centering in every frame — without it the toast
animates in un-centered and snaps left at the end (reads as a sideways flash). */
@keyframes minnToastIn { from { opacity:0; transform: translateX(-50%) translateY(10px); } to { opacity:1; transform: translateX(-50%) translateY(0); } }
@keyframes minnPulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
/* Text pulse that never leaves AA territory: breathe between the two
passing text tiers instead of dropping opacity (loading indicators are
still text; axe samples mid-animation). */
@keyframes minnTextPulse { 0%,100% { color: var(--text3); } 50% { color: var(--text2); } }
@keyframes minnSpin { to { transform: rotate(360deg); } }
/* Re-renders of an already-open surface must not replay entrance animations. */
.no-anim, .no-anim * { animation-duration: 0s !important; }
.minn-boot-spinner {
position: fixed; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
border: 3px solid var(--border2); border-top-color: var(--accent); border-radius: 50%;
animation: minnSpin 0.7s linear infinite;
}
button { font-family: inherit; }
input, textarea {
font-family: inherit;
/* UA `font: -webkit-small-control` (and the equivalent elsewhere) resets
ligature + feature-settings to initial, undoing the body rule that exists
so typed URLs do not ligature. Re-inherit so .minn-input.mono is covered. */
font-variant-ligatures: inherit;
font-feature-settings: inherit;
}
a { color: var(--accent2); text-decoration: none; }
/* ===== Layout ===== */
/* dvh over vh where supported — vh overflows behind mobile Safari's collapsing URL bar. */
.minn-shell { display: flex; height: 100vh; height: 100dvh; width: 100%; background: var(--bg); color: var(--text); overflow: hidden; }
.minn-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
/* position:relative anchors the outline ping's absolute content coords.
overflow-anchor:none — Chrome's scroll anchoring loses its anchor node on
every full innerHTML re-render and "helpfully" jumps the scroller (the
plugin-toggle scroll bug); SPA views restore position themselves. */
/* scrollbar-gutter:stable reserves the scrollbar's width even when there's
nothing to scroll, so switching between a tall page (scrollbar shown) and a
short one (no scrollbar) never shifts the centered .minn-page sideways —
the settings section nav was drifting left/right between tabs. */
.minn-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; overflow-anchor: none; scrollbar-gutter: stable; }
.minn-page { animation: minnFadeUp 0.3s ease; padding: 26px 28px 60px; max-width: 1180px; margin: 0 auto; }
/* ===== Sidebar ===== */
.minn-sidebar {
width: 240px; flex-shrink: 0; background: var(--bg2); border-inline-end: 1px solid var(--border);
display: flex; flex-direction: column; padding: 14px 12px; gap: 2px;
}
.minn-logo { display: flex; align-items: center; gap: 10px; padding: 8px 8px 16px; }
/* The mark and the site name are SEPARATE controls since the front-bar
round: the mark (often the site's own icon) opens the front end, the
site name goes to Overview. The topbar's View-site globe is gone; this
IS the doorway to the site now. */
.minn-logo-marklink { display: flex; align-items: center; border-radius: 8px; flex: none; text-decoration: none; }
.minn-logo-marklink:hover .minn-logo-mark { filter: brightness(1.12); }
.minn-logo-mark {
width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent2));
display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 16px; letter-spacing: -0.5px; flex: none;
}
/* Site Icon variant: the site's own favicon fills the tile (Settings → Site
icon); falls back to the gradient "m" when no icon is set. */
.minn-logo-mark-icon { background: var(--panel2); background-size: cover; background-position: center; border: 1px solid var(--border); }
/* The wordmark is the SITE NAME now (falls back to "minn") — truncate so a
long site title can't push the version pill off or wrap the logo row. */
.minn-logo-name {
font-weight: 700; font-size: 17px; letter-spacing: -0.3px; min-width: 0; flex: 1;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
background: none; border: none; padding: 0; font-family: inherit;
color: inherit; cursor: pointer;
}
.minn-logo-name:hover { color: var(--accent2); }
/* Multisite site switcher: a quiet chevron beside the wordmark (absent off
multisite and when the user belongs to only one site). flex:none so a long
site name truncates rather than squeezing the control away. */
.minn-site-switch {
display: flex; align-items: center; justify-content: center; flex: none;
width: 24px; height: 24px; padding: 0; border: none; border-radius: 7px;
background: none; color: var(--text3); cursor: pointer;
}
.minn-site-switch:hover { background: var(--panel2); color: var(--text); }
.minn-site-switch svg { width: 15px; height: 15px; }
/* Inline multisite finder: menu-sized, one quiet field, five results max. */
.minn-site-switch-menu { width: 238px; }
.minn-site-switch-search {
display: flex; align-items: center; gap: 7px; margin: 4px; padding: 6px 8px;
border: 1px solid var(--border); border-radius: 8px; background: var(--bg2);
color: var(--text3);
}
.minn-site-switch-search:focus-within { border-color: var(--accent); color: var(--text2); }
.minn-site-switch-search svg { width: 14px; height: 14px; flex: none; }
.minn-site-switch-search input {
width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: none;
color: var(--text); font: inherit; font-size: 13px;
}
.minn-site-switch-search input::placeholder { color: var(--text3); }
/* Chromium paints a bulky clear button into type=search by default. */
.minn-site-switch-search input::-webkit-search-cancel-button { display: none; }
.minn-site-switch-menu #minn-site-switch-results button { padding-top: 7px; padding-bottom: 7px; }
.minn-site-switch-menu #minn-site-switch-results button.is-keyboard { background: var(--hover); }
.minn-site-switch-empty { padding: 8px 11px; color: var(--text3); font-size: 12.5px; }
/* Site picker (networks with more sites than the switcher menu holds). */
.minn-sp-list { max-height: 52vh; overflow-y: auto; padding: 0 10px 12px; }
.minn-sp-row {
display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: start;
padding: 9px 11px; border: none; border-radius: 9px; background: none;
color: var(--text); cursor: pointer;
}
.minn-sp-row:hover:not(:disabled) { background: var(--panel2); }
.minn-sp-row:disabled { cursor: default; }
.minn-sp-name { font-weight: 600; font-size: 14px; }
.minn-sp-url { color: var(--text3); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minn-sp-here { margin-inline-start: auto; color: var(--accent2); font-size: 11.5px; font-weight: 600; flex: none; }
/* Version + changelog live in the topbar actions (GH #5: a badge beside the
logo truncated longer site names, so it moved up beside the view-site
button). Sized to sit flush with the .minn-icon-btn row. */
.minn-topbar-ver { height: 34px; padding: 0 11px; display: flex; align-items: center; font-size: 12px; font-family: inherit; color: var(--text3); background: transparent; border: 1px solid transparent; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.minn-topbar-ver:hover { color: var(--text); background: var(--hover); }
/* Changelog modal — the mini markdown renderer's vocabulary. */
.minn-changelog { padding: 4px 18px 18px; max-height: 64vh; overflow-y: auto; font-size: 13.5px; line-height: 1.65; color: var(--text2); }
/* Sectioned changelog modal (the minnadmin.com pattern in-app): version rail
beside one release at a time; the rail becomes a horizontal chip strip on
small screens, scrolling in its OWN overflow so the modal never widens. */
.minn-cl-layout { display: grid; grid-template-columns: 172px minmax(0, 1fr); min-height: 0; }
.minn-cl-rail { border-inline-end: 1px solid var(--border); max-height: 64vh; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.minn-cl-ver { text-align: start; background: none; border: 1px solid transparent; border-radius: 8px; padding: 7px 10px; cursor: pointer; font-family: inherit; flex-shrink: 0; }
.minn-cl-ver-v { display: block; font-family: var(--font-mono); font-size: 12.5px; color: var(--text); }
.minn-cl-ver-d { display: block; font-size: 11.5px; color: var(--text3); margin-top: 1px; }
.minn-cl-ver:hover { background: var(--hover); }
.minn-cl-ver.sel { background: var(--accent-soft, rgba(110,98,245,0.14)); border-color: var(--accent); }
.minn-cl-ver.sel .minn-cl-ver-v { color: var(--accent2); }
@media (max-width: 640px) {
.minn-cl-layout { display: flex; flex-direction: column; }
.minn-cl-rail { flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; border-inline-end: 0; border-bottom: 1px solid var(--border); padding: 8px 10px; gap: 6px; }
.minn-cl-ver { padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; }
.minn-cl-ver.sel { border-color: var(--accent); }
.minn-cl-ver-d { display: none; }
.minn-changelog { max-height: 56vh; }
}
.minn-cl-meta { padding: 12px 18px 10px; font-size: 12.5px; color: var(--text3); }
/* On Minn Engine: the engine's changelog and Minn Admin's, one tab each. */
.minn-cl-tabs { margin: 12px 18px 0; width: max-content; max-width: calc(100% - 36px); }
/* Update everything: the batch as a live list. */
.minn-bulk-phase { padding: 10px 18px 6px; font-size: 13px; color: var(--text2); }
.minn-bulk-phase.is-ok { color: var(--green-text); }
.minn-bulk-phase.is-bad { color: var(--red-text); }
.minn-bulk-list { max-height: 60vh; overflow-y: auto; padding: 4px 8px 8px; }
.minn-bulk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(150px, auto); gap: 14px; align-items: center; padding: 6px 10px; border-radius: 8px; font-size: 13.5px; }
.minn-bulk-row:nth-child(odd) { background: var(--panel2); }
.minn-bulk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minn-bulk-ver { font-family: var(--font-mono); font-size: 12px; color: var(--text3); white-space: nowrap; }
.minn-bulk-st { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.minn-bulk-st.is-dim { color: var(--text3); }
.minn-bulk-st.is-ok { color: var(--green-text); }
.minn-bulk-st.is-bad { color: var(--red-text); }
.minn-bulk-st.is-live { color: var(--accent2); }
.minn-bulk-st.is-live svg { width: 12px; height: 12px; animation: minn-spin 1s linear infinite; }
@keyframes minn-spin { to { transform: rotate(360deg); } }
.minn-bulk-row.is-done .minn-bulk-name, .minn-bulk-row.is-fetched .minn-bulk-name { color: var(--text); }
.minn-bulk-row.is-queued .minn-bulk-name { color: var(--text2); }
@media (max-width: 640px) {
.minn-bulk-row { grid-template-columns: minmax(0, 1fr) auto; }
.minn-bulk-ver { display: none; }
}
.minn-cl-notice { color: var(--amber-text); }
.minn-cl-empty { padding: 10px 18px 22px; font-size: 13.5px; color: var(--text2); }
.minn-cl-empty p { margin: 6px 0; }
/* A vendor changelog arrives as reduced HTML: versions are h4s (their
readme convention), so inside the plugin modal they read as body text
headings rather than the tiny caps Minn's own Added/Fixed labels use. */
.minn-changelog p { margin: 6px 0 10px; }
.minn-changelog h3 { font-size: 15px; color: var(--text); margin: 18px 0 6px; padding-top: 14px; border-top: 1px solid var(--border); }
.minn-changelog h3:first-child { margin-top: 6px; padding-top: 0; border-top: 0; }
/* The user-guide modal shares the changelog reader shell, plus the guide's
richer vocabulary: ordered lists, italics and the shortcuts table. */
.minn-guide ol, .minn-guide ul { margin: 8px 0 12px; padding-inline-start: 22px; }
.minn-guide li { margin: 4px 0; }
.minn-guide i { color: var(--text2); }
.minn-guide table { width: 100%; border-collapse: collapse; margin: 10px 0 14px; }
.minn-guide th { text-align: start; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text3); border-bottom: 1px solid var(--border2); padding: 4px 10px 4px 0; }
.minn-guide td { border-bottom: 1px solid var(--border); padding: 6px 10px 6px 0; vertical-align: top; }
.minn-changelog h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text3); margin: 14px 0 4px; }
.minn-changelog ul { margin: 4px 0 10px; padding-inline-start: 20px; }
.minn-changelog li { margin: 4px 0; }
.minn-changelog code { font-family: var(--font-mono); font-size: 0.88em; background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
.minn-changelog a { color: var(--accent2); }
.minn-changelog-foot { padding: 10px 18px 14px; border-top: 1px solid var(--border); font-size: 12.5px; }
.minn-changelog-foot a { color: var(--accent2); text-decoration: none; }
.minn-changelog-foot a:hover { text-decoration: underline; }
.minn-search-btn {
display: flex; align-items: center; gap: 9px; width: 100%; background: var(--panel); border: 1px solid var(--border);
color: var(--text3); padding: 8px 10px; border-radius: 9px; cursor: pointer; font-size: 14px; margin-bottom: 10px;
}
.minn-search-btn:hover { border-color: var(--border2); color: var(--text2); }
.minn-kbd {
margin-inline-start: auto; font-family: var(--font-mono); font-size: 12px; background: var(--bg);
border: 1px solid var(--border); padding: 1px 6px; border-radius: 5px;
}
/* The nav region scrolls on short viewports; logo, search and user pin. */
.minn-nav-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin: 0 -4px 4px; padding: 0 4px; }
.minn-nav-label { font-size: 12px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.6px; padding: 8px 10px 4px; }
.minn-nav-label + .minn-nav-label, .minn-nav-label.later { padding-top: 14px; }
/* Group labels are collapse toggles (Workspace / Commerce / Tools / Manage). */
button.minn-nav-label { display: flex; align-items: center; width: 100%; background: none; border: 0; cursor: pointer; font-family: inherit; text-align: start; }
button.minn-nav-label svg { width: 12px; height: 12px; margin-inline-start: auto; opacity: 0; transition: transform 0.15s ease, opacity 0.15s ease; }
button.minn-nav-label:hover svg, button.minn-nav-label.collapsed svg { opacity: 0.7; }
button.minn-nav-label.collapsed svg { transform: rotate(-90deg); }
button.minn-nav-label:hover { color: var(--text2); }
.minn-nav-btn {
display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; background: transparent;
color: var(--text2); border: none; padding: 8px 10px; border-radius: 9px; cursor: pointer; font-size: 14.5px; font-weight: 500;
}
.minn-nav-btn:hover { background: var(--hover); color: var(--text); }
.minn-nav-btn.active { background: var(--accent-soft); color: var(--accent2); font-weight: 600; }
.minn-nav-count { margin-inline-start: auto; font-size: 12px; color: var(--text3); background: var(--panel); padding: 1px 7px; border-radius: 20px; }
.minn-nav-dot { margin-inline-start: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
/* Notice action links — buttons inside the row; ↗ ones open a new tab. */
.minn-notif-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.minn-notif-link {
font-size: 12.5px; font-weight: 600; color: var(--accent2); background: var(--accent-soft);
border: 1px solid transparent; border-radius: 7px; padding: 3px 10px; cursor: pointer;
}
.minn-notif-link:hover { border-color: var(--accent); }
.minn-notif-link:disabled { opacity: 0.6; cursor: default; }
.minn-notif-hide {
font-size: 12.5px; font-weight: 600; color: var(--text3); background: transparent;
border: 1px solid var(--border); border-radius: 7px; padding: 3px 10px; cursor: pointer;
}
.minn-notif-hide:hover { color: var(--text); border-color: var(--text3); }
/* Surface setup gate — replaces a surface's collection while its plugin
still needs its own first-run install (descriptor `setup` key).
Redirection is the reference. */
.minn-surface-setup { max-width: 640px; margin: 26px auto 0; padding: 22px 24px; display: flex; flex-direction: column; gap: 18px; }
.minn-setup-head { display: flex; gap: 14px; align-items: flex-start; }
.minn-setup-head > svg { flex: none; width: 22px; height: 22px; color: var(--accent2); margin-top: 2px; }
.minn-setup-title { font-size: 16.5px; font-weight: 700; letter-spacing: -0.2px; }
.minn-setup-note { font-size: 13.5px; color: var(--text2); line-height: 1.55; margin-top: 6px; }
.minn-setup-opts { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; }
.minn-setup-opt { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: var(--text); }
.minn-setup-opt .minn-switch { flex: none; margin-top: 1px; }
.minn-setup-foot { display: flex; align-items: center; gap: 12px; }
.minn-setup-hint { font-size: 12.5px; color: var(--text3); }
/* Surface status card — server-built model above a surface's list (stat
rows · copyable command · action buttons). Disembark is the reference. */
.minn-surface-status { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; margin-bottom: 14px; }
.minn-sstat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.minn-sstat-head .minn-sstat-actions { flex: 0 1 auto; min-width: 0; margin-inline-start: auto; }
/* An armed inline action form (Send a test email) needs the full row. */
.minn-sstat-head .minn-sstat-actions:has(.minn-action-fields) { flex: 1 1 100%; margin-inline-start: 0; }
.minn-sstat-rows { display: flex; flex-wrap: wrap; gap: 10px 36px; }
.minn-sstat { min-width: 130px; }
.minn-sstat-label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text3); margin-bottom: 3px; }
.minn-sstat-value { font-size: 17px; font-weight: 650; color: var(--text); }
.minn-sstat-hint { font-size: 12px; color: var(--text3); margin-top: 2px; }
/* Status/action editor panels (statusRoute) — the door modal's body. Rows
reuse the surface stat styles above; actions stack full-width with
per-verb hints (the wp-admin metabox shape, themed). */
.minn-status-panel { display: flex; flex-direction: column; gap: 18px; }
.minn-status-note { margin: 0; font-size: 13.5px; color: var(--text2); }
.minn-sstat-value.green { color: var(--green-text); }
.minn-sstat-value.amber { color: var(--amber-text); }
.minn-sstat-value.red { color: var(--red-text); }
.minn-status-acts { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--border); padding-top: 16px; }
.minn-status-act .minn-btn-soft { width: 100%; text-align: center; }
/* Status-card chart: compact Overview bars. Tip reuses #minn-chart-tip.
Specificity must beat the standalone .minn-chart { height: 150px }. */
.minn-sstat-chart { min-width: 0; }
.minn-sstat-chart .minn-sstat-label { margin-bottom: 10px; }
.minn-sstat-chart .minn-chart { height: 88px; gap: 3px; }
.minn-sstat-cmd { min-width: 0; }
.minn-sstat-cmd-box {
display: flex; align-items: center; gap: 10px; width: 100%; text-align: start;
font-family: var(--font-mono); font-size: 12.5px; color: var(--text);
background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
padding: 9px 12px; cursor: pointer;
}
.minn-sstat-cmd-box code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.minn-sstat-cmd-box svg { flex: none; color: var(--text3); }
.minn-sstat-cmd-box:hover { border-color: var(--accent); }
.minn-sstat-cmd-box:hover svg { color: var(--accent2); }
.minn-sstat-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* "Update everything" pinned under the notification tabs. */
.minn-update-all-row { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 10px; border-bottom: 1px solid var(--border); }
.minn-update-all-row .minn-btn-primary { justify-content: center; width: 100%; }
.minn-update-all-sub { font-size: 12.5px; color: var(--text3); text-align: center; }
/* Topbar core-update chip — shown only while an update pends. The explicit
display would defeat the hidden attribute, hence :not([hidden]). */
.minn-core-chip[hidden] { display: none; }
.minn-core-chip:not([hidden]) {
display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600;
color: var(--amber-text); background: rgba(224,164,88,0.14); border: 1px solid rgba(224,164,88,0.35);
padding: 6px 12px; border-radius: 9px; cursor: pointer; white-space: nowrap;
}
.minn-core-chip:hover { border-color: var(--amber); }
.minn-core-chip svg { width: 14px; height: 14px; flex: none; }
.minn-core-chip.is-busy svg { animation: minn-upd-rot 1.1s linear infinite; }
/* Bulk-update progress chip — accent sibling of the core/vis pills, visible
on every route while "Update everything" (or a core update) runs; the
spinning icon is the ambient signal once the notification panel closes. */
.minn-upd-chip[hidden] { display: none; }
.minn-upd-chip:not([hidden]) {
display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600;
color: var(--accent2); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
padding: 6px 12px; border-radius: 9px; cursor: pointer; white-space: nowrap; max-width: 280px;
}
.minn-upd-chip:hover { border-color: var(--accent); }
.minn-upd-chip span { overflow: hidden; text-overflow: ellipsis; }
.minn-upd-chip svg { width: 14px; height: 14px; flex: none; animation: minn-upd-rot 1.1s linear infinite; }
@keyframes minn-upd-rot { to { transform: rotate(360deg); } }
/* Background-job chip: the updates pill, spinning while running, quiet
green once done, red when it failed or was stopped. */
.minn-job-chip.is-done { color: var(--green-text, #2f7a4b); background: rgba(72,170,110,0.14); border-color: rgba(72,170,110,0.35); }
.minn-job-chip.is-error { color: var(--red-text, #b13a3a); background: rgba(224,88,88,0.12); border-color: rgba(224,88,88,0.35); }
.minn-job-chip:not(.is-running) svg { animation: none; }
.minn-job-modal { max-width: 460px; }
.minn-job-body { padding: 18px 20px 6px; display: flex; flex-direction: column; gap: 10px; }
.minn-job-state { font-size: 13px; font-weight: 600; color: var(--muted); }
.minn-job-state.done { color: var(--green-text, #2f7a4b); }
.minn-job-state.error, .minn-job-state.canceled { color: var(--red-text, #b13a3a); }
.minn-job-bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.minn-job-bar-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.4s ease; }
.minn-job-bar.indeterminate .minn-job-bar-fill { animation: minn-job-slide 1.4s ease-in-out infinite; }
@keyframes minn-job-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
.minn-job-msg { font-size: 13px; color: var(--text); min-height: 18px; }
.minn-job-result { align-self: flex-start; }
/* Site-visibility chip — same amber pill as the core-update chip, on every
route until the site is fully public again. */
.minn-vis-chip[hidden] { display: none; }
.minn-vis-chip:not([hidden]) {
display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600;
color: var(--amber-text); background: rgba(224,164,88,0.14); border: 1px solid rgba(224,164,88,0.35);
padding: 6px 12px; border-radius: 9px; cursor: pointer; white-space: nowrap;
}
.minn-vis-chip:hover { border-color: var(--amber); }
.minn-vis-chip svg { width: 14px; height: 14px; }
/* Switched-session escape (User Switching): the plugin's own back-link
lives in the admin bar Minn never renders, so the nav carries it. The
switchback bar takes over margin-top:auto so the user card stacks
directly beneath it. */
.minn-switchback { margin-top: auto; display: flex; align-items: center; gap: 7px; padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--amber-text); background: rgba(224,164,88,0.09); border: 1px solid rgba(224,164,88,0.28); border-radius: 9px; text-decoration: none; }
.minn-switchback:hover { background: rgba(224,164,88,0.16); }
.minn-switchback svg { width: 13px; height: 13px; flex: none; }
.minn-switchback + .minn-user { margin-top: 8px; }
.minn-user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-top: 1px solid var(--border); cursor: pointer; border-radius: 9px; }
.minn-user:hover { background: var(--hover); }
.minn-user-avatar {
width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--pink), var(--amber));
flex-shrink: 0; object-fit: cover; display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 800; font-size: 13px;
}
.minn-user-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minn-user-role { font-size: 12px; color: var(--text3); }
/* Account actions: WordPress admin (a quiet, discoverable exit — the
escape is deliberately here beside logout, never a prominent topbar
button; the palette carries it too) then Log out. */
.minn-user-acts { margin-inline-start: auto; display: flex; align-items: center; gap: 2px; }
.minn-user-logout { color: var(--text3); background: none; border: none; cursor: pointer; padding: 6px; border-radius: 7px; display: flex; }
.minn-user-logout:hover { background: var(--hover); color: var(--text); }
/* ===== Topbar ===== */
.minn-topbar {
height: 56px; flex-shrink: 0; border-bottom: 1px solid var(--border); display: flex; align-items: center;
padding: 0 20px; gap: 12px; background: var(--bg);
}
/* An h1 since the a11y pass (every page needs one; the topbar title IS the
page title) — margin reset kills the UA heading margins. */
.minn-topbar-title { font-weight: 700; font-size: 16px; letter-spacing: -0.2px; margin: 0; }
.minn-topbar-sub { font-size: 13px; color: var(--text3); background: var(--panel); border: 1px solid var(--border); padding: 3px 9px; border-radius: 20px; }
/* The pill is its CONTENT's frame, so a route or surface with nothing to say
there must not leave an empty capsule floating beside the title. */
.minn-topbar-sub:empty { display: none; }
/* Family provider switcher — sits where the static sub badge was; opens a
combobox of installed adapters (Code Snippets / WPCode / Fluent…). */
.minn-topbar-sub:has(.minn-surface-switch) {
padding: 0; background: transparent; border: 0; overflow: visible;
}
.minn-surface-switch { min-width: 140px; max-width: 220px; }
.minn-surface-switch-input {
font-size: 13px; color: var(--text3); background: var(--panel);
border: 1px solid var(--border); padding: 3px 28px 3px 10px; border-radius: 20px;
height: auto; min-height: 0; line-height: 1.4; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 9px center;
}
.minn-surface-switch-input:focus {
border-color: var(--accent); color: var(--text); outline: none;
}
.minn-surface-switch .minn-ac-panel {
min-width: 180px; inset-inline-end: 0; inset-inline-start: auto;
}
.minn-topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }
.minn-icon-btn {
position: relative; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
background: transparent; border: 1px solid var(--border); border-radius: 9px; color: var(--text2); cursor: pointer;
}
.minn-icon-btn:hover { background: var(--hover); color: var(--text); }
/* Topbar controls sit quiet like the Minn Bar's (the front-end bar set the
reference): no resting box, just the soft fill on hover. Card-level
.sm utilities keep their border — they need the edge on busy surfaces. */
.minn-topbar .minn-icon-btn { border-color: transparent; }
.minn-icon-btn.sm { width: 26px; height: 26px; border-radius: 7px; font-size: 13px; flex-shrink: 0; }
.minn-new-menu {
position: fixed; z-index: 60; min-width: 150px; padding: 5px;
background: var(--panel); border: 1px solid var(--border2); border-radius: 11px;
box-shadow: var(--shadow); animation: minnScaleIn 0.12s ease;
}
.minn-new-menu button {
display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 11px;
background: none; border: none; border-radius: 8px; color: var(--text);
font-size: 14px; font-weight: 500; cursor: pointer; text-align: start;
}
.minn-new-menu button:hover { background: var(--hover); }
.minn-new-menu button.danger { color: var(--red); }
.minn-new-menu button.is-on, .minn-new-menu a.is-on {
color: var(--accent2); font-weight: 600;
}
.minn-new-menu a {
display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 11px;
border-radius: 8px; color: var(--text); font-size: 14px; font-weight: 500; text-decoration: none;
}
.minn-new-menu a:hover { background: var(--hover); }
.minn-table-menu { min-width: 180px; }
.minn-row-menu { min-width: 200px; }
.minn-ctx-menu { min-width: 180px; max-height: 80vh; overflow-y: auto; }
.minn-new-menu a.danger, .minn-new-menu button.danger { color: var(--red); }
.minn-row-end { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
/* Style variation cards (Design → Styles). */
.minn-style-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.minn-style-card-wrap { position: relative; display: flex; }
.minn-style-card-wrap .minn-style-card { flex: 1; }
.minn-style-more { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 8px; border: 0; background: transparent; color: var(--text3); font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.15s; }
.minn-style-card-wrap:hover .minn-style-more, .minn-style-more:focus-visible { opacity: 1; }
.minn-style-more:hover { background: var(--hover); color: var(--text); }
/* Design notes above the style cards / menu list (customized-styles warning, inline-menu note): breathe before the grid at the grid's own gap. */
.minn-nav-inline-note { margin-bottom: 12px; line-height: 1.5; }
/* Current look card (Design → Styles): effective palette / fonts / sizes /
layout / background rows, each a deep link to its Site Editor panel. */
.minn-look { margin-bottom: 12px; }
.minn-look-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.minn-look-title { font-weight: 600; font-size: 14px; }
.minn-look-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.minn-look-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.minn-look-row { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 18px; border: 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; min-width: 0; background: transparent; font: inherit; text-align: start; width: 100%; cursor: default; }
button.minn-look-row, a.minn-look-row { cursor: pointer; }
button.minn-look-row:hover, a.minn-look-row:hover { background: var(--hover); }
button.minn-look-row:hover .minn-look-go, a.minn-look-row:hover .minn-look-go { opacity: 1; }
button.minn-look-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.minn-look-label { font-size: 12px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.minn-look-value { font-size: 13.5px; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.4; }
.minn-look-go { font-size: 12px; color: var(--accent); opacity: 0.55; white-space: nowrap; }
.minn-look-swatches { display: inline-flex; flex-wrap: wrap; gap: 5px; min-width: 0; max-width: 100%; }
.minn-look-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border); flex: none; display: inline-block; }
.minn-look-swatch.is-custom { box-shadow: 0 0 0 2px var(--accent-soft, rgba(100,100,255,.18)); }
.minn-look-muted { color: var(--text3); }
.minn-look-foot { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 12px 18px 14px; align-items: start; }
.minn-look-foot .minn-look-value { display: block; }
.minn-look-changes { margin: 0; padding: 0 0 0 16px; font-size: 13px; line-height: 1.55; columns: 2; column-gap: 28px; }
.minn-look-changes li { break-inside: avoid; }
.minn-look-changes.is-applied { columns: 1; list-style: none; padding: 0; font-weight: 600; }
@media (max-width: 720px) { .minn-look-changes { columns: 1; } .minn-look-row, .minn-look-foot { grid-template-columns: 76px minmax(0, 1fr) auto; } }
/* Specimen: the site's own styles on a heading, paragraph, link, button. */
.minn-look-specimen { padding: 14px 18px 4px; }
.minn-look-spec { border: 1px solid var(--border); border-radius: 10px; padding: 22px 24px; overflow: hidden; pointer-events: none; }
.minn-look-spec h2 { margin: 0 0 0.5em; }
.minn-look-spec p { margin: 0 0 1em; max-width: 60ch; }
.minn-look-spec .wp-block-buttons { margin: 0; }
.minn-look-who { color: var(--text3); font-size: 12px; }
.minn-gs-hist-applied { font-weight: 600; margin-bottom: 2px; }
.minn-paste-look { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.minn-paste-look textarea { width: 100%; box-sizing: border-box; font-size: 12.5px; line-height: 1.45; resize: vertical; color-scheme: dark; }
[data-theme="light"] .minn-paste-look textarea { color-scheme: light; }
/* Edit look form (inside the Current look card). */
.minn-look-form { padding: 4px 18px 14px; display: flex; flex-direction: column; gap: 18px; }
.minn-look-fsec-title { font-size: 12px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; margin: 10px 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.minn-look-beyond { font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text3); text-decoration: none; }
.minn-look-beyond:hover { color: var(--accent); }
.minn-look-fsec { border-radius: 10px; transition: box-shadow 0.4s ease; }
.minn-look-fsec.is-focus { box-shadow: 0 0 0 2px var(--accent); padding: 0 10px 8px; margin: 0 -10px; }
.minn-look-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px 22px; }
.minn-look-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.minn-look-field.is-color { grid-column: span 1; }
.minn-look-flabel { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.minn-look-clear { border: 0; background: var(--bg2); color: var(--text2); width: 18px; height: 18px; border-radius: 50%; font-size: 12px; line-height: 1; cursor: pointer; padding: 0; }
.minn-look-clear:hover { background: var(--hover); color: var(--text); }
.minn-look-fcontrol { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.minn-look-fcontrol .minn-input { width: 100%; box-sizing: border-box; }
.minn-look-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.minn-look-chip { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); cursor: pointer; padding: 0; position: relative; }
.minn-look-chip:hover { transform: scale(1.08); }
.minn-look-chip.is-on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.minn-look-fbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--line); padding-top: 12px; }
.minn-look-con { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 12.5px; font-variant-numeric: tabular-nums; margin-right: 4px; }
.minn-look-con.ok { background: var(--ok-bg, rgba(46,160,67,.12)); color: var(--ok, #1f7a35); }
.minn-look-con.warn { background: var(--warn-bg, rgba(212,110,0,.14)); color: var(--warn, #a15c00); }
/* Style history modal rows. */
.minn-gs-hist { display: flex; flex-direction: column; }
.minn-gs-hist-row { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 13px; }
.minn-gs-hist-row:last-child { border-bottom: 0; }
.minn-gs-hist-row.is-current { background: var(--bg2); }
.minn-gs-hist-when { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12.5px; }
.minn-gs-hist-changes { margin: 0; padding: 0 0 0 16px; line-height: 1.5; }
.minn-gs-hist-act { align-self: center; }
@media (max-width: 640px) { .minn-gs-hist-row { grid-template-columns: minmax(0, 1fr) auto; } .minn-gs-hist-what { grid-column: 1 / -1; } }
.minn-style-card {
display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 15px 16px;
background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
cursor: pointer; text-align: start; font-family: inherit; color: var(--text);
}
.minn-style-card:hover { background: var(--hover); }
.minn-style-card.is-active { border-color: var(--accent); cursor: default; }
.minn-style-swatches { display: flex; gap: 6px; }
.minn-style-swatches span { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); }
.minn-style-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.minn-style-fonts { color: var(--text3); font-size: 12.5px; }
/* Marks a row whose click leaves Minn for the Site Editor. */
.minn-row-ext { color: var(--text3); font-size: 13px; line-height: 1; padding: 0 2px; }
.minn-menu-row:hover .minn-row-ext { color: var(--text2); }
.minn-row-more {
width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 7px;
background: none; color: var(--text2); cursor: pointer; font-size: 15px; line-height: 1;
opacity: 0; transition: opacity 0.12s ease;
}
.minn-table-row:hover .minn-row-more { opacity: 1; }
.minn-row-more:hover { background: var(--hover); color: var(--text); }
/* Hover eye = one-click Quick view (orders); same reveal as the ⋯ button. */
.minn-row-quick { display: inline-flex; align-items: center; justify-content: center; }
.minn-row-quick svg { width: 14px; height: 14px; }
.minn-new-menu-label {
margin: 5px 4px 1px; padding: 4px 7px 2px; border-top: 1px solid var(--border);
color: var(--text3); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
/* The rule is a SEPARATOR from the entries above, so a heading that opens a
menu must not draw one (a network-active plugin's menu starts at Links —
it has no activate/delete entries above it). */
.minn-new-menu-label:first-child { margin-top: 2px; border-top: 0; }
.minn-icon-btn.sm:disabled { opacity: 0.35; cursor: default; }
.minn-icon-btn.sm.danger { color: var(--red); }
/* ===== Menus & Widgets ===== */
/* One compact row: title + each "Location [menu ▾]" pair, wrapping as needed. */
.minn-menu-locations {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px 28px;
padding: 13px 20px; margin-bottom: 16px;
}
.minn-menu-locations .minn-panel-title { font-size: 14.5px; margin-inline-end: 4px; }
.minn-loc-group { display: flex; align-items: center; gap: 9px; }
.minn-loc-group .minn-side-key { white-space: nowrap; }
.minn-loc-ac { width: 200px; }
.minn-loc-ac .minn-ac-input { padding-top: 6px; padding-bottom: 6px; font-size: 13.5px; }
.minn-menu-items { padding: 6px 0; margin-bottom: 16px; }
.minn-menu-row {
display: flex; align-items: center; gap: 12px; padding: 9px 16px 9px;
border-bottom: 1px solid var(--border); cursor: pointer;
}
.minn-menu-row:last-child { border-bottom: none; }
.minn-menu-grip { display: flex; align-items: center; flex-shrink: 0; color: var(--text3); cursor: grab; padding: 4px 0; margin: 0 -4px 0 -6px; opacity: 0.55; }
.minn-menu-row:hover .minn-menu-grip,
.minn-widget-row:hover .minn-menu-grip { opacity: 1; }
.minn-menu-grip:active { cursor: grabbing; }
.minn-menu-row.dragging,
.minn-widget-row.dragging { opacity: 0.35; }
.minn-menu-row.drop-above,
.minn-widget-row.drop-above { box-shadow: inset 0 2px 0 var(--accent); }
.minn-menu-row.drop-below,
.minn-widget-row.drop-below { box-shadow: inset 0 -2px 0 var(--accent); }
.minn-menu-row:hover { background: var(--hover); }
.minn-menu-row.editing { cursor: default; }
.minn-menu-row.editing:hover { background: none; }
.minn-menu-info { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; }
/* The name, the kind chip and the description share one flex line. Flex
shrinks items in proportion to their natural width, so a paragraph-long
template description (core's archive template runs 200 characters) took a
slice out of the short name beside it and "All Archives" clipped to
"All Arc…" while the description wrapped happily. The description now
starts from a zero basis and only grows into what the name leaves; the
name keeps its full width up to most of the row, where its ellipsis
finally applies. */
.minn-menu-info > .minn-row-title { flex: 0 0 auto; max-width: 70%; }
.minn-menu-info > .minn-row-slug { flex: 1 1 0; }
/* At phone width there is no room beside the name for a paragraph, and a
description squeezed into a two-word column reads as broken. The
description drops to its own line under the name and chip. */
@media (max-width: 640px) {
.minn-menu-info { flex-wrap: wrap; row-gap: 2px; }
.minn-menu-info > .minn-row-title { max-width: 100%; }
.minn-menu-info > .minn-row-slug { flex-basis: 100%; }
}
.minn-menu-kind {
font-size: 11px; font-weight: 600; color: var(--text3); background: var(--panel2);
border: 1px solid var(--border); padding: 1px 7px; border-radius: 5px; flex-shrink: 0;
}
.minn-menu-ctrls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.minn-menu-edit { display: flex; gap: 8px; flex: 1; align-items: center; flex-wrap: wrap; }
.minn-menu-edit .minn-input { flex: 1 1 180px; }
.minn-menu-add-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.minn-menu-add-row:last-child { margin-bottom: 0; }
.minn-menu-add-row .minn-ac, .minn-menu-add-row .minn-input { flex: 1 1 200px; }
.minn-menu-add-row .minn-btn-soft { flex-shrink: 0; }
.minn-menu-add { margin-bottom: 16px; }
.minn-menu-manage { display: flex; gap: 8px; }
.minn-widget-area { margin-bottom: 16px; }
.minn-widget-area.inactive { opacity: 0.7; }
.minn-widget-area-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.minn-widget-row {
display: flex; align-items: center; gap: 12px; padding: 9px 0;
border-bottom: 1px solid var(--border);
}
.minn-widget-row:last-child { border-bottom: none; }
.minn-widget-info { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; }
.minn-widget-moveto { width: auto; font-size: 12.5px; padding: 4px 8px; }
.minn-widget-textarea { resize: vertical; min-height: 120px; }
.minn-excerpt-input { resize: vertical; margin-top: 5px; font-size: 13px; line-height: 1.5; }
.minn-core-banner {
display: flex; align-items: center; gap: 16px; justify-content: space-between;
padding: 16px 20px; margin-bottom: 16px; border-color: var(--accent);
}
.minn-core-info { min-width: 0; }
.minn-core-banner .minn-btn-primary { flex-shrink: 0; }
/* Site-visibility warning banner (Overview). Amber for a blocking state
(maintenance/coming-soon/password), softer for search-discouraged. */
.minn-vis-banner {
display: flex; align-items: center; gap: 16px; justify-content: space-between;
padding: 16px 20px; margin-bottom: 16px;
}
.minn-vis-banner.block { border-color: rgba(224,164,88,0.5); background: rgba(224,164,88,0.09); }
.minn-vis-banner.soft { border-color: var(--border2); }
.minn-vis-info { min-width: 0; }
.minn-vis-banner .minn-panel-title { display: flex; align-items: center; gap: 8px; }
.minn-vis-banner .minn-panel-title svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--amber); }
.minn-vis-banner .minn-btn-soft { flex-shrink: 0; }
.minn-vis-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
/* Inline toggle in the banner / popover: label + switch. */
.minn-vis-ctl { display: flex; align-items: center; gap: 10px; }
.minn-vis-ctl .minn-toggle-label { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
/* Chip popover — the interactive fix panel, anchored under the topbar chip. */
.minn-vis-pop {
position: fixed; z-index: 90; min-width: 260px; max-width: 320px;
background: var(--panel); border: 1px solid var(--border2); border-radius: 12px;
box-shadow: var(--shadow); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;
}
.minn-vis-pop-title { font-weight: 700; font-size: 14.5px; }
.minn-vis-pop-sub { font-size: 13px; color: var(--text3); margin-top: -8px; line-height: 1.5; }
.minn-vis-pop .minn-vis-ctl { justify-content: space-between; }
.minn-vis-pop .minn-btn-soft { align-self: flex-start; }
.minn-comment-replybox { margin-top: 10px; }
.minn-comment-replybox textarea { resize: vertical; font-size: 13.5px; }
.minn-unread-dot { position: absolute; top: 6px; inset-inline-end: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--red); border: 2px solid var(--bg); }
.minn-btn-primary {
display: flex; align-items: center; gap: 7px; background: var(--accent); color: var(--accent-fg); border: none;
padding: 8px 14px; border-radius: 9px; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap;
}
.minn-btn-primary:hover { background: var(--accent2); }
.minn-btn-primary:disabled { opacity: 0.6; cursor: default; }
.minn-topbar .minn-btn-primary { margin-inline-start: 6px; }
/* ===== Cards / panels ===== */
.minn-card { background: var(--panel); border: 1px solid var(--border); border-radius: 13px; }
.minn-empty { padding: 40px; text-align: center; color: var(--text3); font-size: 14px; }
.minn-loading { padding: 60px; text-align: center; color: var(--text3); font-size: 14px; animation: minnTextPulse 1.4s ease infinite; }
/* ===== Dashboard ===== */
.minn-dash-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.minn-dash-greeting { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; }
.minn-dash-sub { color: var(--text2); margin-top: 3px; }
.minn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 14px; margin-bottom: 20px; }
.minn-stat { padding: 16px 17px; }
.minn-stat.clickable { cursor: pointer; transition: border-color 0.15s ease; }
.minn-stat.clickable:hover, .minn-stat.clickable:focus-visible { border-color: var(--accent); }
.minn-stat-label { color: var(--text2); font-size: 13.5px; font-weight: 500; }
.minn-stat-value { font-size: 28px; font-weight: 800; letter-spacing: -1px; margin-top: 8px; }
.minn-stat-delta { font-size: 13px; font-weight: 600; margin-top: 6px; color: var(--text3); }
.minn-stat-delta.up { color: var(--green-text); }
.minn-stat-delta.warn { color: var(--amber); }
.minn-stat-delta.down { color: var(--red-text); }
/* Store needs-attention strip (Overview, WooCommerce only) */
.minn-store-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 17px; margin-bottom: 20px; }
.minn-store-label { font-size: 13.5px; font-weight: 600; color: var(--text2); margin-inline-end: 4px; }
.minn-store-chip { border: 0; cursor: pointer; font-family: inherit; transition: filter 0.15s ease; }
.minn-store-chip:hover, .minn-store-chip:focus-visible { filter: brightness(1.15); }
.minn-store-ok { color: var(--text3); font-size: 13px; }
.minn-store-view { margin-inline-start: auto; }
.minn-dash-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.minn-panel-pad { padding: 18px 20px; }
.minn-panel-title { font-weight: 700; font-size: 16px; }
.minn-chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.minn-chart-head-actions { display: flex; align-items: center; gap: 8px; }
.minn-range-tabs { display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.minn-range-tab { font-size: 13px; color: var(--text3); padding: 3px 9px; background: none; border: none; border-radius: 6px; cursor: pointer; }
.minn-range-tab.active { color: var(--text); background: var(--panel2); font-weight: 600; }
.minn-chart { display: flex; align-items: flex-end; gap: 5px; height: 150px; }
/* The Stats page's full-width chart gets room to breathe (same specificity
pattern as .minn-sstat-chart above). */
.minn-stats-tall .minn-chart { height: 280px; }
.minn-stats-hint { margin-top: 12px; color: var(--text3); font-size: 12.5px; }
.minn-stats-breakdowns { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 20px; align-items: start; }
.minn-stats-panel { padding: 8px 18px 12px; }
/* Custom-range row: native date inputs need color-scheme for their UA
calendar chrome (the .minn-css-editor precedent). */
.minn-stats-dates { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; color: var(--text3); }
.minn-stats-quick { display: flex; align-items: center; gap: 2px; margin-inline-start: 6px; }
/* Soft range switch: stale totals dim while the chart area alone loads. */
.minn-stat.stale { opacity: 0.45; transition: opacity 0.15s ease; }
.minn-stats-tall .minn-chart .minn-loading { margin: auto; }
.minn-stats-dates input[type="date"] { width: auto; color-scheme: dark; }
[data-theme="light"] .minn-stats-dates input[type="date"] { color-scheme: light; }
.minn-chart-col { flex: 1; position: relative; height: 100%; min-width: 0; }
.minn-chart-bar, .minn-chart-views, .minn-chart-visitors {
position: absolute; bottom: 0; left: 0; right: 0; border-radius: 4px 4px 2px 2px;
}
.minn-chart-bar { background: var(--accent-soft); min-height: 3px; }
.minn-chart-bar.last { background: var(--accent); }
.minn-chart-views { background: var(--accent-soft); }
.minn-chart-visitors { background: var(--accent); opacity: 0.85; }
.minn-chart-col.hover .minn-chart-views { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.minn-chart-col.hover .minn-chart-visitors, .minn-chart-col.hover .minn-chart-bar { opacity: 1; background: var(--accent2); }
#minn-chart-tip {
position: fixed; z-index: 80; pointer-events: none; min-width: 150px;
background: var(--panel); border: 1px solid var(--border2); border-radius: 11px;
box-shadow: var(--shadow); overflow: hidden; animation: minnScaleIn 0.1s ease;
}
.minn-chart-tip-date {
padding: 8px 13px; font-size: 12.5px; font-weight: 700; text-align: center;
border-bottom: 2px solid var(--accent); background: var(--panel2); white-space: nowrap;
}
.minn-chart-tip-stats { display: flex; gap: 18px; padding: 9px 13px 10px; justify-content: center; }
.minn-chart-tip-stats > div { display: flex; flex-direction: column; align-items: flex-start; }
.minn-chart-tip-stats b { font-size: 16px; letter-spacing: -0.3px; }
.minn-chart-tip-stats span { font-size: 11.5px; color: var(--text3); }
.minn-chart-tip-hint { padding: 0 13px 8px; font-size: 11px; color: var(--text3); text-align: center; }
.minn-chart.clickable .minn-chart-col { cursor: pointer; }
/* Status-card bars that narrow the list beneath (collection dateQuery). */
.minn-sstat-chart-bars .minn-chart-col.pick { cursor: pointer; }
.minn-chart-col.selected .minn-chart-views { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.minn-chart-col.selected .minn-chart-visitors, .minn-chart-col.selected .minn-chart-bar { opacity: 1; background: var(--accent2); }
.minn-chart-col.selected::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--accent2);
}
.minn-toolbar .minn-srange { white-space: nowrap; flex: none; }
/* Traffic day drill-down (Overview chart bar click). */
.minn-traf-day { padding: 4px 18px 16px; }
.minn-traf-sec-label {
font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
color: var(--text3); margin: 14px 0 6px;
}
.minn-traf-sec-label:first-child { margin-top: 4px; }
.minn-traf-row {
display: flex; align-items: center; gap: 14px; padding: 9px 0;
border-bottom: 1px solid var(--border);
}
.minn-traf-row:last-of-type { border-bottom: none; }
.minn-traf-row.linked { cursor: pointer; border-radius: 8px; margin: 0 -8px; padding: 9px 8px; border-bottom-color: transparent; }
.minn-traf-row.linked:hover { background: var(--panel2); }
.minn-traf-main { min-width: 0; flex: 1; }
.minn-traf-title { font-size: 14px; font-weight: 550; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minn-traf-path { font-size: 12px; color: var(--text3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); }
.minn-traf-nums { display: flex; gap: 12px; flex: none; font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.minn-traf-nums em { font-style: normal; font-weight: 500; font-size: 11px; color: var(--text3); margin-inline-start: 2px; }
.minn-traf-foot { padding: 12px 0 2px; }
.minn-activity { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.minn-modal .minn-activity { margin: 0; padding: 8px 18px 14px; }
.minn-activity-row { display: flex; gap: 11px; padding: 9px 0; align-items: flex-start; }
.minn-activity-row.linked { cursor: pointer; border-radius: 8px; margin: 0 -8px; padding: 9px 8px; }
.minn-activity-row.linked:hover { background: var(--panel2); }
.minn-activity-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.minn-activity-text { font-size: 14px; line-height: 1.4; }
.minn-activity-time { font-size: 12.5px; color: var(--text3); margin-top: 1px; }
.dot-green { background: var(--green); } .dot-amber { background: var(--amber); } .dot-blue { background: var(--blue); }
.dot-accent { background: var(--accent); } .dot-muted { background: var(--text3); }
/* ===== Content ===== */
.minn-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
/* View-switcher row stacked above a controls row (Extensions grew a third
tab and the single row clipped both tab strips into scroll arrows).
Content uses the same split: types on row 1, tax/search on row 2. */
.minn-toolbar-views { margin-bottom: 10px; }
.minn-toolbar-views .minn-tabscroll,
.minn-toolbar-views > .minn-tabs { flex: 1 1 auto; min-width: 0; }
.minn-toolbar-views .minn-type-select { flex: 0 1 220px; max-width: 260px; }
/* Aux strip (Content's Trash): pinned to the row's right edge — a stretching
flex child floated it mid-row. Icon + a step brighter than the quiet tabs. */
.minn-toolbar > .minn-tabs.minn-tabs-aux { flex: 0 0 auto; margin-inline-start: auto; }
.minn-tabs-aux .minn-tab { display: flex; align-items: center; gap: 6px; color: var(--text2); }
.minn-tabs-aux .minn-tab svg { width: 13px; height: 13px; }
/* Filters row carries the bottom gap to the table (views row is tighter). */
.minn-toolbar.minn-toolbar-filters { margin-bottom: 18px; }
/* Extensions filters: quiet text links, not a second boxed pill strip —
two stacked bordered containers read as chrome soup. */
/* Quiet strips must still SCROLL when a crowded row squeezes them — the old
overflow: visible painted their pills across the neighboring control and
left the ‹ › scroll buttons managing a strip that could not move. The
scrollbar stays hidden (the buttons are the affordance on overflow). */
.minn-tabs.minn-ext-filters, .minn-tabs.minn-quiet-tabs { background: none; border: none; padding: 0; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.minn-tabs.minn-ext-filters::-webkit-scrollbar, .minn-tabs.minn-quiet-tabs::-webkit-scrollbar { display: none; }
.minn-ext-filters .minn-tab, .minn-quiet-tabs .minn-tab { background: none; border: none; padding: 6px 9px; color: var(--text3); font-weight: 500; }
.minn-ext-filters .minn-tab:hover, .minn-quiet-tabs .minn-tab:hover { color: var(--text2); }
.minn-ext-filters .minn-tab.active, .minn-quiet-tabs .minn-tab.active { color: var(--text); font-weight: 600; background: none; box-shadow: none; }
.minn-ext-filters .minn-tab.active .minn-tab-count { color: var(--accent2); }
.minn-ext-filters .minn-tab .minn-tab-count { background: none; border: none; padding: 0; margin-inline-start: 3px; }
.minn-toolbar-meta { margin-inline-start: auto; color: var(--text3); font-size: 14px; white-space: nowrap; flex-shrink: 0; }
.minn-media-svg-note {
margin: 8px 0 0;
padding: 7px 10px;
border-radius: 8px;
background: color-mix(in srgb, var(--ok, #3d9a6a) 12%, transparent);
color: var(--text2);
font-size: 13px;
}
/* Scroll-arrow wrapper injected around overflowing tab strips (see enhanceTabStrips). */
.minn-tabscroll { position: relative; display: flex; align-items: center; min-width: 0; }
.minn-tabscroll-btn {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 26px; height: 26px;
border-radius: 7px; border: 1px solid var(--border); background: var(--panel2); color: var(--text2);
cursor: pointer; display: none; align-items: center; justify-content: center; font-size: 17px; line-height: 1;
padding: 0; box-shadow: 0 0 10px 6px var(--bg);
}
.minn-tabscroll-btn.show { display: flex; }
.minn-tabscroll-btn.prev { left: 1px; }
.minn-tabscroll-btn.next { right: 1px; }
.minn-tabscroll-btn:hover { color: var(--text); border-color: var(--border2); }
/* Tabs scroll horizontally instead of wrapping when there are many (e.g. every user role). */
.minn-tabs { display: flex; gap: 2px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 3px; flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: thin; scroll-behavior: smooth; }
.minn-tabs::-webkit-scrollbar { height: 6px; }
.minn-tabs::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
.minn-tab { background: transparent; color: var(--text3); border: none; padding: 5px 13px; border-radius: 7px; cursor: pointer; font-size: 14px; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.minn-tab.active { background: var(--panel2); color: var(--text); font-weight: 600; }
.minn-tab-count { display: inline-block; margin-inline-start: 5px; padding: 0 6px; border-radius: 999px; background: var(--panel2); color: var(--text3); font-size: 12px; font-weight: 600; line-height: 18px; vertical-align: 1px; }
.minn-tab.active .minn-tab-count { background: var(--bg); color: var(--text2); }
/* Quiet in-place loading: keep the toolbar, dim only the table while data refreshes. */
.minn-busy { opacity: 0.45; pointer-events: none; transition: opacity 0.12s ease; }
/* A grid whose column floors outgrow a narrow window scrolls sideways
rather than clipping its last columns (a plans list on a laptop). */
.minn-table { overflow: hidden; overflow-x: auto; }
.minn-table-head, .minn-table-row {
display: grid; grid-template-columns: 40px 1fr 110px 130px 110px 40px; gap: 8px; padding: 11px 16px;
border-bottom: 1px solid var(--border); align-items: center;
}
.minn-table-head { font-size: 12.5px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.5px; }
/* Sortable column headers (Content list, Users list, surface collections). */
.minn-th-sort {
display: inline-flex; align-items: center; gap: 2px;
margin: 0; padding: 0; border: 0; background: none;
font: inherit; font-size: inherit; font-weight: inherit;
color: inherit; letter-spacing: inherit; text-transform: inherit;
cursor: pointer; text-align: start;
}
.minn-th-sort:hover { color: var(--text); }
.minn-th-sort.is-active { color: var(--text2); }
.minn-th-sort:focus-visible {
outline: none; color: var(--accent2);
box-shadow: 0 0 0 3px var(--accent-ring);
border-radius: 4px;
}
.minn-table-row { padding: 13px 16px; cursor: pointer; }
.minn-table-row:hover { background: var(--hover); }
.minn-table-row:last-child { border-bottom: none; }
.minn-row-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--panel2); display: flex; align-items: center; justify-content: center; color: var(--text3); font-size: 14px; flex-shrink: 0; }
.minn-row-icon.has-thumb { padding: 0; overflow: hidden; background: var(--panel2); border: 1px solid var(--border); }
.minn-content-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.minn-row-title { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minn-row-slug { font-size: 12.5px; color: var(--text3); margin-top: 1px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.minn-row-slug-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.minn-row-meta { font-size: 14px; color: var(--text2); }
/* Surface table cells: single line, ellipsis — long URLs shouldn't wrap to three rows. */
.minn-row-meta.minn-cell-clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minn-row-meta.mono { font-family: var(--font-mono); font-size: 13px; }
.minn-row-meta.minn-num { text-align: end; font-variant-numeric: tabular-nums; padding-inline-end: 8px; }
.minn-table-head .minn-num { text-align: end; padding-inline-end: 8px; }
.minn-row-arrow { color: var(--text3); text-align: center; }
.minn-cell-clip { min-width: 0; }
.minn-status { font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 6px; display: inline-block; }
.minn-status.publish { color: var(--green-text); background: rgba(70,184,129,0.13); }
.minn-status.draft, .minn-status.pending { color: var(--text3); background: var(--panel2); }
.minn-status.future { color: var(--blue-text); background: rgba(91,155,224,0.14); }
.minn-status.private { color: var(--amber-text); background: rgba(224,164,88,0.14); }
/* ===== Media ===== */
.minn-view-tabs { margin-inline-start: auto; display: flex; gap: 2px; background: var(--panel); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.minn-view-tab { width: 30px; height: 28px; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--text3); border: none; border-radius: 6px; cursor: pointer; }
.minn-view-tab.active { background: var(--panel2); color: var(--text); }
.minn-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.minn-media-card { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; }
.minn-media-card:hover { border-color: var(--border2); }
.minn-media-card.sel { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: -2px; }
.minn-media-row.sel { background: var(--accent-soft); }
/* Grid: type badge top-left (always readable), multi-select checkbox
top-right (appears on hover / when selected). Opposite corners so hover
never covers the kind label. List view keeps the checkbox leading. */
.minn-media-check {
position: absolute; top: 7px; inset-inline-end: 7px; z-index: 2; display: flex;
padding: 3px; border-radius: 6px; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
opacity: 0; transition: opacity 0.12s;
}
.minn-media-card:hover .minn-media-check,
.minn-media-check:has(:checked) { opacity: 1; }
.minn-media-check.row { position: static; opacity: 1; background: none; backdrop-filter: none; padding: 0; }
.minn-media-check input { cursor: pointer; width: 15px; height: 15px; accent-color: var(--accent); margin: 0; }
.minn-media-thumb { height: 110px; position: relative; display: flex; align-items: flex-start; background-size: cover; background-position: center; }
.minn-media-badge {
position: absolute; top: 8px; inset-inline-start: 8px; margin: 0;
font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: #fff;
background: rgba(0,0,0,0.35); backdrop-filter: blur(4px); padding: 2px 7px; border-radius: 5px;
z-index: 1; pointer-events: none;
}
.minn-media-info { padding: 10px 12px; }
.minn-media-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minn-media-meta { font-size: 12.5px; color: var(--text3); margin-top: 2px; }
.minn-media-list { overflow: hidden; }
.minn-media-row { display: flex; align-items: center; gap: 13px; padding: 11px 16px; border-bottom: 1px solid var(--border); cursor: pointer; }
.minn-media-row:hover { background: var(--hover); }
.minn-media-row:last-child { border-bottom: none; }
.minn-media-thumb-sm { width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; background-size: cover; background-position: center; }
.minn-media-col { flex: 1; min-width: 0; }
.minn-media-dims { font-size: 13.5px; color: var(--text2); width: 90px; }
.minn-media-size { font-size: 13.5px; color: var(--text2); width: 70px; text-align: end; }
/* ===== Extensions ===== */
.minn-btn-soft {
display: flex; align-items: center; gap: 7px; background: var(--accent-soft); color: var(--accent2);
border: 1px solid var(--accent-soft); padding: 7px 12px; border-radius: 9px; font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.minn-btn-soft:disabled { opacity: 0.6; cursor: default; }
.minn-plugin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.minn-plugin { padding: 16px 17px; display: flex; gap: 13px; }
.minn-plugin-icon {
position: relative; width: 40px; height: 40px; border-radius: 10px; opacity: 0.92; display: flex; align-items: center;
justify-content: center; color: #fff; font-weight: 800; font-size: 18px; flex-shrink: 0; overflow: hidden;
}
/* The real wp.org icon covers the letter tile; a broken URL is removed by
the error handler and the letter shows through. */
.minn-plugin-icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.minn-plugin-icon-link { flex-shrink: 0; border-radius: 10px; display: block; }
.minn-plugin-icon-link:hover .minn-plugin-icon { opacity: 1; box-shadow: 0 0 0 2px var(--accent); }
.minn-plugin-author { margin-top: 5px; font-size: 12px; color: var(--text3); }
.minn-plugin-author a { color: var(--text2); text-decoration: none; border-bottom: 1px solid var(--border2); }
.minn-plugin-author a:hover { color: var(--accent2); border-bottom-color: var(--accent2); }
.minn-plugin-body { flex: 1; min-width: 0; }
.minn-plugin-head { display: flex; align-items: center; gap: 8px; }
.minn-plugin-name { font-weight: 700; font-size: 15px; }
.minn-badge-update { font-size: 11.5px; font-weight: 600; color: var(--amber-text); background: rgba(224,164,88,0.14); padding: 2px 7px; border-radius: 5px; }
.minn-badge-update.as-btn { border: 1px solid rgba(224,164,88,0.3); cursor: pointer; }
.minn-badge-update.as-btn:hover { background: rgba(224,164,88,0.28); }
.minn-badge-update.as-btn:disabled { opacity: 0.6; cursor: default; }
/* Update-all queue: the active card stays readable; queued ones dim. */
.minn-plugin.minn-plugin-updating {
opacity: 1;
outline: 1px solid color-mix(in srgb, var(--amber, #e0a458) 45%, transparent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber, #e0a458) 12%, transparent);
}
.minn-plugin.minn-plugin-updating .minn-badge-update.as-btn {
opacity: 1;
background: rgba(224,164,88,0.28);
}
.minn-plugin.minn-plugin-queued { opacity: 0.55; }
.minn-plugin-desc { font-size: 13.5px; color: var(--text2); margin-top: 4px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.minn-plugin-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.minn-plugin-ver { font-size: 12.5px; color: var(--text3); font-family: var(--font-mono); }
/* The version is the card's one changelog doorway, offer or not. */
button.minn-plugin-ver { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
button.minn-plugin-ver:hover { color: var(--accent2); }
/* Doorways: where the plugin lives in Minn, then its own wp-admin settings. */
.minn-plugin-doors { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; font-size: 11.5px; }
.minn-plugin-doors-in { color: var(--text3); margin-right: 2px; }
.minn-plugin-door { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text2); font: inherit; font-size: 11.5px; line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap; }
.minn-plugin-door:hover { color: var(--accent2); border-color: var(--accent2); }
.minn-plugin-door.is-wp { color: var(--text3); }
.minn-topbar-sub-menu { cursor: pointer; }
.minn-topbar-sub-menu:hover { color: var(--accent2); }
.minn-theme-ver { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.minn-theme-ver:hover { color: var(--accent2); }
/* Auto-update pill: quiet at rest, accent-lit when on. */
.minn-auto-toggle {
display: flex; align-items: center; gap: 4px; background: transparent; border: 1px solid var(--border2);
color: var(--text3); padding: 3px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600;
cursor: pointer; flex-shrink: 0;
}
.minn-auto-toggle svg { width: 12px; height: 12px; }
.minn-auto-toggle:hover { color: var(--text2); }
.minn-auto-toggle.on { color: var(--accent2); background: var(--accent-soft); border-color: var(--accent-soft); }
.minn-auto-toggle:disabled { opacity: 0.5; cursor: default; }
.minn-theme-preview { text-decoration: none; }
.minn-state-label { font-size: 13px; font-weight: 600; color: var(--text3); }
.minn-state-label.on { color: var(--green-text); }
.minn-plugin-delete {
margin-inline-start: auto; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
background: transparent; border: none; border-radius: 7px; color: var(--text3); cursor: pointer;
}
.minn-plugin-delete:hover { background: rgba(228,107,107,0.12); color: var(--red); }
.minn-plugin-delete:disabled { opacity: 0.5; cursor: default; }
.minn-translation-card { padding: 0; overflow: hidden; }
.minn-translation-actions { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }
.minn-translation-head { display: flex; align-items: center; gap: 13px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.minn-translation-icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent2); background: var(--accent-soft); }
.minn-translation-icon svg { width: 21px; height: 21px; }
.minn-translation-icon.is-busy svg { animation: minn-upd-rot 1.1s linear infinite; }
.minn-translation-title { font-size: 16px; font-weight: 700; }
.minn-translation-sub { margin-top: 3px; color: var(--text2); font-size: 13.5px; line-height: 1.45; }
/* Installed languages (Translations tab): every language whose files are on
disk, with a Remove action for the ones nothing on the site uses. */
.minn-lang-card { padding: 0; overflow: hidden; margin-top: 14px; }
.minn-lang-head { padding: 18px 20px; border-bottom: 1px solid var(--border); }
.minn-lang-title { font-size: 16px; font-weight: 700; }
.minn-lang-sub { margin-top: 3px; color: var(--text2); font-size: 13.5px; line-height: 1.45; }
.minn-lang-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.minn-lang-row { min-width: 0; padding: 12px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); }
.minn-lang-row:nth-child(odd) { border-inline-end: 1px solid var(--border); }
.minn-lang-row:nth-last-child(-n+2) { border-bottom: none; }
.minn-lang-row:nth-last-child(2):nth-child(even) { border-bottom: 1px solid var(--border); }
.minn-lang-row-main { min-width: 0; flex: 1; }
.minn-lang-name { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minn-lang-meta { margin-top: 2px; color: var(--text3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minn-lang-meta code { color: var(--text2); font-family: var(--font-mono); font-size: 11.5px; }
.minn-lang-row .minn-btn-soft { flex-shrink: 0; }
.minn-lang-lock { flex-shrink: 0; font-size: 11.5px; color: var(--text3); background: var(--hover); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
@media (max-width: 860px) { .minn-lang-list { grid-template-columns: minmax(0, 1fr); } .minn-lang-row:nth-child(odd) { border-inline-end: none; } .minn-lang-row:nth-last-child(2):nth-child(even) { border-bottom: none; } }
.minn-translation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.minn-translation-row { min-width: 0; padding: 13px 20px; display: flex; align-items: center; gap: 12px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.minn-translation-row:hover { background: var(--hover); }
.minn-translation-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.minn-translation-row:nth-child(odd) { border-inline-end: 1px solid var(--border); }
.minn-translation-row:nth-last-child(-n+2) { border-bottom: none; }
.minn-translation-row:nth-last-child(2):nth-child(even) { border-bottom: 1px solid var(--border); }
.minn-translation-row.is-open { grid-column: 1 / -1; flex-wrap: wrap; border-inline-end: none; }
.minn-translation-row-main { min-width: 0; flex: 1; }
.minn-translation-name { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minn-translation-meta { margin-top: 2px; color: var(--text3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minn-translation-meta code { color: var(--text2); font-family: var(--font-mono); font-size: 11.5px; }
.minn-translation-preview { margin-top: 4px; color: var(--text2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minn-translation-chevron { display: flex; color: var(--text3); transition: transform 0.15s ease; }
.minn-translation-chevron svg { width: 15px; height: 15px; }
.minn-translation-row.is-open .minn-translation-chevron { transform: rotate(180deg); }
.minn-translation-components { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 7px; padding-top: 12px; border-top: 1px solid var(--border); }
.minn-translation-component { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel2); font-size: 12.5px; }
.minn-translation-component > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minn-translation-component code { margin-inline-start: auto; color: var(--text3); font-family: var(--font-mono); font-size: 10.5px; }
.minn-translation-kind { flex: none; color: var(--accent2); font-size: 10.5px; font-weight: 700; letter-spacing: 0.35px; text-transform: uppercase; }
/* Busy state for cards while a background operation runs */
.minn-busy { opacity: 0.45; pointer-events: none; animation: minnPulse 1.4s ease infinite; }
/* ===== Media upload dropzone ===== */
.minn-dropzone {
border: 2px dashed var(--border2); border-radius: 13px; padding: 34px 20px; margin-bottom: 18px;
display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer;
color: var(--text2); text-align: center; transition: border-color 0.15s, background 0.15s;
animation: minnFadeUp 0.2s ease;
}
.minn-dropzone:hover, .minn-dropzone.over { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.minn-dropzone-title { font-weight: 700; font-size: 15px; }
.minn-dropzone-sub { font-size: 13px; color: var(--text3); }
.minn-dropzone-sub b { color: var(--accent2); }
/* ===== Editor: view link + history ===== */
.minn-side-viewlink { display: block; text-align: center; margin-top: 9px; font-size: 13.5px; font-weight: 600; }
/* Public Post Preview (adapters/public-post-preview.php) under Publish. */
.minn-ppp { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); }
.minn-ppp-toggle { margin-top: 0; max-width: none; gap: 0; }
.minn-ppp-row { display: flex; gap: 6px; margin-top: 8px; align-items: stretch; }
.minn-ppp-row .minn-ppp-url { flex: 1; min-width: 0; font-size: 11.5px; }
.minn-ppp-row .minn-btn-soft { flex-shrink: 0; }
.minn-featured-thumb {
display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 9px; background-size: cover;
background-position: center; border: 1px solid var(--border); cursor: pointer;
padding: 0; background-color: var(--panel2); position: relative; transition: border-color 0.12s, box-shadow 0.12s;
}
.minn-featured-thumb:hover, .minn-featured-thumb:focus-visible {
border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); outline: none;
}
.minn-featured-thumb.loading { opacity: 0.55; cursor: wait; }
.minn-featured-empty {
display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
padding: 22px 10px; border: 1px dashed var(--border2); border-radius: 9px; background: none;
color: var(--text3); font-size: 13px; font-weight: 600; cursor: pointer;
}
.minn-featured-empty:hover { border-color: var(--accent); color: var(--accent2); }
.minn-trash-link {
background: none; border: none; color: var(--text3); font-size: 13px; font-weight: 600;
cursor: pointer; padding: 4px; text-align: center;
}
.minn-trash-link:hover { color: var(--red); }
.minn-trash-link:disabled { opacity: 0.5; }
.minn-history-row {
display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: start; background: none;
border: none; border-bottom: 1px solid var(--border); padding: 6px 0; cursor: pointer;
color: var(--text2); font-size: 13px;
}
.minn-history-row:hover { color: var(--text); }
.minn-history-when { font-weight: 600; color: var(--text); }
.minn-history-who { margin-inline-start: auto; color: var(--text3); font-size: 12px; }
.minn-history-more {
display: block; width: 100%; margin-top: 4px; padding: 9px 0 2px;
background: none; border: none; color: var(--accent2); font-size: 12.5px; font-weight: 600;
text-align: start; cursor: pointer;
}
.minn-history-more:hover { color: var(--accent); }
/* Full revision list dialog + GitHub-style activity heatmap.
Months + grid share one right-aligned track (one slot per week) so labels
sit over their columns. Compact window (≤ ~26 weeks) fits the wide modal. */
.minn-rev-heat {
padding: 12px 18px 10px; border-bottom: 1px solid var(--border);
}
/* Left-aligned: matches the revision list reading order and the modal’s
left-weighted hierarchy. Right-align left a lonely island of cells. */
.minn-rev-heat-track {
display: flex; flex-direction: column; align-items: flex-start;
gap: 4px; width: 100%;
/* Room for the 2px sel outline + 1px offset — overflow:hidden clipped the
ring on edge cells (esp. bottom row). */
overflow: visible;
padding: 3px;
margin: -3px;
}
.minn-rev-heat-months,
.minn-rev-heat-grid {
display: flex; gap: 3px; justify-content: flex-start;
}
.minn-rev-heat-months { height: 14px; overflow: visible; }
/* Fixed week-width slot; label text may spill into empty neighbor slots. */
.minn-rev-heat-m {
flex: 0 0 12px; width: 12px; overflow: visible;
font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
color: var(--text3); white-space: nowrap; line-height: 14px;
}
.minn-rev-heat-week {
display: flex; flex-direction: column; gap: 3px;
flex: 0 0 12px; width: 12px; overflow: visible;
}
.minn-rev-heat-cell {
width: 12px; height: 12px; border-radius: 2px; border: 0; padding: 0;
background: var(--panel2); cursor: pointer; display: block;
box-sizing: border-box;
}
.minn-rev-heat-cell.future { opacity: 0; pointer-events: none; }
.minn-rev-heat-cell.l0 { background: var(--panel2); }
.minn-rev-heat-cell.l1 { background: rgba(70, 184, 129, 0.28); }
.minn-rev-heat-cell.l2 { background: rgba(70, 184, 129, 0.48); }
.minn-rev-heat-cell.l3 { background: rgba(70, 184, 129, 0.72); }
.minn-rev-heat-cell.l4 { background: rgba(70, 184, 129, 0.95); }
.minn-rev-heat-cell:hover:not(:disabled),
.minn-rev-heat-cell:focus-visible:not(:disabled) {
outline: 1px solid var(--text3); outline-offset: 1px;
position: relative; z-index: 1;
}
.minn-rev-heat-cell.sel {
outline: 2px solid var(--accent); outline-offset: 1px;
position: relative; z-index: 2;
}
.minn-rev-heat-legend {
display: flex; align-items: center; gap: 4px; justify-content: flex-start;
margin-top: 8px; font-size: 11px; color: var(--text3);
}
.minn-rev-heat-legend .minn-rev-heat-cell { cursor: default; pointer-events: none; }
/* Styled hover tip (heatmap cells, schedule calendar days — not native title=).
In-flow anchors mount this inside .minn-scroll as position:absolute so it
rides the list; fixed overlays (date picker) keep the viewport pin. */
.minn-float-tip,
.minn-rev-heat-tip {
position: fixed; z-index: 95;
max-width: min(280px, calc(100vw - 16px));
padding: 6px 10px;
background: var(--panel);
border: 1px solid var(--border2);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), 0 1px 4px rgba(0, 0, 0, 0.12);
font-size: 12px; font-weight: 600; color: var(--text);
line-height: 1.4; pointer-events: none;
white-space: pre-line;
animation: minn-float-tip-in 0.1s ease-out;
}
.minn-scroll > .minn-float-tip { position: absolute; }
.minn-float-tip[data-place="below"],
.minn-rev-heat-tip[data-place="below"] { animation-name: minn-float-tip-in-below; }
@keyframes minn-float-tip-in {
from { opacity: 0; transform: translateY(3px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes minn-float-tip-in-below {
from { opacity: 0; transform: translateY(-3px); }
to { opacity: 1; transform: translateY(0); }
}
.minn-field-image { display: flex; flex-direction: column; gap: 8px; }
.minn-field-multicheck { display: flex; flex-direction: column; gap: 10px; }
.minn-field-multicheck .minn-toggle-label { font-size: 13.5px; font-weight: 500; }
.minn-insp-body .minn-field-multicheck { gap: 6px; }
.minn-insp-body .minn-field-multicheck .minn-toggle-row { gap: 10px; padding: 4px 0; }
.minn-field-linkval { display: flex; flex-direction: column; gap: 6px; }
.minn-field-file { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.minn-field-file-name { font-size: 13px; word-break: break-all; }
/* Relation control: ordered chips (drag to reorder, × removes) over an
append-only suggest input. Chips share the .minn-chip visual language. */
.minn-field-relation { display: flex; flex-direction: column; gap: 7px; }
.minn-relation-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.minn-relation-chips:empty { display: none; }
.minn-relation-chip {
display: inline-flex; align-items: center; gap: 6px; cursor: grab;
background: var(--panel2); border: 1px solid var(--border); padding: 2px 6px 2px 8px;
border-radius: 6px; font-size: 12.5px; color: var(--text2);
}
.minn-relation-chip button {
background: none; border: 0; padding: 0 2px; cursor: pointer;
color: var(--text3); font-size: 14px; line-height: 1;
}
.minn-relation-chip button:hover { color: var(--red); }
.minn-field-image-thumb {
display: block; width: 100%; max-width: 280px; aspect-ratio: 1.91 / 1;
border-radius: 9px; background-size: cover; background-position: center;
border: 1px solid var(--border); cursor: pointer; padding: 0; background-color: var(--panel2);
}
.minn-field-image-thumb:hover { border-color: var(--accent); }
.minn-field-image-actions { display: flex; gap: 8px; }
/* Gallery field: thumb strip + the images-editor doorway. */
.minn-field-gallery { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.minn-field-gallery-thumbs { display: flex; gap: 4px; flex-wrap: wrap; }
.minn-field-gallery-thumbs:empty { display: none; }
.minn-field-gallery-thumbs img, .minn-field-gallery-ph, .minn-field-gallery-more {
width: 44px; height: 44px; object-fit: cover; border-radius: 7px;
border: 1px solid var(--border2); background: var(--panel2);
}
.minn-field-gallery-ph, .minn-field-gallery-more {
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; color: var(--muted);
}
/* Color field: native swatch + the hex text (the text is the truth). */
.minn-field-color { display: flex; gap: 8px; align-items: center; }
.minn-field-color input[type="color"] {
width: 38px; height: 34px; padding: 2px; border: 1px solid var(--border);
border-radius: 8px; background: var(--panel2); cursor: pointer; flex-shrink: 0;
}
.minn-field-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.minn-field-color input[type="color"]::-webkit-color-swatch { border: none; border-radius: 5px; }
.minn-field-color .minn-input { flex: 1; min-width: 0; }
/* Wysiwyg field: text preview + the rich-text modal doorway. */
.minn-field-rt { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.minn-field-rt-preview {
font-size: 13px; color: var(--text2); line-height: 1.5;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.minn-field-rt-preview.empty, .minn-insp-dfrt-preview.empty { color: var(--muted); font-style: italic; }
.minn-insp-dfrt { align-items: flex-start; }
.minn-insp-dfrt-preview {
flex: 1; min-width: 0; font-size: 12px; color: var(--text2); line-height: 1.45;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Rich-text modal: the wysiwyg-field editor. Same layer as the images
editor (z 52, under the media picker) — always opened AFTER its hosting
modal/popover closed. */
.minn-rt-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 52;
display: flex; align-items: center; justify-content: center; padding: 4vh 20px;
}
.minn-rt {
width: 680px; max-width: 94vw; max-height: 88vh; display: flex; flex-direction: column;
background: var(--panel); border: 1px solid var(--border2); border-radius: 14px;
box-shadow: var(--shadow); animation: minnScaleIn 0.18s ease;
}
.minn-rt-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.minn-rt-head strong { font-size: 16px; flex: 1; min-width: 0; }
.minn-rt-toolbar {
display: flex; align-items: center; gap: 3px; padding: 8px 14px;
border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.minn-rt-toolbar > button {
background: none; border: 1px solid transparent; border-radius: 7px; color: var(--text2);
min-width: 30px; height: 28px; cursor: pointer; font-size: 13px; font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
}
.minn-rt-toolbar > button:hover { color: var(--text); border-color: var(--border2); }
.minn-rt-toolbar > button svg { width: 15px; height: 15px; }
.minn-rt-linkrow { display: inline-flex; gap: 6px; align-items: center; margin-inline-start: 8px; }
.minn-rt-linkrow .minn-input { width: 240px; height: 28px; }
.minn-rt-body {
flex: 1; min-height: 220px; overflow-y: auto; padding: 16px 20px; outline: none;
font-size: 14.5px; line-height: 1.65;
}
.minn-rt-body p { margin: 0 0 0.8em; }
.minn-rt-body ul, .minn-rt-body ol { margin: 0 0 0.8em; padding-inline-start: 1.4em; }
.minn-rt-body a { color: var(--accent); }
.minn-rt-foot { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); }
/* Field group builder (/field-groups/{key}): stacked rows, inline settings.
.minn-card ships unpadded — the builder pads itself. */
.minn-fgb { padding: 18px 20px 20px; }
.minn-fgb-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.minn-fgb-title { flex: 1; min-width: 220px; font-size: 16px; font-weight: 600; }
.minn-fgb-active { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text2); }
.minn-fgb-dirty { font-size: 12px; color: var(--amber-text, #c98a1b); }
.minn-undo-set { display: inline-flex; gap: 4px; }
.minn-undo-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 8px !important; }
.minn-undo-btn svg { width: 16px; height: 16px; }
.minn-undo-btn:disabled { opacity: 0.4; cursor: default; }
.minn-fgb-meta { display: flex; gap: 14px; align-items: center; font-size: 13px; color: var(--text3); margin-bottom: 14px; }
.minn-fgb-meta button { background: none; border: 0; padding: 0; font-size: 13px; color: var(--accent2); cursor: pointer; }
.minn-fgb-meta button:hover { text-decoration: underline; }
.minn-fgb-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.minn-fgb-row { border: 1px solid var(--border); border-radius: 10px; background: var(--panel2); }
.minn-fgb-row.open { border-color: var(--border2); }
.minn-fgb-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; }
.minn-fgb-grip { color: var(--muted); cursor: grab; display: inline-flex; margin-inline-end: -4px; }
.minn-fgb-grip:hover { color: var(--text2); }
.minn-fgb-grip svg { width: 14px; height: 14px; }
.minn-fgb-row.dragging { opacity: 0.35; }
.minn-fgb-row.drop-above { box-shadow: inset 0 2px 0 var(--accent); }
.minn-fgb-row.drop-below { box-shadow: inset 0 -2px 0 var(--accent); }
.minn-fgb-chev svg { width: 14px; height: 14px; transition: transform 0.15s; }
.minn-fgb-row.open .minn-fgb-chev svg { transform: rotate(180deg); }
.minn-fgb-label { font-size: 14px; }
.minn-fgb-name { font-size: 12px; color: var(--muted); }
.minn-fgb-type { font-size: 12px; color: var(--text3); border: 1px solid var(--border); border-radius: 20px; padding: 1px 9px; }
.minn-fgb-adv .minn-fgb-type { border-style: dashed; }
.minn-fgb-req { color: var(--red-text); font-weight: 700; }
.minn-fgb-ctl { margin-inline-start: auto; display: inline-flex; gap: 4px; }
.minn-fgb-ctl button {
background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted);
width: 24px; height: 22px; line-height: 1; cursor: pointer; font-size: 12px;
}
.minn-fgb-ctl button:hover:not(:disabled) { color: var(--text); border-color: var(--border2); }
.minn-fgb-ctl button:disabled { opacity: 0.35; cursor: default; }
.minn-fgb-ctl [data-fgbdel]:hover { color: var(--red-text); border-color: currentColor; }
.minn-fgb-body {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px;
padding: 4px 14px 16px; border-top: 1px solid var(--border);
}
.minn-fgb-body .minn-fgb-set:has(textarea) { grid-column: 1 / -1; }
.minn-fgb-set-inline { display: flex; align-items: center; gap: 10px; }
.minn-fgb-set-inline .minn-field-label { margin: 0; }
.minn-fgb-minmax { display: flex; gap: 10px; }
.minn-fgb-minmax .minn-fgb-set { flex: 1; }
.minn-fgb-subs { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 12px; }
.minn-fgb-subs .minn-fgb-rows { margin: 8px 0 10px; }
.minn-fgb-subs .minn-fgb-row { background: var(--panel); }
@media (max-width: 800px) { .minn-fgb-body { grid-template-columns: 1fr; } }
/* Location rules: OR sets of AND rows. */
.minn-fgb-loc { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.minn-fgb-loc-head { font-size: 14px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.minn-fgb-loc-head .minn-toggle-desc { font-weight: 400; }
.minn-fgb-loc-group {
border: 1px solid var(--border); border-radius: 10px; background: var(--panel2);
padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px;
}
.minn-fgb-loc-or { text-align: center; color: var(--muted); font-size: 12px; margin: 2px 0 8px; text-transform: uppercase; letter-spacing: 0.08em; }
.minn-fgb-loc-rule { display: flex; gap: 8px; align-items: center; }
.minn-fgb-loc-rule .minn-input { flex: 1; min-width: 0; }
.minn-fgb-loc-rule .minn-ac { flex: 1; min-width: 0; }
.minn-fgb-loc-op { flex: 0 0 92px !important; }
.minn-fgb-loc-raw { flex: 1; font-size: 12px; color: var(--text2); }
.minn-fgb-loc-hint { font-size: 11px; color: var(--muted); }
.minn-fgb-loc-rule [data-lgx] {
background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted);
width: 24px; height: 24px; cursor: pointer; flex-shrink: 0;
}
.minn-fgb-loc-rule [data-lgx]:hover:not(:disabled) { color: var(--red-text); border-color: currentColor; }
.minn-fgb-loc-and { align-self: flex-start; padding: 3px 10px !important; font-size: 12px !important; }
/* Gravity Forms notification page: the editor beside a sticky preview. */
.minn-gfn { padding: 18px 20px 20px; }
.minn-gfn .minn-fgb-meta { flex-wrap: wrap; row-gap: 4px; }
.minn-gfn-newnote { color: var(--amber-text, #c98a1b); }
.minn-gfn-titleset { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.minn-gfn-titleset .minn-fgb-title { width: 100%; min-width: 0; }
.minn-gfn-more { padding-left: 12px; padding-right: 12px; font-size: 16px; line-height: 1; }
.minn-gfn-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr); gap: 20px; align-items: start; }
.minn-gfn-edit { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.minn-gfn-sec {
display: flex; flex-direction: column; gap: 12px; min-width: 0;
padding: 14px 16px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg2);
}
.minn-gfn-sec-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.minn-gfn-sec-head .minn-side-title { margin: 0; }
.minn-gfn-set { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.minn-gfn-set > .minn-field-label { margin: 0; }
.minn-gfn-set.minn-fgb-set-inline { flex-direction: row; align-items: center; justify-content: space-between; }
.minn-gfn-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.minn-gfn-field { position: relative; display: block; min-width: 0; }
.minn-gfn-field > .minn-input { width: 100%; }
.minn-gfn-field.has-tags > input.minn-input { padding-inline-end: 40px; }
.minn-gfn-field.has-tags.is-area > textarea.minn-input { padding-inline-end: 44px; }
.minn-gfn-tagbtn {
position: absolute; top: 50%; inset-inline-end: 6px; transform: translateY(-50%);
height: 24px; min-width: 28px; padding: 0 6px; cursor: pointer;
font: 600 12px/1 var(--font-mono); color: var(--text3);
background: var(--panel2); border: 1px solid var(--border); border-radius: 6px;
}
.minn-gfn-field.is-area .minn-gfn-tagbtn { top: 6px; transform: none; }
.minn-gfn-tagbtn:hover, .minn-gfn-tagbtn:focus-visible { color: var(--accent2); border-color: var(--accent); }
.minn-gfn-totype { width: 100%; }
.minn-gfn-totype .minn-tab { flex: 1 1 0; min-width: 0; white-space: normal; }
.minn-gfn-rules { display: flex; flex-direction: column; gap: 8px; }
.minn-gfn-rule {
display: grid; grid-template-columns: minmax(0, 1.2fr) 120px minmax(0, 1fr) 24px; gap: 6px; align-items: center;
}
.minn-gfn-rule .minn-ac, .minn-gfn-rule .minn-input { min-width: 0; }
.minn-gfn-route {
grid-template-columns: auto minmax(0, 1.2fr) 110px minmax(0, 1fr) 24px;
padding-bottom: 8px; border-bottom: 1px dashed var(--border);
}
/* The address on its own line, the test it answers to beneath. */
.minn-gfn-route > .minn-gfn-field { grid-column: 1 / 5; }
.minn-gfn-route > .minn-gfb-chx { grid-column: 5; grid-row: 1; }
.minn-gfn-if { font-size: 12.5px; color: var(--text3); }
.minn-gfn-mini { align-self: flex-start; padding: 4px 10px !important; font-size: 12.5px !important; }
.minn-gfn-act { width: 108px !important; }
.minn-gfn-err .minn-input { border-color: var(--red-text); }
.minn-gfn-err .minn-ac-input { border-color: var(--red-text); }
.minn-gfn-errmsg { font-size: 12.5px; color: var(--red-text); }
.minn-gfn-warn { font-size: 12.5px; line-height: 1.45; color: var(--amber-text, #c98a1b); }
.minn-gfn-side { position: sticky; top: 12px; min-width: 0; }
.minn-gfn-preview { gap: 10px; }
.minn-gfn-preview-note { font-size: 12px; color: var(--text3); }
.minn-gfn-preview .minn-gfn-sec-head .minn-btn-soft { margin-inline-start: auto; }
.minn-gfn-subj {
font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere;
padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
}
.minn-gfn-subj > span { display: block; font-size: 11px; font-weight: 500; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.minn-gfn-frame { display: block; width: 100%; height: min(62vh, 640px); border: 1px solid var(--border); border-radius: 8px; background: #fff; }
/* The confirmation page (shares the notification page's layout). */
.minn-gfc-fixed { flex-direction: row; align-items: center; gap: 10px; }
.minn-gfc-name { font-size: 16px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.minn-gfc-default { font-size: 11.5px; font-weight: 600; color: var(--accent2); background: var(--hover); padding: 2px 8px; border-radius: 5px; white-space: nowrap; }
.minn-gfc-frame { height: min(40vh, 360px); }
.minn-c7m-line { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.minn-c7m-line + .minn-c7m-line { margin-top: 4px; }
.minn-c7m-line > span { display: inline-block; min-width: 64px; font-size: 11px; font-weight: 500; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; }
.minn-gfc-goes { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.minn-gfc-url {
display: block; width: 100%; box-sizing: border-box; font: 12.5px/1.5 var(--font-mono); color: var(--text); overflow-wrap: anywhere;
padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
}
.minn-gfn-tagpop {
position: fixed; z-index: 400; display: flex; flex-direction: column; gap: 8px; padding: 10px;
max-height: 340px; background: var(--panel); border: 1px solid var(--border2); border-radius: 10px; box-shadow: var(--shadow);
}
.minn-gfn-taglist { overflow-y: auto; display: flex; flex-direction: column; gap: 1px; min-height: 0; }
.minn-gfn-taggroup { margin: 6px 4px 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); }
.minn-gfn-taglist button {
display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; text-align: start;
padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 13px; cursor: pointer;
}
.minn-gfn-taglist button:hover, .minn-gfn-taglist button:focus-visible { background: var(--hover); }
.minn-gfn-taglist button code { font: 11.5px var(--font-mono); color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50%; }
@media (max-width: 1100px) {
.minn-gfn-main { grid-template-columns: minmax(0, 1fr); }
.minn-gfn-side { position: static; }
}
@media (max-width: 640px) {
.minn-gfn { padding: 14px 12px 16px; }
.minn-gfn-route, .minn-gfn-rule { grid-template-columns: minmax(0, 1fr) 24px; }
.minn-gfn-route > *:not(.minn-gfb-chx), .minn-gfn-rule > *:not(.minn-gfb-chx) { grid-column: 1 !important; }
.minn-gfn-route > .minn-gfb-chx, .minn-gfn-rule > .minn-gfb-chx { grid-column: 2; grid-row: 1; }
}
/* Gravity Forms form builder: the form on Gravity Forms' 12-column grid,
a sticky settings panel beside it. */
.minn-gfb { padding: 18px 20px 20px; }
.minn-gfb-spring { flex: 1; }
.minn-gfb-main { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 20px; align-items: start; }
.minn-gfb-canvas {
border: 1px solid var(--border); border-radius: 12px; background: var(--bg2);
padding: 16px 18px 22px; min-height: 320px; min-width: 0;
}
.minn-gfb-desc {
display: block; width: 100%; resize: none; overflow: hidden; border: 0; background: transparent;
color: var(--text2); font: inherit; font-size: 14px; line-height: 1.5;
padding: 4px 6px; margin: 0 0 12px; border-radius: 6px;
}
.minn-gfb-desc:hover { background: var(--hover); }
.minn-gfb-desc:focus { outline: 2px solid var(--accent-ring); background: var(--panel); }
.minn-gfb-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px 14px; }
.minn-gfb-grid.drop-end::after { content: ''; grid-column: 1 / -1; height: 3px; border-radius: 2px; background: var(--accent); }
.minn-gfb-empty {
grid-column: 1 / -1; padding: 34px 16px; text-align: center; font-size: 13.5px;
color: var(--muted); border: 1px dashed var(--border2); border-radius: 10px;
}
.minn-gfb-cell {
position: relative; min-width: 0; padding: 8px 10px 10px; border: 1px solid transparent;
border-radius: 10px; cursor: pointer; transition: border-color 0.12s, background-color 0.12s;
}
.minn-gfb-cell:hover { border-color: var(--border); }
.minn-gfb-cell.sel { border-color: var(--accent); background: var(--accent-soft); }
.minn-gfb-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.minn-gfb-cell.dragging { opacity: 0.35; }
/* Drop line: in the gap beside or between fields, never over their content. */
.minn-gfb-cell.drop-before::before, .minn-gfb-cell.drop-after::before,
.minn-gfb-cell.drop-above::before, .minn-gfb-cell.drop-below::before {
content: ''; position: absolute; background: var(--accent); border-radius: 2px; pointer-events: none;
}
.minn-gfb-cell.drop-before::before { inset-inline-start: -9px; top: 4px; bottom: 4px; width: 3px; }
.minn-gfb-cell.drop-after::before { inset-inline-end: -9px; top: 4px; bottom: 4px; width: 3px; }
.minn-gfb-cell.drop-above::before { top: -7px; left: 4px; right: 4px; height: 3px; }
.minn-gfb-cell.drop-below::before { bottom: -7px; left: 4px; right: 4px; height: 3px; }
.minn-gfb-chead { display: flex; align-items: center; gap: 6px; min-height: 22px; margin-bottom: 6px; min-width: 0; }
.minn-gfb-grip { display: inline-flex; align-items: center; color: var(--muted); cursor: grab; padding: 0 2px; }
.minn-gfb-grip:hover { color: var(--text2); }
.minn-gfb-grip svg { width: 14px; height: 14px; }
.minn-gfb-clabel { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.minn-gfb-nolabel .minn-gfb-clabel { color: var(--text3); font-weight: 500; }
.minn-gfb-req { color: var(--red-text); margin-inline-start: 3px; }
.minn-gfb-chip {
flex-shrink: 0; font-size: 11px; line-height: 17px; color: var(--text3);
border: 1px solid var(--border); border-radius: 20px; padding: 0 7px; white-space: nowrap;
}
.minn-gfb-cctl { margin-inline-start: auto; display: inline-flex; gap: 4px; flex-shrink: 0; opacity: 0; transition: opacity 0.12s; }
.minn-gfb-cell:hover .minn-gfb-cctl, .minn-gfb-cell.sel .minn-gfb-cctl, .minn-gfb-cell:focus-within .minn-gfb-cctl { opacity: 1; }
@media (hover: none) { .minn-gfb-cctl { opacity: 1; } }
.minn-gfb-cctl button {
background: var(--panel); border: 1px solid var(--border); border-radius: 6px; color: var(--muted);
width: 24px; height: 22px; line-height: 1; cursor: pointer; font-size: 12px;
}
.minn-gfb-cctl button:hover { color: var(--text); border-color: var(--border2); }
.minn-gfb-cctl [data-gfbdel]:hover { color: var(--red-text); border-color: currentColor; }
/* Drawings of the controls: quiet, never inputs. */
.minn-gfb-mock {
display: flex; align-items: center; gap: 8px; min-width: 0; height: 36px; padding: 0 10px;
border: 1px solid var(--border2); border-radius: 7px; background: var(--panel);
color: var(--muted); font-size: 13px;
}
.minn-gfb-mock > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minn-gfb-mock svg { width: 15px; height: 15px; flex-shrink: 0; }
.minn-gfb-mock-tall { height: 84px; align-items: flex-start; padding-top: 8px; }
.minn-gfb-mock-multi { height: auto; min-height: 66px; flex-direction: column; align-items: stretch; gap: 1px; padding: 6px 10px; }
.minn-gfb-mock-multi > span { flex: none; line-height: 20px; color: var(--text3); }
.minn-gfb-mock-other { border-style: dashed; }
.minn-gfb-subs { display: flex; gap: 10px; min-width: 0; }
.minn-gfb-sub { flex: 1; min-width: 0; }
.minn-gfb-sublabel { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minn-gfb-subs-address { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.minn-gfb-subs-address .minn-gfb-sub[data-in="1"], .minn-gfb-subs-address .minn-gfb-sub[data-in="2"] { grid-column: 1 / -1; }
.minn-gfb-choices { display: flex; flex-direction: column; gap: 6px; }
.minn-gfb-choice { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; color: var(--text2); }
.minn-gfb-mark {
position: relative; flex-shrink: 0; width: 16px; height: 16px; padding: 0;
border: 1.5px solid var(--border2); background: var(--panel);
}
.minn-gfb-mark-radio { border-radius: 50%; }
.minn-gfb-mark-check { border-radius: 4px; }
.minn-gfb-mark.on { border-color: var(--accent); background: var(--accent); }
.minn-gfb-mark-radio.on::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent-fg); }
.minn-gfb-mark-check.on::after {
content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
border: solid var(--accent-fg); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.minn-gfb-more { font-size: 12px; color: var(--muted); padding-inline-start: 24px; }
.minn-gfb-drop {
display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px;
border: 1.5px dashed var(--border2); border-radius: 8px; color: var(--text3); font-size: 13px;
}
.minn-gfb-drop svg { width: 16px; height: 16px; }
.minn-gfb-listrow { display: flex; align-items: center; gap: 8px; }
.minn-gfb-listrow .minn-gfb-mock { flex: 1; }
.minn-gfb-listbtn { display: inline-flex; color: var(--muted); }
.minn-gfb-listbtn svg { width: 16px; height: 16px; }
.minn-gfb-html {
padding: 8px 10px; border-radius: 8px; background: var(--panel2);
font-size: 13px; line-height: 1.5; color: var(--text2); overflow-wrap: anywhere;
}
.minn-gfb-note { font-size: 12.5px; color: var(--muted); }
.minn-gfb-cdesc { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--text3); overflow-wrap: anywhere; }
.minn-gfb-t-section .minn-gfb-clabel { font-size: 16px; }
.minn-gfb-rule { height: 1px; background: var(--border2); }
.minn-gfb-t-hidden { border: 1px dashed var(--border); }
.minn-gfb-t-hidden.sel { border-style: solid; border-color: var(--accent); }
.minn-gfb-page { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text3); }
.minn-gfb-page > span:not(.minn-gfb-page-line) { border: 1px solid var(--border2); border-radius: 6px; padding: 3px 10px; }
.minn-gfb-page-line { flex: 1; border-top: 1px dashed var(--border2); }
.minn-gfb-submit-row { margin-top: 18px; }
.minn-gfb-submit {
border: 0; border-radius: 8px; padding: 9px 18px; cursor: pointer;
background: var(--accent); color: var(--accent-fg); font: inherit; font-size: 14px; font-weight: 600;
}
.minn-gfb-submit.sel, .minn-gfb-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The panel. */
.minn-gfb-panel {
position: sticky; top: 12px; max-height: calc(100vh - 120px); overflow-y: auto;
display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px;
border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
}
.minn-gfb-phead { display: flex; align-items: center; gap: 8px; min-width: 0; }
.minn-gfb-phead strong { min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minn-gfb-ptag { flex-shrink: 0; font-size: 12px; color: var(--text3); white-space: nowrap; }
.minn-gfb-x {
margin-inline-start: auto; flex-shrink: 0; width: 26px; height: 26px; line-height: 1; font-size: 15px;
background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); cursor: pointer;
}
.minn-gfb-x:hover { color: var(--text); border-color: var(--border2); }
.minn-gfb-pbody { display: flex; flex-direction: column; gap: 12px; }
.minn-gfb-set { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.minn-gfb-set > .minn-field-label { margin: 0; }
.minn-gfb-set.minn-fgb-set-inline { flex-direction: row; align-items: center; justify-content: space-between; }
.minn-gfb-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.minn-gfb-widths { width: 100%; }
.minn-gfb-widths .minn-tab { flex: 1 1 0; padding: 5px 0; }
.minn-gfb-pgroup { margin-top: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); }
.minn-gfb-ptypes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.minn-gfb-ptype {
text-align: start; padding: 8px 10px; cursor: grab; font: inherit; font-size: 13px; color: var(--text);
background: var(--panel2); border: 1px solid var(--border); border-radius: 8px;
}
.minn-gfb-ptype:hover, .minn-gfb-ptype:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.minn-gfb-pfoot { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.minn-gfb-pfoot .minn-btn-soft { padding: 5px 10px; font-size: 12.5px; }
.minn-gfb-del:hover { color: var(--red-text); border-color: currentColor; }
.minn-gfb-adv { padding-top: 10px; border-top: 1px solid var(--border); }
.minn-gfb-adv > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text2); }
.minn-gfb-adv[open] > summary { margin-bottom: 10px; }
.minn-gfb-adv > .minn-gfb-set + .minn-gfb-set { margin-top: 12px; }
/* Choices: grip, default marker, label (and value), remove. */
.minn-gfb-chs { display: flex; flex-direction: column; gap: 6px; }
.minn-gfb-ch { position: relative; display: flex; align-items: center; gap: 6px; }
.minn-gfb-ch .minn-input { flex: 1; min-width: 0; padding-top: 6px; padding-bottom: 6px; }
.minn-gfb-ch .minn-gfb-mark { cursor: pointer; }
.minn-gfb-chs.values [data-cval] { flex: 0 0 34%; }
.minn-gfb .minn-fgb-meta { flex-wrap: wrap; row-gap: 4px; }
.minn-gfb-ch.dragging { opacity: 0.35; }
.minn-gfb-ch.drop-above { box-shadow: 0 -4px 0 -2px var(--accent); }
.minn-gfb-ch.drop-below { box-shadow: 0 4px 0 -2px var(--accent); }
.minn-gfb-chgrip { display: inline-flex; color: var(--muted); cursor: grab; }
.minn-gfb-chgrip svg { width: 13px; height: 13px; }
.minn-gfb-chx {
flex-shrink: 0; width: 24px; height: 24px; cursor: pointer;
background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted);
}
.minn-gfb-chx:hover { color: var(--red-text); border-color: currentColor; }
.minn-gfb-chfoot { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.minn-gfb-chfoot .minn-btn-soft { padding: 4px 10px; font-size: 12.5px; }
.minn-gfb-parts { display: flex; flex-direction: column; gap: 6px; }
.minn-gfb-part { display: flex; align-items: center; gap: 10px; }
.minn-gfb-part .minn-switch { flex-shrink: 0; }
.minn-gfb-part .minn-input { flex: 1; min-width: 0; padding-top: 6px; padding-bottom: 6px; }
/* Conditional logic: one sentence, then a rule per row. */
.minn-gfb-logic {
display: flex; flex-direction: column; gap: 8px; padding: 10px;
border: 1px solid var(--border); border-radius: 10px; background: var(--panel2);
}
.minn-gfb-logic-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--text2); }
.minn-gfb-logic-line .minn-ac { width: 80px; }
.minn-gfb-rule-row {
display: grid; grid-template-columns: 116px minmax(0, 1fr) 24px; gap: 6px; align-items: center;
padding-bottom: 8px; border-bottom: 1px dashed var(--border);
}
.minn-gfb-rule-row > [data-rf] { grid-column: 1 / -1; }
.minn-gfb-rule-row .minn-ac, .minn-gfb-rule-row .minn-input { min-width: 0; }
@media (max-width: 1100px) {
.minn-gfb-main { grid-template-columns: minmax(0, 1fr); }
.minn-gfb-panel { position: static; max-height: none; }
}
@media (max-width: 640px) {
.minn-gfb { padding: 14px 12px 16px; }
.minn-gfb-canvas { padding: 12px 10px 18px; }
.minn-gfb-grid { grid-template-columns: minmax(0, 1fr); }
.minn-gfb-cell { grid-column: 1 / -1 !important; }
.minn-gfb-spacer { display: none; }
}
/* Rows control (ACF repeaters): one card per row, chrome in its header. */
.minn-field-rows { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.minn-rows-card {
border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px 12px;
background: var(--panel2); display: flex; flex-direction: column; gap: 8px;
}
.minn-rows-head { display: flex; align-items: center; gap: 4px; }
.minn-rows-n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.minn-rows-spring { flex: 1; }
.minn-rows-head button {
background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted);
width: 24px; height: 22px; line-height: 1; cursor: pointer; font-size: 12px;
}
.minn-rows-head button:hover:not(:disabled) { color: var(--text); border-color: var(--border2); }
.minn-rows-head button:disabled { opacity: 0.35; cursor: default; }
.minn-rows-head [data-rdel]:hover { color: var(--red, #e5484d); border-color: currentColor; }
/* Drag to reorder (the menus and widgets grip). The drop line sits outside
the card's border so it reads between cards, not inside one. */
.minn-rows-grip { margin: 0 2px 0 -4px; }
.minn-rows-card:hover .minn-rows-grip { opacity: 1; }
.minn-rows-card.dragging { opacity: 0.35; }
.minn-rows-card.drop-above { box-shadow: 0 -3px 0 -1px var(--accent); }
.minn-rows-card.drop-below { box-shadow: 0 3px 0 -1px var(--accent); }
.minn-field-rows > [data-radd] { align-self: flex-start; }
/* Flex control (ACF flexible content): sections collapse by default, so a
page of them reads as a list of what it holds rather than a wall of forms.
The body keeps its own display so [hidden] has nothing to fight. */
.minn-rows-body:not([hidden]) { display: flex; flex-direction: column; gap: 8px; }
.minn-rows-card.flex { padding-bottom: 10px; }
.minn-rows-card.flex.open { padding-bottom: 12px; }
.minn-rows-card.flex .minn-rows-n { color: var(--text); font-size: 12.5px; font-weight: 500; cursor: pointer; }
.minn-rows-card.flex .minn-rows-spring { flex: 0 0 4px; }
.minn-rows-preview {
flex: 1; min-width: 0; cursor: pointer; font-size: 12px; color: var(--muted);
margin-inline-start: 4px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.minn-rows-toggle { flex-shrink: 0; }
.minn-rows-toggle svg { width: 13px; height: 13px; display: block; margin: 0 auto; transition: transform 0.15s ease; }
.minn-rows-card.open .minn-rows-toggle svg { transform: rotate(90deg); }
.minn-rev-list {
max-height: min(70vh, 640px); overflow-y: auto; padding: 4px 0 10px;
}
.minn-rev-list-row {
display: grid; grid-template-columns: 36px 1fr auto 20px; gap: 10px; align-items: center;
width: 100%; text-align: start; background: none; border: none;
border-bottom: 1px solid var(--border); padding: 11px 18px; cursor: pointer; color: var(--text2); font: inherit;
}
.minn-rev-list-row:hover { background: var(--bg2); color: var(--text); }
.minn-rev-list-idx { font-size: 12px; color: var(--text3); font-variant-numeric: tabular-nums; }
.minn-rev-list-when { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.minn-rev-list-ago { font-weight: 600; color: var(--text); font-size: 13.5px; }
.minn-rev-list-abs { font-size: 12px; color: var(--text3); }
.minn-rev-list-who { font-size: 13px; color: var(--text3); white-space: nowrap; }
/* Internal link picker — results under the link popover's URL field. */
.minn-link-results { margin-top: 7px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden auto; max-height: 190px; }
.minn-link-result {
display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: start;
background: none; border: 0; cursor: pointer; padding: 7px 10px; color: var(--text2); font: inherit; font-size: 13px;
}
.minn-link-result:hover, .minn-link-result.active { background: var(--bg2); color: var(--text); }
.minn-link-result-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minn-link-result-type { margin-inline-start: auto; flex-shrink: 0; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text3); }
/* Focus mode — two fixed overlays fade everything above/below the caret
block. z-30 keeps the toolbar (35), stats pill (40) and chips (69+) crisp.
Chrome-only: content never gets a class or style from this. */
.minn-focus-dim {
position: fixed; left: 0; right: 0; z-index: 30; pointer-events: none;
background: color-mix(in srgb, var(--bg) 80%, transparent);
/* Caret moves glide; .instant (set while scrolling) glues the band to the
content — animating during scroll reads as rubber-banding. */
transition: top 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), height 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.minn-focus-dim.instant { transition: none; }
.minn-tool.active { background: var(--accent-soft); color: var(--accent2); }
/* Zen: focus mode collapses the nav and the editor sidebar — nothing but the
writing column, centered. body-class specificity outranks the responsive
narrow-nav rules, so this wins at every breakpoint. */
.minn-sidebar { transition: width 0.25s ease, padding 0.25s ease, opacity 0.2s ease; }
body.minn-focus-zen .minn-sidebar,
body.minn-nav-hidden .minn-sidebar,
body.minn-outline-mode .minn-sidebar { width: 0; min-width: 0; padding-inline-start: 0; padding-inline-end: 0; opacity: 0; overflow: hidden; border-inline-end: 0; }
/* Outline mode — nav gone, every sidebar card gone except the Outline. */
body.minn-outline-mode .minn-editor-side > :not(#minn-outline-card) { display: none !important; }
/* Nav show/hide — a topbar .minn-icon-btn now (was a left-edge tab). While
the nav is hidden the icon dims less so the way back stays discoverable. */
#minn-nav-tab { flex-shrink: 0; margin-inline-start: -6px; }
body.minn-nav-hidden #minn-nav-tab { color: var(--text); }
.minn-editor { transition: grid-template-columns 0.25s ease, gap 0.25s ease; }
body.minn-focus-zen .minn-editor { grid-template-columns: minmax(0, 1fr) 0px; gap: 0; }
.minn-editor-side { transition: opacity 0.2s ease; }
body.minn-focus-zen .minn-editor-side { opacity: 0; overflow: hidden; pointer-events: none; }
/* Image editor — canvas preview + drag crop box; pixels stay server-side. */
.minn-imged-bar { display: flex; align-items: center; gap: 8px; padding: 12px 18px 0; }
.minn-imged-hint { margin-inline-start: auto; font-size: 12.5px; color: var(--text3); }
.minn-imged-stage {
position: relative; display: flex; align-items: center; justify-content: center;
margin: 14px 18px; min-height: 300px; background: var(--bg2);
border: 1px solid var(--border); border-radius: 10px; padding: 14px;
touch-action: none; user-select: none; overflow: hidden; /* contain the crop dim shadow */
}
#minn-imged-canvas { max-width: 100%; border-radius: 4px; cursor: crosshair; }
.minn-imged-crop {
position: absolute; border: 1.5px solid var(--accent); cursor: move;
background: color-mix(in srgb, var(--accent) 10%, transparent);
box-shadow: 0 0 0 9999px color-mix(in srgb, var(--bg) 55%, transparent);
}
.minn-imged-crop span {
position: absolute; width: 11px; height: 11px; background: var(--accent);
border: 2px solid var(--bg); border-radius: 50%;
}
.minn-imged-crop [data-h="nw"] { top: -6px; left: -6px; cursor: nwse-resize; }
.minn-imged-crop [data-h="ne"] { top: -6px; right: -6px; cursor: nesw-resize; }
.minn-imged-crop [data-h="sw"] { bottom: -6px; left: -6px; cursor: nesw-resize; }
.minn-imged-crop [data-h="se"] { bottom: -6px; right: -6px; cursor: nwse-resize; }
/* Date-time picker — themed replacement for Chrome's native calendar. */
.minn-dp-input { cursor: pointer; }
.minn-dp-pop {
position: fixed; z-index: 60; width: 264px; padding: 12px;
background: var(--panel); border: 1px solid var(--border2); border-radius: 12px;
box-shadow: var(--shadow); animation: minnScaleIn 0.12s ease;
}
.minn-dp-head { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.minn-dp-month { font-weight: 700; font-size: 13.5px; margin-inline-end: auto; padding-inline-start: 4px; }
.minn-dp-nav {
width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 7px;
background: none; color: var(--text2); cursor: pointer; font-size: 15px; line-height: 1;
}
.minn-dp-nav:hover { background: var(--hover); color: var(--text); }
.minn-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.minn-dp-wd { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--text3); padding: 3px 0 5px; }
.minn-dp-day {
position: relative;
height: 30px; border: none; border-radius: 8px; background: none; color: var(--text2);
font: inherit; font-size: 12.5px; cursor: pointer;
}
.minn-dp-day:hover { background: var(--hover); color: var(--text); }
.minn-dp-day.out { color: var(--text3); opacity: 0.45; }
.minn-dp-day.today { box-shadow: inset 0 0 0 1px var(--border2); }
.minn-dp-day.sel { background: var(--accent); color: var(--accent-fg); font-weight: 700; opacity: 1; }
/* Other published/scheduled posts on this day (schedule calendar awareness).
Tint + a clear under-dot — a 4px speck was easy to miss on light theme. */
.minn-dp-day.has-posts:not(.sel) {
background: var(--accent-soft, rgba(110, 98, 245, 0.14));
color: var(--text);
font-weight: 600;
}
.minn-dp-day.has-posts::after {
content: '';
position: absolute;
left: 50%; bottom: 2px;
width: 5px; height: 5px; margin-inline-start: -2.5px;
border-radius: 50%;
background: var(--accent);
pointer-events: none;
}
/* Amber when any item that day is still scheduled (future). */
.minn-dp-day.has-posts.has-scheduled:not(.sel) {
background: rgba(224, 164, 88, 0.16);
}
.minn-dp-day.has-posts.has-scheduled::after { background: var(--amber, #e0a458); }
.minn-dp-day.sel.has-posts::after { background: var(--accent-fg, #fff); }
.minn-dp-day.out.has-posts {
background: transparent;
font-weight: inherit;
}
.minn-dp-day.out.has-posts::after { opacity: 0.55; }
.minn-dp-legend {
margin: 8px 2px 0;
font-size: 11px;
line-height: 1.35;
color: var(--text3);
}
.minn-dp-time { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; }
.minn-dp-time .minn-input { flex: 1; font-family: var(--font-mono); font-size: 12.5px; }
.minn-dp-foot { display: flex; gap: 8px; margin-top: 10px; }
.minn-dp-foot .minn-btn-soft { flex: 1; }
/* Collapsible sidebar cards — the title is the toggle, chevron shows state.
Collapsed hides everything but the title; per-card state persists. */
.minn-side-card.collapsible > .minn-side-title { cursor: pointer; user-select: none; display: flex; align-items: center; }
.minn-side-card.collapsible > .minn-side-title::after {
content: ''; margin-inline-start: auto; width: 8px; height: 8px; flex-shrink: 0;
border-inline-end: 1.8px solid var(--text3); border-bottom: 1.8px solid var(--text3);
transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.15s ease;
}
.minn-side-card.collapsed > .minn-side-title { margin-bottom: 0; }
.minn-side-card.collapsed > .minn-side-title::after { transform: rotate(-45deg) translate(-1px, 1px); }
/* !important: several card bodies carry inline display:flex styles. */
.minn-side-card.collapsed > :not(.minn-side-title) { display: none !important; }
/* Outline panel — heading ToC in the editor sidebar. Indent rides --olvl.
LAST card in the side column + sticky: the grid stretches the column to
the editor's full height, so the outline stays pinned while a long post
scrolls (and being last, it never slides over the cards below it). */
/* The CARD must not be scrollable — a sticky element with overflow:auto
falls off Chrome's compositor fast path and lags the scroll by a frame
(reads as wiggle/shake). The inner LIST scrolls instead, and translateZ
pins the card to its own layer. */
#minn-outline-card { position: sticky; top: 14px; transform: translateZ(0); }
#minn-outline { max-height: calc(100vh - 92px); overflow-y: auto; }
.minn-outline-row {
display: block; width: 100%; text-align: start; background: none; border: 0; cursor: pointer;
padding: 5px 8px 5px calc(8px + var(--olvl, 0) * 14px); border-radius: 7px;
color: var(--text2); font: inherit; font-size: 13px; line-height: 1.35;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.minn-outline-row:hover { background: var(--bg2); color: var(--text); }
/* Absolute inside .minn-scroll — rides the scroll natively, never chases it. */
.minn-outline-ping {
position: absolute; z-index: 70; pointer-events: none; border-radius: 8px;
background: color-mix(in srgb, var(--accent, #7c7ff2) 14%, transparent);
box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent, #7c7ff2) 45%, transparent);
opacity: 1; transition: opacity 0.55s ease;
}
.minn-outline-ping.out { opacity: 0; }
/* Find & replace — a fixed bar under the sticky toolbar; match highlights
are overlay rects INSIDE the scroller at content coordinates (the
outline-ping rule: chrome never touches the typing surface, and overlays
tracking content must ride the scroll natively). */
.minn-find-bar {
position: fixed; z-index: 70; width: 340px; padding: 8px;
display: flex; flex-direction: column; gap: 6px;
background: var(--panel); border: 1px solid var(--border2); border-radius: 11px;
box-shadow: var(--shadow); animation: minnScaleIn 0.12s ease;
}
.minn-find-row { display: flex; align-items: center; gap: 6px; }
.minn-find-row input {
flex: 1; min-width: 0; font: inherit; font-size: 13px; color: var(--text);
background: var(--bg2); border: 1px solid var(--border); border-radius: 7px; padding: 5px 9px;
}
.minn-find-row input:focus { outline: none; border-color: var(--accent); }
#minn-find-count { font-size: 11.5px; color: var(--text3); min-width: 30px; text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.minn-find-btn {
width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center;
font-size: 13px; color: var(--text2); background: transparent; border: 1px solid transparent;
border-radius: 6px; cursor: pointer;
}
.minn-find-btn:hover { background: var(--hover); color: var(--text); }
.minn-find-btn.on { color: var(--accent2); background: var(--accent-soft); border-color: var(--accent); }
.minn-find-act {
flex: none; font-size: 12.5px; font-weight: 600; color: var(--text2); background: var(--panel2);
border: 1px solid var(--border); border-radius: 7px; padding: 5px 10px; cursor: pointer;
}
.minn-find-act:hover { border-color: var(--accent); color: var(--text); }
#minn-find-marks { position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 0; pointer-events: none; }
.minn-find-mark {
position: absolute; border-radius: 3px;
background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.minn-find-mark.cur {
background: color-mix(in srgb, var(--amber) 42%, transparent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--amber) 60%, transparent);
}
.minn-revision-preview {
margin: 0 18px 14px; padding: 14px 16px; background: var(--bg2); border: 1px solid var(--border);
border-radius: 10px; font-size: 14px; line-height: 1.65; max-height: 42vh; overflow-y: auto;
}
.minn-revision-preview img { max-width: 100%; height: auto; border-radius: 6px; }
.minn-revision-preview h1, .minn-revision-preview h2, .minn-revision-preview h3 { font-size: 1.1em; }
/* Revision diff — side-by-side, block rows aligned; unchanged rows dim so
the changes carry the eye. ins/del ride color-mix tints off the status
tokens, which hold in both themes. */
.minn-diff {
margin: 0 18px 14px; border: 1px solid var(--border); border-radius: 10px;
max-height: 64vh; overflow-y: auto; overflow-x: hidden; font-size: 13.5px; line-height: 1.6;
/* Firefox track + WebKit UA chrome (scrollbar corner) follow color-scheme,
same hard-won as .minn-css-editor — default light paints a white square. */
scrollbar-color: var(--border2) transparent;
color-scheme: dark;
}
[data-theme="light"] .minn-diff { color-scheme: light; }
.minn-diff::-webkit-scrollbar-corner { background: var(--bg); }
.minn-diff-headrow {
display: grid; grid-template-columns: 1fr 1fr; position: sticky; top: 0; z-index: 2;
background: var(--bg2); border-bottom: 1px solid var(--border);
font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3);
}
.minn-diff-headrow > div { padding: 8px 14px; }
.minn-diff-headrow > div + div { border-inline-start: 1px solid var(--border); }
.minn-diff-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
.minn-diff-row:last-child { border-bottom: 0; }
.minn-diff-cell { padding: 8px 14px; min-width: 0; overflow-wrap: break-word; }
.minn-diff-cell + .minn-diff-cell { border-inline-start: 1px solid var(--border); }
.minn-diff-cell.empty { background: repeating-linear-gradient(45deg, transparent, transparent 6px, color-mix(in srgb, var(--border) 45%, transparent) 6px, color-mix(in srgb, var(--border) 45%, transparent) 7px); }
.minn-diff-row.same .minn-diff-cell { color: var(--text3); }
.minn-diff-row.same img { max-width: 100%; height: auto; opacity: 0.6; border-radius: 6px; }
.minn-diff-row.same h1, .minn-diff-row.same h2, .minn-diff-row.same h3 { font-size: 1.05em; margin: 0; }
.minn-diff del, .minn-diff-inline del {
text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--red) 70%, transparent);
background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--text); border-radius: 3px; padding: 0 1px;
}
.minn-diff ins, .minn-diff-inline ins {
text-decoration: none;
background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--text); border-radius: 3px; padding: 0 1px;
}
.minn-diff-row.del .minn-diff-cell:first-child,
.minn-diff-row.add .minn-diff-cell:last-child { background: color-mix(in srgb, var(--bg2) 60%, transparent); }
/* Custom-field rows live inside the content diff so This revision /
Current is named once. A spanning section + field name, then two
compact value cells — deliberately untinted, so a field row reads
as key-value metadata and never impersonates a content change.
Section rows band the table (Custom fields / Content): a heavier top
edge than the row hairlines, and they stick just under the headrow so
a long scroll still names the region. top overlaps the headrow's
computed ~34.6px height by a fraction — the overlap hides behind the
opaque higher-z headrow, where a gap would show a slit of content. */
.minn-diff-row.minn-diff-sec > div,
.minn-diff-row.minn-diff-fieldname > div { grid-column: 1 / -1; }
.minn-diff-row.minn-diff-sec {
border-bottom: 0; border-top: 2px solid var(--border);
position: sticky; top: 34px; z-index: 1;
}
.minn-diff-headrow + .minn-diff-row.minn-diff-sec { border-top: 0; }
.minn-diff-row.minn-diff-sec > div {
padding: 8px 14px 2px; font-size: 11px; font-weight: 650; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--text3); background: var(--bg2);
}
.minn-diff-row.minn-diff-fieldname { border-bottom: 0; }
.minn-diff-row.minn-diff-fieldname > div {
padding: 8px 14px 0; font-size: 12.5px; font-weight: 600; color: var(--text2);
}
.minn-diff-row.field .minn-diff-cell { padding: 5px 14px 9px; font-size: 12.5px; }
.minn-rev-field-empty { color: var(--text3); font-style: italic; }
.minn-rev-swatch {
display: inline-block; width: 14px; height: 14px; border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--text) 28%, transparent);
vertical-align: -2px; margin-inline-end: 7px; overflow: hidden;
background: repeating-conic-gradient(var(--border) 0% 25%, var(--panel) 0% 50%) 50% / 8px 8px;
}
.minn-rev-swatch > span { display: block; width: 100%; height: 100%; }
/* ===== Themes ===== */
.minn-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.minn-theme { overflow: hidden; }
.minn-theme.minn-theme-out { opacity: 0; transform: scale(0.96); transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; }
.minn-theme.is-active { border-color: var(--accent); }
.minn-theme-shot {
aspect-ratio: 4 / 3; background: var(--panel2); background-size: cover; background-position: top center;
position: relative; border-bottom: 1px solid var(--border);
}
.minn-theme-badge { position: absolute; top: 9px; inset-inline-start: 9px; }
.minn-theme-badge-u { position: absolute; top: 9px; inset-inline-end: 9px; }
.minn-theme-info { padding: 12px 14px 13px; }
.minn-theme-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; min-height: 28px; }
/* Extensions cards: ⋯ is always visible (cards have no row-hover affordance). */
.minn-ext-more { opacity: 1; margin-inline-start: auto; flex-shrink: 0; }
.minn-theme-shot-link { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.minn-theme-shot-link:hover { opacity: 0.92; box-shadow: inset 0 0 0 2px var(--accent); }
.minn-theme-author { color: var(--text2); text-decoration: none; border-bottom: 1px solid var(--border2); }
.minn-theme-author:hover { color: var(--accent2); border-bottom-color: var(--accent2); }
/* ===== Scheme swatches + custom slot editors (profile) ===== */
.minn-scheme-row {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px;
}
/* The site default sits first in a person's own picker, set off from the
named schemes by a hairline. */
.minn-scheme-sep { width: 1px; height: 26px; background: var(--border2); margin: 0 2px; }
.minn-scheme-site-tag {
position: absolute; top: 4px; inset-inline-start: 5px; font-size: 8.5px; font-weight: 700; line-height: 1;
letter-spacing: 0.02em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); pointer-events: none;
}
.minn-site-ap-own {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px;
padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 13.5px; color: var(--text2);
}
.minn-scheme-swatch {
position: relative; width: 34px; height: 34px; border-radius: 10px; border: 2px solid transparent;
padding: 0; cursor: pointer; background: transparent;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.minn-scheme-swatch-face {
display: block; width: 100%; height: 100%; border-radius: 8px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
}
.minn-scheme-swatch-dot {
position: absolute; inset-inline-end: 3px; bottom: 3px; width: 11px; height: 11px;
border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.55);
box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.minn-scheme-swatch:hover { transform: scale(1.06); }
.minn-scheme-swatch.sel {
box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent);
}
.minn-scheme-swatch:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent);
}
.minn-scheme-custom-face {
display: flex !important; align-items: center; justify-content: center;
background: var(--panel2); color: var(--text2); font-size: 16px; font-weight: 600;
border: 1px dashed var(--border2); box-shadow: none;
}
.minn-scheme-custom-btn.sel .minn-scheme-custom-face {
background: var(--accent); color: var(--accent-fg); border-style: solid; border-color: transparent;
}
.minn-scheme-custom { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.minn-scheme-group-title {
font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
color: var(--text3); margin-bottom: 6px;
}
.minn-scheme-slot {
display: flex; align-items: center; gap: 10px; margin-bottom: 6px; cursor: pointer;
}
.minn-scheme-slot-swatch {
width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}
.minn-scheme-slot-label { flex: 1; font-size: 13px; font-weight: 500; color: var(--text2); min-width: 0; }
.minn-scheme-slot input[type="color"] {
width: 36px; height: 28px; padding: 0; border: 1px solid var(--border); border-radius: 6px;
background: var(--panel2); cursor: pointer;
}
/* Profile theme mode: denser exclusive switches under scheme swatches. */
.minn-theme-mode-toggles { margin-top: 6px; gap: 8px; }
.minn-theme-mode-toggles .minn-toggle-desc { margin-top: 1px; }
/* ===== Switch ===== */
.minn-switch {
position: relative; width: 34px; height: 20px; border-radius: 20px; border: none; cursor: pointer;
flex-shrink: 0; background: var(--border2); transition: background 0.18s; padding: 0;
}
.minn-switch.on { background: var(--accent); }
.minn-switch-knob {
position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%;
background: #fff; transition: left 0.18s; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.minn-switch.on .minn-switch-knob { inset-inline-start: 16px; }
.minn-switch:disabled { opacity: 0.5; cursor: default; }
/* ===== Settings ===== */
.minn-settings { display: grid; grid-template-columns: 180px 1fr; gap: 30px; }
/* The section nav sticks so it stays visible while scrolling a long tab
(Site, Comments). align-self:start keeps it from stretching the grid row;
the list is short + non-scrollable, so no sticky-compositor wiggle. */
/* The nav pins while the body scrolls, and a store with many extension
pages makes it taller than the window: the LIST scrolls inside the
pinned frame (sticky + overflow on one element drops off the compositor
and lags a frame), so the last entries are reachable from anywhere. */
.minn-settings-nav { display: flex; flex-direction: column; position: sticky; top: 8px; align-self: start; max-height: calc(100vh - 88px); min-width: 0; transform: translateZ(0); }
.minn-settings-nav-list { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-inline-end: 4px; }
.minn-settings-nav-list::-webkit-scrollbar { width: 5px; }
.minn-settings-nav-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
.minn-settings-nav-item { padding: 7px 11px; border-radius: 8px; font-size: 14px; cursor: pointer; font-weight: 500; color: var(--text2); background: transparent; border: none; text-align: start; }
.minn-settings-nav-item.active { background: var(--panel2); color: var(--text); font-weight: 600; }
.minn-settings-body { max-width: 560px; display: flex; flex-direction: column; gap: 26px; }
.minn-settings-title { font-weight: 700; font-size: 17px; margin-bottom: 3px; }
.minn-settings-sub { color: var(--text2); font-size: 14px; }
.minn-settings-nav-group { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3); padding: 12px 11px 3px; }
.minn-settings-nav-group:first-child { padding-top: 4px; }
.minn-settings-nav-sub { padding-inline-start: 18px; }
/* Store settings: a WooCommerce section intro under its group title. */
.minn-fields-note { font-size: 13px; color: var(--text2); margin: 8px 0 -2px; line-height: 1.5; }
#minn-store-form, #minn-store-shipping, #minn-store-payments { display: flex; flex-direction: column; gap: 16px; }
.minn-store-emails { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.minn-store-email { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg2); }
.minn-store-email:last-child { border-bottom: 0; }
.minn-store-email-main { flex: 1; min-width: 0; }
.minn-store-email-title { font-weight: 600; font-size: 13.5px; }
.minn-store-email.off .minn-store-email-title { color: var(--text3); }
.minn-store-email-to { font-size: 12px; color: var(--text3); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minn-store-email-gap { width: 40px; flex-shrink: 0; }
.minn-store-email .minn-switch { flex-shrink: 0; }
.minn-store-form-modal .minn-surface-settings { display: flex; flex-direction: column; gap: 18px; }
.minn-store-gateway { cursor: grab; }
.minn-store-gateway.dragging { opacity: 0.5; }
.minn-store-gateway.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.minn-store-gateway.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.minn-store-grip { color: var(--text3); display: inline-flex; flex-shrink: 0; }
.minn-store-grip svg { width: 15px; height: 15px; }
.minn-store-gateway-label { font-weight: 400; color: var(--text3); font-size: 12.5px; }
.minn-store-email a.minn-btn-soft { text-decoration: none; }
.minn-store-zone, .minn-store-method { cursor: grab; }
.minn-store-zone.dragging, .minn-store-method.dragging { opacity: 0.5; }
.minn-store-zone.drop-before, .minn-store-method.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.minn-store-zone.drop-after, .minn-store-method.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.minn-store-grip-blank { width: 15px; }
.minn-store-zone-methods { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.minn-store-zone-methods .minn-lic-cat { margin-inline-start: 0; text-transform: none; letter-spacing: 0; font-size: 11px; }
.minn-store-zone-methods .minn-lic-cat.off { opacity: 0.55; text-decoration: line-through; }
.minn-store-zone-head { display: flex; align-items: center; gap: 12px; }
.minn-store-zone-head .minn-fields-sub { margin: 0; }
.minn-store-zone-actions { display: flex; gap: 8px; align-items: center; }
.minn-store-zone-add { display: flex; gap: 8px; align-items: center; }
.minn-store-zone-add .minn-ac { flex: 1; }
.minn-store-email .minn-x-btn { flex-shrink: 0; }
.minn-store-gateway-label.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; }
.minn-btn-soft.minn-btn-danger { color: var(--red); }
#minn-store-tax, #minn-store-advanced { display: flex; flex-direction: column; gap: 16px; }
.minn-store-secret { display: flex; flex-direction: column; gap: 10px; }
.minn-store-secret-row { display: flex; gap: 8px; }
.minn-store-secret-row .minn-input { flex: 1; min-width: 0; }
.minn-store-email .minn-toggle-desc .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }
.minn-store-settings .minn-settings-body { max-width: 760px; }
.minn-store-tax-head, .minn-store-tax { display: grid; grid-template-columns: 64px 56px minmax(0, 1.2fr) minmax(0, 1fr) 70px minmax(0, 1.4fr) 44px auto; gap: 10px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
.minn-store-tax-head { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text3); background: var(--panel2); }
.minn-store-tax { background: var(--bg2); cursor: grab; }
.minn-store-tax:last-child { border-bottom: 0; }
.minn-store-tax > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minn-store-tax .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; }
.minn-store-tax-any { color: var(--text3); }
.minn-store-tax-actions { display: flex; gap: 6px; align-items: center; }
.minn-store-tax.dragging { opacity: 0.5; }
.minn-store-tax.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.minn-store-tax.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.minn-store-tax .minn-lic-cat { text-transform: none; letter-spacing: 0; font-size: 10.5px; }
@media (max-width: 860px) {
.minn-store-tax-head { display: none; }
.minn-store-tax { grid-template-columns: repeat( 3, minmax(0, 1fr) ); }
.minn-store-tax-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
.minn-fields { display: flex; flex-direction: column; gap: 16px; }
.minn-field-label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
/* Settings → Spam: provider cards + queue row */
.minn-spam-provider { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: var(--bg2); }
.minn-spam-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.minn-spam-name { font-weight: 650; font-size: 14.5px; }
.minn-spam-pill { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 7px; border-radius: 4px; }
.minn-spam-pill.ok { color: var(--green); background: rgba(70,184,129,0.12); }
.minn-spam-pill.warn { color: var(--amber-text); background: rgba(224,164,88,0.12); }
.minn-spam-blocked { font-size: 11.5px; color: var(--text3); }
.minn-spam-link { margin-inline-start: auto; font-size: 12px; white-space: nowrap; }
/* Change key… renders as a link but is a button (spam-card keyProvider). */
button.minn-spam-link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent2); font-family: inherit; }
.minn-spam-keyerr { color: var(--red); margin-top: 7px; }
/* Connections-center chips: non-license rows say what they are. */
.minn-lic-cat {
font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
color: var(--text3); background: var(--panel2); border: 1px solid var(--border);
padding: 1px 6px; border-radius: 4px; margin-inline-start: 6px; vertical-align: 1px;
}
.minn-lic-connlink { background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent2); font: inherit; }
.minn-spam-provider .minn-toggle-rows { margin-top: 12px; }
/* Settings → Connectors: key row inside a provider card */
.minn-conn-row { display: flex; align-items: center; gap: 9px; margin-top: 11px; }
/* The explicit display above would defeat [hidden] (the core-chip gotcha) —
the spam card's key row hides until Change key… is clicked. */
.minn-conn-row[hidden] { display: none; }
.minn-conn-row .minn-input { flex: 1; min-width: 0; }
.minn-conn-row .minn-toggle-desc { flex: 1; }
.minn-conn-row button { white-space: nowrap; }
/* Failed connectors load (post-install worker recycle) — Retry in-place. */
.minn-conn-failed { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.minn-conn-failed .minn-btn-soft { flex-shrink: 0; }
/* A linked image's wrapper must not change figure layout, and the
figure cutout (:has(img)) still matches through it. */
.minn-editor-body .wp-block-image > a { display: contents; }
/* Focus/outline exit chip (topbar, beside the editor status badge) */
.minn-mode-chip { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 8px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg2); color: var(--text2); font-size: 11px; font-weight: 650; cursor: pointer; vertical-align: middle; }
.minn-mode-chip:hover { color: var(--text); border-color: var(--text3); }
.minn-mode-chip-x { opacity: 0.7; }
/* Parameterized action inline form (detail modal + status card) */
.minn-action-fields { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.minn-action-fields-btns { display: flex; gap: 8px; }
/* Surface settings view (adapter-served schema forms) */
.minn-surface-settings { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.minn-spam-queue { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: 13px; color: var(--text2); }
.minn-spam-queue .minn-btn-soft { margin-inline-start: auto; white-space: nowrap; }
/* Settings → Design: the Additional CSS editor. pre + horizontal scroll so
long selectors don't soft-wrap into unreadable stair-steps. color-scheme
themes the UA-drawn scrollbar + resize corner (the .minn-schedule rule). */
.minn-css-editor { min-height: 320px; resize: vertical; tab-size: 2; line-height: 1.6; font-size: 13px; white-space: pre; overflow-x: auto; color-scheme: dark; }
[data-theme="light"] .minn-css-editor { color-scheme: light; }
.minn-input {
width: 100%; background: var(--bg2); border: 1px solid var(--border); border-radius: 9px;
padding: 9px 12px; color: var(--text); font-size: 14.5px;
}
.minn-input:focus { outline: none; border-color: var(--accent); }
textarea.minn-input { font-family: inherit; line-height: 1.5; resize: vertical; min-height: 38px; }
.minn-input.mono {
font-family: var(--font-mono);
font-size: 14px;
/* Pin, do not rely on inheritance: this is the class a website URL is typed
into (Your profile, Edit user, menu links). `none` rather than the page's
`no-contextual` — data fields have no use for fi/fl either. */
font-variant-ligatures: none;
font-feature-settings: "calt" 0;
}
select.minn-input {
-webkit-appearance: none; appearance: none; cursor: pointer; padding-inline-end: 32px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239d9da7' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 11px center;
}
.minn-divider { height: 1px; background: var(--border); }
/* Subsection heading within a settings tab (e.g. URLs, Spam). */
.minn-fields-sub {
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
color: var(--text3); margin: 2px 0 -4px;
}
/* Combobox: option panel anchored in-flow below the input — position is stable
while typing, unlike the native datalist popup. */
.minn-ac { position: relative; }
.minn-ac-input {
padding-inline-end: 32px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239d9da7' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 11px center;
}
.minn-ac-panel {
position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
background: var(--panel); border: 1px solid var(--border2); border-radius: 10px;
box-shadow: var(--shadow); max-height: 260px; overflow-y: auto; padding: 4px;
scrollbar-width: thin;
}
.minn-ac-item { padding: 7px 10px; border-radius: 7px; font-size: 14px; cursor: pointer; }
.minn-ac-item:hover, .minn-ac-item.active { background: var(--hover); }
.minn-ac-item.current { color: var(--accent2); font-weight: 600; }
.minn-ac-empty { padding: 7px 10px; color: var(--text3); font-size: 13px; }
/* A row that toggles rather than picks: the tick box says whether the record
is already in that term, so the list is the state and not just a menu. */
button.minn-ac-item.minn-ac-check { display: flex; align-items: center; gap: 9px; }
.minn-check {
flex: none; width: 15px; height: 15px; border-radius: 4px;
border: 1.5px solid var(--border2); background: var(--panel2);
position: relative; transition: background 0.12s, border-color 0.12s;
}
.minn-ac-check[aria-selected="true"] .minn-check { background: var(--accent); border-color: var(--accent); }
.minn-ac-check[aria-selected="true"] .minn-check::after {
content: ""; position: absolute; inset-inline-start: 4px; top: 1px;
width: 4px; height: 8px; border: solid var(--accent-fg); border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* Add new sits under a divider so it reads as an action, not another row. */
.minn-ac-foot { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }
button.minn-ac-item.minn-ac-add { display: flex; align-items: center; gap: 8px; color: var(--accent2); font-weight: 600; }
.minn-ac-add svg { width: 14px; height: 14px; }
/* The Add-a-term dialog: minnConfirm's shell with a form in it. */
.minn-term-fields { margin: 14px 0 4px; }
.minn-term-error { margin-top: 10px; font-size: 13px; color: var(--red); }
.minn-term-error[hidden] { display: none; }
/* Upload readout: which file, how far, and where it sits in the batch. Outside
the drop zone on purpose — the zone dims while it is busy, and the one thing
worth reading must not dim with it. */
.minn-upl {
/* Same gutters and inner padding as .minn-picker-drop above it, so the two
read as one stack rather than a full-bleed strip under an inset box. */
margin: 10px 18px 0; padding: 14px 16px;
border: 1px solid var(--border2); border-radius: 11px; background: var(--panel2);
}
.minn-upl-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text2); }
.minn-upl-row > .minn-cell-clip { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minn-upl-pct { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.minn-upl-bar { margin-top: 7px; height: 4px; border-radius: 3px; background: var(--border); overflow: hidden; }
.minn-upl-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.15s ease; }
.minn-upl-count { margin-top: 6px; font-size: 12px; color: var(--text3); }
/* A field waiting on the server says so where its chevron sits: the same
16px slot, so nothing moves when the answer lands. */
.minn-ac.is-loading > .minn-ac-input { background-image: none; }
.minn-ac.is-loading::after {
content: ""; position: absolute; top: 50%; inset-inline-end: 10px; margin-top: -7px;
width: 13px; height: 13px; border-radius: 50%;
border: 2px solid var(--border2); border-top-color: var(--accent);
animation: minnSpin 0.7s linear infinite; pointer-events: none;
}
/* Site icon field: preview + dropzone. */
.minn-icon-drop {
display: flex; align-items: center; gap: 14px; padding: 12px;
border: 1px dashed var(--border2); border-radius: 11px; transition: border-color 0.15s, background 0.15s;
}
.minn-icon-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.minn-icon-preview { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; border: 1px solid var(--border); flex-shrink: 0; }
.minn-icon-empty {
width: 56px; height: 56px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel2);
display: flex; align-items: center; justify-content: center; color: var(--text3); font-size: 20px; flex-shrink: 0;
}
.minn-icon-info { flex: 1; min-width: 0; }
.minn-icon-btns { display: flex; gap: 8px; margin-top: 8px; }
.minn-toggle-rows { display: flex; flex-direction: column; gap: 14px; }
.minn-toggle-row { display: flex; align-items: center; gap: 14px; }
.minn-toggle-info { flex: 1; min-width: 0; }
.minn-toggle-label { font-size: 14.5px; font-weight: 600; }
.minn-toggle-desc { font-size: 13px; color: var(--text3); margin-top: 2px; }
/* Editor Settings door: switch LEADS the label (same side as the old
checkboxes). Avoids the wide-modal “label … big empty … switch” gap. */
.minn-side-toggles { margin-top: 8px; gap: 10px; max-width: 420px; }
.minn-side-toggles .minn-toggle-row { gap: 10px; justify-content: flex-start; }
.minn-side-toggles .minn-toggle-info { flex: 0 1 auto; }
.minn-side-toggles .minn-toggle-label {
font-size: 13.5px; font-weight: 500; color: var(--text2); line-height: 1.35;
}
.minn-side-toggles .minn-switch { flex-shrink: 0; }
/* ===== Editor ===== */
.minn-editor { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 26px; max-width: 1000px; margin: 0 auto; }
.minn-editor > div { min-width: 0; }
/* Soft-wrapping title (textarea, not input) — long titles grow to multiple
lines instead of clipping. Enter is intercepted in JS (no hard newlines). */
.minn-editor-title {
display: block; width: 100%; box-sizing: border-box;
background: transparent; border: none; outline: none; color: var(--text);
font: inherit; font-size: 34px; font-weight: 800; letter-spacing: -0.8px;
line-height: 1.2; margin: 0 0 6px; padding: 0;
resize: none; overflow: hidden; field-sizing: content;
white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
}
.minn-editor-title::placeholder { color: var(--text3); }
/* Only drawn when the reader arrived from somewhere with a trail (a product's
description, say), so the editor's usual look is untouched. */
.minn-editor-back { margin-bottom: 10px; }
/* Sticky so the formatting tools stay reachable in long posts; opaque so
content scrolls beneath, below the fixed word-count pill (40) and chips.
-webkit-sticky first for older iOS; solid background is load-bearing
(transparent sticky lags / shows through on Safari). */
.minn-editor-toolbar {
display: flex; gap: 2px; padding: 6px 0 14px; border-bottom: 1px solid var(--border);
margin-bottom: 18px; color: var(--text2);
position: -webkit-sticky; position: sticky; top: 0; z-index: 35; background: var(--bg);
}
.minn-tool {
display: inline-flex; align-items: center; justify-content: center; padding: 6px 8px;
border-radius: 7px; cursor: pointer; background: none; border: none; color: var(--text2);
/* Drop the 300ms double-tap-zoom delay on touch. */
touch-action: manipulation;
}
.minn-tool:hover { background: var(--hover); color: var(--text); }
.minn-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; background: var(--hover); color: var(--text); }
.minn-tool svg { display: block; }
/* overflow-x: clip (not hidden) contains wide content horizontally WITHOUT
forcing overflow-y to auto — hidden would clip a first-block island's ⚙ chip,
which pokes 10px above the island's top edge. */
.minn-editor-body { color: var(--text); line-height: 1.75; font-size: 16px; min-height: 40vh; outline: none; overflow-x: clip; overflow-wrap: break-word; }
.minn-editor-body table { display: block; max-width: 100%; overflow-x: auto; }
/* Editable tables get the same cutout treatment as block islands — the dashed
outline marks "this is a structured block". Direct children of the body OR
of a container slot (slots are mini-bodies; chips reach both since the
per-root chip pass), so tables inside island PREVIEWS aren't double-framed.
Cell gridlines are an editor-only affordance (the front end styles its own
tables). */
.minn-editor-body > figure.wp-block-table, .minn-editor-body > table,
.minn-slot > figure.wp-block-table, .minn-slot > table {
border: 1px dashed var(--border2); border-radius: 11px; padding: 14px 16px; margin: 0 0 18px;
}
.minn-editor-body > figure.wp-block-table:hover, .minn-editor-body > table:hover,
.minn-slot > figure.wp-block-table:hover, .minn-slot > table:hover { border-color: var(--accent); }
.minn-editor-body > figure.wp-block-table, .minn-slot > figure.wp-block-table { display: block; overflow-x: auto; }
/* The figure handles overflow, so the inner table can be a real full-width table. */
.minn-editor-body > figure.wp-block-table table, .minn-slot > figure.wp-block-table table { display: table; margin: 0; border-collapse: collapse; width: 100%; }
.minn-editor-body > table, .minn-slot > table { border-collapse: separate; }
.minn-editor-body > figure.wp-block-table td, .minn-editor-body > figure.wp-block-table th,
.minn-editor-body > table td, .minn-editor-body > table th,
.minn-slot > figure.wp-block-table td, .minn-slot > figure.wp-block-table th,
.minn-slot > table td, .minn-slot > table th {
border: 1px solid var(--border); padding: 6px 12px; min-width: 40px;
}
.minn-editor-body > figure.wp-block-table th, .minn-editor-body > table th,
.minn-slot > figure.wp-block-table th, .minn-slot > table th { background: var(--panel); }
/* Images get the same cutout as tables and islands. :has(img) keeps the empty
husk figures (undoable deletes) from showing a hollow frame. */
.minn-editor-body > figure.wp-block-image:has(img), .minn-editor-body > img,
.minn-slot > figure.wp-block-image:has(img), .minn-slot > img {
border: 1px dashed var(--border2); border-radius: 11px; padding: 14px 16px; margin: 0 0 18px; display: block;
}
.minn-editor-body > figure.wp-block-image img, .minn-slot > figure.wp-block-image img { max-width: 100%; height: auto; display: block; border-radius: 6px; }
/* In a column that frame is a THIRD of the width: a four-up row of photos
rendered as stamps floating in mostly-empty cards (a slide deck,
where each image lost 32px of its ~120px column). The cutout still reads
at this size, and the photo gets the space. No :has() here — it would
match inside the editor body and force a full-subtree style recalc on
every keystroke (the editor-feel benchmark's one hard rule); an empty
delete-husk wearing a small frame for one undo step is the cheaper miss. */
.minn-cols-island .minn-slot > figure.wp-block-image,
.minn-cols-island .minn-slot > img {
padding: 5px; border-radius: 9px; margin: 0 0 10px;
}
.minn-editor-body > figure.wp-block-image figcaption, .minn-slot > figure.wp-block-image figcaption { color: var(--text3); font-size: 13px; margin-top: 8px; }
.minn-editor-body iframe, .minn-editor-body video { max-width: 100%; }
.minn-editor-body p { margin: 0 0 16px; }
.minn-editor-body h1, .minn-editor-body h2 { letter-spacing: -0.4px; }
.minn-editor-body blockquote { border-inline-start: 3px solid var(--accent); margin: 0 0 16px; padding: 2px 0 2px 16px; color: var(--text2); }
.minn-editor-body pre, .minn-editor-body code { font-family: var(--font-mono); font-size: 14px; background: var(--panel2); border-radius: 5px; }
.minn-editor-body pre { padding: 12px 14px; overflow-x: auto; }
.minn-editor-body code { padding: 1px 6px; }
.minn-editor-body:empty::before { content: 'Keep writing…'; color: var(--text3); }
/* Locked bodies are read-only, so "Keep writing…" would be a lie. A builder
page whose canvas is fully dynamic (a WooCommerce My Account page, say)
previews as empty (GH #10): say what is actually happening instead. */
.minn-editor-body.locked:empty::before { content: 'Nothing to preview here. This content renders dynamically on the site.'; }
/* Gutenberg alignment classes — the serializer emits them, the front end
styles them; the editor must preview them too. */
.minn-editor-body .has-text-align-left { text-align: start; }
.minn-editor-body .has-text-align-center { text-align: center; }
.minn-editor-body .has-text-align-right { text-align: end; }
/* Word count / reading time / session / goal — fixed bottom-right. Click
opens the goal popover. Below chips (69) but under modals (55+ wait —
z 40 sits under modal 55; goal pop is 70 so it can clear the pill).
bottom uses --minn-kb-inset (visualViewport, set in app.js) so the pill
rides above the software keyboard on mobile Safari, plus safe-area for
notched phones (viewport-fit=cover). */
.minn-editor-stats {
position: fixed;
inset-inline-end: calc(22px + env(safe-area-inset-right, 0px));
bottom: calc(18px + env(safe-area-inset-bottom, 0px) + var(--minn-kb-inset, 0px));
z-index: 40;
display: inline-flex; align-items: baseline; gap: 4px; padding: 8px 15px;
background: var(--panel); border: 1px solid var(--border2); border-radius: 999px;
font-size: 13px; color: var(--text2); box-shadow: var(--shadow);
pointer-events: auto; user-select: none; white-space: nowrap; cursor: pointer;
}
.minn-editor-stats:hover { border-color: var(--accent); color: var(--text); }
.minn-editor-stats:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.minn-editor-stats b { color: var(--text); font-weight: 700; }
.minn-editor-stats .minn-stats-session.up { color: var(--green); }
.minn-editor-stats .minn-stats-session.down { color: var(--text3); }
.minn-editor-stats .minn-stats-goal.met,
.minn-editor-stats.goal-met .minn-stats-goal { color: var(--green); }
.minn-editor-stats:empty { display: none; }
.minn-stats-goal-pop {
position: fixed; z-index: 70; width: 240px; padding: 12px 14px 12px;
background: var(--panel); border: 1px solid var(--border2); border-radius: 12px;
box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px;
}
.minn-stats-goal-label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text3); }
.minn-stats-goal-row { display: flex; gap: 8px; align-items: center; }
.minn-stats-goal-row .minn-input { flex: 1; min-width: 0; }
.minn-stats-goal-hint { font-size: 12px; color: var(--text3); line-height: 1.35; }
.minn-stats-goal-pop .minn-link-btn { align-self: flex-start; padding: 0; font-size: 12.5px; }
.minn-editor-side { display: flex; flex-direction: column; gap: 12px; }
.minn-side-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 15px; }
.minn-side-title { font-weight: 700; font-size: 14px; margin-bottom: 12px; }
/* Secondary meta as quiet doors → large modal (Settings, custom fields, SEO…). */
.minn-side-door {
display: flex; align-items: center; gap: 10px; width: 100%; text-align: start;
background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
padding: 13px 15px; cursor: pointer; color: inherit; font: inherit;
transition: border-color 0.12s, background 0.12s;
}
.minn-side-door:hover { border-color: var(--border2); background: var(--hover); }
.minn-side-door:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.minn-side-door-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.minn-side-door-title { font-weight: 700; font-size: 14px; color: var(--text); }
.minn-side-door-sum { font-size: 12.5px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* User edit page head — the order-page back-link pattern. */
.minn-ue-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.minn-ue-head .minn-btn-soft { flex-shrink: 0; }
/* The new-user page's Create bar keeps to the grid's width. */
.minn-ue-new .minn-psavebar { max-width: 1060px; }
/* Status-panel doors tint their summary by server-declared tone. */
.minn-side-door-sum.green { color: var(--green-text); }
.minn-side-door-sum.amber { color: var(--amber-text); }
.minn-side-door-sum.red { color: var(--red-text); }
.minn-side-door-chev { flex-shrink: 0; color: var(--text3); font-size: 18px; line-height: 1; font-weight: 400; }
/* Doors pack two-up — a title plus a one-line summary never needed a full
row. An odd count lets the last door span the width; the chevron gives
its width back to the text (hover carries the affordance). */
.minn-side-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.minn-side-doors > .minn-side-door { padding: 11px 13px; min-width: 0; }
.minn-side-doors > .minn-side-door:last-child:nth-child(odd) { grid-column: 1 / -1; }
.minn-side-doors .minn-side-door-chev { display: none; }
.minn-side-doors .minn-side-door-title { font-size: 13.5px; }
.minn-editor-door-body { padding: 4px 18px 20px; }
.minn-editor-side-modal .minn-panel-fields { gap: 12px; }
.minn-side-rows { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; }
.minn-side-row { display: flex; justify-content: space-between; }
.minn-side-key { color: var(--text3); }
.minn-side-val.amber { color: var(--amber); font-weight: 600; }
/* Inline jump inside a side row (media "Attached to" → editor). */
.minn-side-link {
background: none; border: none; padding: 0; font: inherit; cursor: pointer;
color: var(--accent); text-align: end;
}
.minn-side-link:hover { text-decoration: underline; }
/* Sectioned surface detail (e.g. form entries): long/multiline answers stack. */
/* Plain detail rows: key left, value right, long values (file names,
URLs) wrap instead of pushing the dialog wide. */
.minn-side-row { gap: 18px; }
.minn-side-row > .minn-surface-val { text-align: end; min-width: 0; overflow-wrap: anywhere; }
.minn-surface-link { color: var(--accent); text-decoration: none; }
.minn-surface-link:hover { text-decoration: underline; }
.minn-surface-val-dim { color: var(--text3); }
.minn-side-row.multi { flex-direction: column; align-items: flex-start; gap: 3px; }
.minn-surface-val.multi { white-space: pre-wrap; text-align: start; max-height: 200px; overflow-y: auto; }
/* Block row types (code / html-preview / kv-table): full-width content. */
.minn-side-row.block > pre, .minn-side-row.block > iframe, .minn-side-row.block > table { width: 100%; }
.minn-detail-code {
font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55;
background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
padding: 10px 12px; margin: 0; max-height: 260px; overflow: auto;
white-space: pre-wrap; word-break: break-word; color-scheme: dark;
}
[data-theme="light"] .minn-detail-code { color-scheme: light; }
/* Copy sits inside the code box, same compact icon button as the order
card pencils. The wrap is position:relative so the button can pin to
the trailing edge without changing the row's stacked layout. */
.minn-detail-code-wrap { position: relative; width: 100%; }
.minn-detail-code-wrap > .minn-detail-code { padding-inline-end: 36px; }
.minn-copy-btn {
position: absolute; top: 6px; inset-inline-end: 6px;
display: inline-flex; align-items: center; justify-content: center;
background: none; border: none; color: var(--text3); cursor: pointer;
padding: 4px; border-radius: 7px;
}
.minn-copy-btn:hover { color: var(--text); background: var(--hover); }
.minn-copy-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.minn-copy-btn svg { width: 15px; height: 15px; }
.minn-detail-frame { height: 380px; margin: 0; width: 100%; resize: vertical; overflow: auto; }
.minn-detail-kv { border-collapse: collapse; font-size: 13px; }
.minn-detail-kv th, .minn-detail-kv td { text-align: start; padding: 5px 10px; border: 1px solid var(--border); vertical-align: top; }
.minn-detail-kv th { color: var(--text3); font-weight: 500; white-space: nowrap; width: 1%; }
.minn-detail-kv td { word-break: break-word; }
/* Form-entry detail — contact card, not a raw key/value dump. */
.minn-modal.entry { width: 560px; }
.minn-modal-title-block { flex: 1; min-width: 0; }
.minn-modal-title-block .minn-modal-title { flex: none; }
.minn-modal-sub { font-size: 12.5px; color: var(--text3); margin-top: 1px; font-variant-numeric: tabular-nums; }
/* Filtered revision day: quiet chip next to the day label (not a raw UA button). */
.minn-modal-sub:has(.minn-rev-day-clear) {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.minn-rev-day-clear {
display: inline-flex; align-items: center;
margin: 0; padding: 2px 9px;
font: inherit; font-size: 11.5px; font-weight: 600;
color: var(--text2); background: var(--panel2);
border: 1px solid var(--border); border-radius: 999px;
cursor: pointer; line-height: 1.4;
transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.minn-rev-day-clear:hover {
color: var(--text); border-color: var(--border2); background: var(--hover);
}
.minn-rev-day-clear:focus-visible {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-ring);
}
.minn-modal-id-tag { font-size: 12.5px; color: var(--text3); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.minn-entry { padding: 18px 20px 8px; display: flex; flex-direction: column; gap: 18px; }
.minn-entry-hero { display: flex; flex-direction: column; gap: 3px; }
.minn-entry-name { font-size: 18px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.25; }
.minn-entry-email {
font-size: 14px; color: var(--accent); text-decoration: none; width: fit-content;
}
.minn-entry-email:hover { text-decoration: underline; }
.minn-entry-body { display: flex; flex-direction: column; gap: 6px; }
.minn-entry-field-label {
font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
color: var(--text3);
}
.minn-entry-message {
font-size: 15px; line-height: 1.55; color: var(--text); white-space: pre-wrap;
background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
padding: 12px 14px;
}
.minn-entry-fields {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px;
}
.minn-entry-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.minn-entry-field-value {
font-size: 14px; font-weight: 500; color: var(--text); overflow-wrap: anywhere; line-height: 1.4;
}
.minn-entry-field-value a { color: var(--accent); text-decoration: none; }
.minn-entry-field-value a:hover { text-decoration: underline; }
.minn-entry-meta {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px;
padding-top: 4px; border-top: 1px solid var(--border); margin-top: 2px;
font-size: 12.5px; color: var(--text3);
}
.minn-entry-meta-chip { color: var(--text3); text-decoration: none; }
a.minn-entry-meta-chip:hover { color: var(--accent); text-decoration: underline; }
.minn-entry-meta-dot { color: var(--text3); opacity: 0.55; margin: 0 4px; user-select: none; }
.minn-entry-empty { font-size: 14px; color: var(--text3); }
/* Extra detail sections on the entry card (GF notes) */
.minn-entry-extra { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; border-top: 1px solid var(--border); }
.minn-entry-note { font-size: 13.5px; color: var(--text); line-height: 1.45; overflow-wrap: anywhere; }
.minn-entry-note-meta { font-size: 11.5px; color: var(--text3); margin-bottom: 2px; }
@media (max-width: 560px) {
.minn-entry-fields { grid-template-columns: 1fr; }
}
.minn-view-switch { flex-shrink: 0; padding-inline-end: 10px; margin-inline-end: 4px; border-inline-end: 1px solid var(--border); }
.minn-side-val.green { color: var(--green); }
.minn-side-card .minn-btn-primary { width: 100%; margin-top: 14px; justify-content: center; }
.minn-side-card .minn-save-draft { width: 100%; margin-top: 8px; justify-content: center; }
.minn-permalink { font-family: var(--font-mono); font-size: 12.5px; color: var(--text3); margin-top: 3px; word-break: break-all; }
/* Publish-card visibility + per-post discussion/slug controls. */
.minn-mini-select {
background: var(--panel2); color: var(--text); border: 1px solid var(--border);
border-radius: 7px; padding: 2px 6px; font-size: 13px; font-weight: 500; cursor: pointer;
max-width: 55%;
}
/* Publish-card Visibility combobox — compact, right-aligned in the side row
(same footprint the old mini-select occupied). */
.minn-vis-ac {
max-width: 58%; min-width: 0; flex: 0 1 auto;
}
.minn-vis-ac .minn-ac-input {
padding: 3px 26px 3px 9px; font-size: 13px; font-weight: 500;
background-color: var(--panel2); border-radius: 7px;
background-position: right 8px center;
}
.minn-vis-extra { margin-top: 9px; }
input.minn-vis-extra { width: 100%; }
.minn-check-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--text2); cursor: pointer; font-size: 13px; }
.minn-check-row input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.minn-slug-field { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.minn-slug-prefix { color: var(--text3); font-family: var(--font-mono); font-size: 13px; }
.minn-slug-input { font-family: var(--font-mono); font-size: 12.5px; padding: 5px 8px; }
.minn-slug-input:disabled { opacity: 0.5; cursor: default; }
.minn-slug-note { color: var(--amber); font-size: 11.5px; margin-top: 4px; }
.minn-chips { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
/* Colour and font are explicit because a