/* ============================================
   Privatiser — Home fold redesign
   Loaded after style.css. Scoped to index.html only —
   overrides/extends tokens without touching shared pages.
   Concept: fully monochrome — grayscale only, hierarchy comes
   from weight/contrast/spacing/motion, not color. The tool
   itself is the hero — no separate marketing mockup above it.
   ============================================ */

:root {
    /* "stamp" name kept (many rules below reference it) but it's pure
       grayscale now: the emphasis color is just the theme's own text color. */
    --stamp: var(--text);
    --stamp-hover: var(--text-secondary);
    --stamp-ring: rgba(127, 127, 127, 0.18);
    --stamp-ink: var(--bg);
    --accent: var(--stamp);
    --accent-hover: var(--stamp-hover);
    --ring: var(--stamp-ring);
    --font-head: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
    --fast: 130ms cubic-bezier(0.4, 0, 0.2, 1);
    /* Smooth edges: rounder than the shared site default, cascades to every
       button/input/panel/badge that already uses these tokens. */
    --radius: 10px;
    --radius-lg: 16px;
}

/* Swift, consistent micro-interactions on every interactive control */
.fold button,
.fold input,
.fold select,
.fold textarea,
.fold a,
.fold summary {
    transition: background var(--fast), color var(--fast), border-color var(--fast),
                opacity var(--fast), transform var(--fast), box-shadow var(--fast);
}
.fold button:active { transform: scale(0.97); }

/* ============ LOADER: ledger of data getting redacted, massive mark on top, once per browser ============ */
.skip-loader #loader { display: none !important; }
.loader-lock, .loader-lock body { overflow: hidden; height: 100%; }

#loader {
    background: var(--bg);
    gap: 0;
}

.ledger {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: min(640px, 82vw);
    max-height: 78vh;
    overflow: hidden;
}

.ln {
    position: relative;
    display: inline-block;
    align-self: flex-start;
    max-width: 100%;
    font-family: var(--font-head);
    font-size: 0.75rem;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    padding: 0 3px;
}

.ln::after {
    content: '';
    position: absolute;
    inset: 1px -2px;
    background: var(--text);
    transform: scaleX(0);
    transform-origin: left;
    animation: ln-redact 0.32s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    animation-delay: calc(var(--i) * 55ms + 250ms);
}

@keyframes ln-redact { to { transform: scaleX(1); } }

@media (max-width: 640px) {
    .ledger { width: 90vw; }
    .ln { font-size: 0.6875rem; }
    .ln:nth-child(n+16) { display: none; }
}

#loader .loader-wordmark {
    position: absolute;
    z-index: 2;
    overflow: hidden;
    font-size: clamp(3.25rem, 13vw, 8.5rem);
    font-weight: 700;
    font-family: var(--font-head);
    letter-spacing: -0.03em;
    color: var(--text);
    text-shadow: 0 0 60px var(--bg), 0 0 24px var(--bg);
    opacity: 0;
    transform: translateY(6px) scale(0.97);
    animation: mark-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 1.6s;
}

@keyframes mark-in { to { opacity: 1; transform: translateY(0) scale(1); } }

/* The mark itself gets redacted too, then unredacted, before the loader clears */
#loader .loader-wordmark::after {
    content: '';
    position: absolute;
    inset: -0.1em -0.15em;
    background: var(--stamp);
    transform: scaleX(0);
    transform-origin: left;
    animation: mark-redact 0.7s cubic-bezier(0.76, 0, 0.24, 1) forwards;
    animation-delay: 2.25s;
}

@keyframes mark-redact {
    0%   { transform: scaleX(0); transform-origin: left; }
    45%  { transform: scaleX(1); transform-origin: left; }
    55%  { transform: scaleX(1); transform-origin: right; }
    100% { transform: scaleX(0); transform-origin: right; }
}

/* ============ THIN NAV ============ */
.top-nav { backdrop-filter: blur(10px); }
.logo { font-family: var(--font-head); font-weight: 700; }

/* ============ FOLD: headline + tool, no separate hero mock ============ */
.fold {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 3.25rem 1.5rem 0;
}

.fold-head {
    max-width: 760px;
    margin: 0 auto 2rem;
    text-align: center;
}

.fold-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-head);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 1.1rem;
}

.fold-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--stamp);
    border-radius: 1px;
}

.fold h1 {
    font-family: var(--font-head);
    font-size: clamp(1.75rem, 4.4vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.12;
    margin-bottom: 1.1rem;
}

.fold h1 .redact {
    position: relative;
    display: inline-block;
    color: transparent;
}

.fold h1 .redact::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    color: var(--text);
    clip-path: inset(0 100% 0 0);
    animation: unredact 0.5s steps(1) 1.1s forwards;
}

.fold h1 .redact::after {
    content: '';
    position: absolute;
    inset: 0.08em 0;
    background: var(--stamp);
    border-radius: 2px;
    animation: redact-lift 0.7s cubic-bezier(0.65, 0, 0.35, 1) 1.15s forwards;
}

@keyframes unredact { to { clip-path: inset(0 0 0 0); } }
@keyframes redact-lift { to { transform: scaleY(0); opacity: 0; } }

.fold-sub {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    max-width: 480px;
    margin: 0 auto;
    line-height: 1.6;
}

.fold-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1.4rem;
    font-family: var(--font-head);
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.fold-strip span { display: inline-flex; align-items: center; gap: 0.4rem; }
.fold-strip svg { flex-shrink: 0; opacity: 0.7; }

/* ============ TOOL: tightened, becomes the visual anchor ============ */
.fold .tool-section {
    padding: 2rem 0 0;
    max-width: none;
}

.fold .tool-section .section-label,
.fold .tool-section .section-title { display: none; }

/* ============ CONDENSED "everything else" — replaces 5 old sections ============ */
.everything {
    border-top: 1px solid var(--border);
    padding: 3.5rem 1.5rem;
}

.everything-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 3rem;
}

@media (max-width: 800px) {
    .everything-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

.ev-col h3 {
    font-family: var(--font-head);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: 1rem;
}

/* Catches: tag cloud instead of 8 icon cards */
.catch-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.catch-tags span {
    font-size: 0.75rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.catch-note {
    margin-top: 1rem;
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    line-height: 1.6;
}
.catch-note a { color: var(--stamp); text-decoration: none; }
.catch-note a:hover { text-decoration: underline; }

/* Get it: install + pricing, compact rows instead of cards */
.get-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
}
.get-row:last-of-type { border-bottom: none; }
.get-row-label { font-size: 0.875rem; font-weight: 600; }
.get-row-desc { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 0.15rem; }
.get-row-action { flex-shrink: 0; }
.get-row-action a { font-family: var(--font-head); font-size: 0.75rem; text-decoration: none; color: var(--stamp); white-space: nowrap; }
.get-row-action a:hover { color: var(--stamp-hover); }

.get-price {
    margin-top: 1.25rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.9rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.get-price-label { font-size: 0.8125rem; color: var(--text-secondary); }
.get-price-amount { font-family: var(--font-head); font-size: 1.0625rem; font-weight: 700; }
.get-price-amount .unit { font-size: 0.6875rem; font-weight: 500; color: var(--text-tertiary); }

/* Support-with-crypto — collapsed by default, list of addresses when opened */
.support-block {
    margin-top: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.support-block summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: var(--bg-surface);
}
.support-block .get-price-amount { font-size: 0.8125rem; font-weight: 700; }
.support-list { display: flex; flex-direction: column; }
.support-row {
    display: grid;
    grid-template-columns: 4.5rem 1fr auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--border);
}
.support-cur { font-family: var(--font-head); font-size: 0.75rem; font-weight: 700; }
.support-cur small { display: block; font-weight: 400; color: var(--text-tertiary); font-size: 0.625rem; }
.support-addr {
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

@media (max-width: 560px) {
    .support-row { grid-template-columns: 1fr; gap: 0.3rem; }
    .support-addr { white-space: normal; word-break: break-all; }
}

/* ============ Buttons: square-ish, stamp-accented ============ */
.btn-primary {
    background: var(--stamp);
    border-color: var(--stamp);
}
.btn-primary:hover { background: var(--stamp-hover); border-color: var(--stamp-hover); }

/* ============ TOOL: app-like polish, same markup/ids, CSS-only ============ */
/* One smooth pill holds the tabs AND the Settings/Mapping triggers — see
   .tool-switcher below, which now owns the background/border/radius that
   used to live on .tabs alone. */
.fold .tabs {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    width: auto;
}
.fold .tab { border-radius: 999px; font-family: var(--font-head); }
.fold .tab.active { background: var(--stamp); color: var(--stamp-ink); }

.fold .tool-panel { border-radius: var(--radius-lg); }
.fold .tool-panel-header { height: 40px; padding: 0 10px; gap: 8px; }

/* Restructured toolbars: grouped segmented pill instead of loose bordered buttons */
.fold .panel-actions {
    background: var(--bg-elevated);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}
.fold .panel-actions .btn-sm {
    border: none;
    border-radius: 999px;
    background: transparent;
    padding: 4px 10px;
}
.fold .panel-actions .btn-sm:hover { background: var(--bg-surface); color: var(--text); }
.fold .panel-actions .btn-sm--danger:hover { background: var(--error); }

/* "..." overflow menu — keeps just one primary action visible per panel,
   the rest (File, Download, Redact selection) tucked one tap away. */
.more-menu { position: relative; }
.more-menu > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    font-size: 1rem;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
}
.more-menu > summary::-webkit-details-marker { display: none; }
.more-menu > summary:hover { background: var(--bg-surface); color: var(--text); }
.more-menu[open] > summary { background: var(--bg-elevated); color: var(--text); }

.more-menu-body {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 5px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.28);
    animation: menu-in 0.12s ease;
}
.more-menu-body .btn-sm { border-radius: calc(var(--radius) - 3px); text-align: left; white-space: nowrap; }

@keyframes menu-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }

/* The one "payoff" action per panel (Copy) stands out from the utility buttons around it */
.btn-sm--accent { color: var(--stamp); font-weight: 700; }
.fold .panel-actions .btn-sm--accent:hover { background: var(--stamp); color: var(--stamp-ink); }

/* Panels: cut the dead space, cap height so an empty tool doesn't dominate the fold */
.fold .tool-panel textarea,
.fold .hl-code { min-height: min(300px, 42vh); max-height: 55vh; }

.fold .tool-action-bar { padding: 0.85rem 0; gap: 12px; }
.fold #anonymize-btn, .fold #deanonymize-btn { min-width: 132px; }

/* Clear recedes to a quiet text action — Anonymize stays the one loud button */
.fold #clear-btn {
    background: none;
    border: none;
    color: var(--text-tertiary);
    padding: 9px 4px;
}
.fold #clear-btn:hover { color: var(--text); background: none; }

.fold .settings-section,
.fold .mapping-section { border-radius: var(--radius-lg); }
.fold .settings-grid { gap: 1rem; }

/* Settings becomes a slide-in drawer — it's a long form that would otherwise
   push the whole page down. Pure [open] CSS on the existing <details>, no JS
   changes: app.js never touches settings-section, so either presentation works.
   Mapping table stays inline (below) — a drawer's ~440px is too narrow for a
   real table + JSON side-by-side; it wants the full tool width instead. */
.settings-section[open] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 100vw);
    margin: 0;
    z-index: 200;
    border: none;
    border-left: 1px solid var(--border-strong);
    border-radius: 0;
    background: var(--bg);
    box-shadow: -32px 0 64px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: drawer-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes drawer-in { from { transform: translateX(16px); opacity: 0.4; } to { transform: translateX(0); opacity: 1; } }

/* dim the page behind the drawer without any extra markup or JS */
.settings-section[open]::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(0,0,0,0.45);
    animation: drawer-dim 0.22s ease;
}

@keyframes drawer-dim { from { opacity: 0; } to { opacity: 1; } }

.settings-section[open] > summary {
    position: sticky;
    top: 0;
    flex-shrink: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 16px 18px;
    font-size: 0.8125rem;
}

.settings-section[open] > summary::before {
    content: '\2715';
    font-size: 0.7rem;
    transform: none;
}

.settings-section[open] > .settings-grid {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px 24px;
}

/* One smooth pill: tabs + a divider + Settings/Mapping triggers, all inside
   a single rounded bar, instead of three separate floating shapes. */
.tool-toprow { display: flex; justify-content: center; }

.tool-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 1.75rem;
}

.tool-switcher-divider {
    width: 1px;
    height: 20px;
    background: var(--border-strong);
    flex-shrink: 0;
}

.tool-triggers { display: flex; gap: 2px; }

/* Strip the base accordion-box chrome — the pill above already provides
   the background/border, and [open] rules fully redefine appearance anyway. */
.tool-triggers > details {
    margin-top: 0;
    background: none;
    border: none;
    border-radius: 0;
}

.tool-triggers > details > summary {
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    font-family: var(--font-head);
    font-size: 0.75rem;
    white-space: nowrap;
    color: var(--text-secondary);
}
.tool-triggers > details > summary:hover { background: var(--bg-surface); color: var(--text); }
.tool-triggers > details[open] > summary { background: var(--bg-surface); color: var(--text); }
#mapping-count { font-family: var(--font-head); }

/* Settings: same fixed drawer as before — position is irrelevant once [open]
   makes it fixed to the viewport, so moving the trigger doesn't affect it. */

/* Mapping: was a narrow side-drawer, wasn't wide enough for a real table —
   now that its trigger sits in an absolutely-positioned row (which can't
   host an inline expansion without overlapping the tool below it), it opens
   as a centered, wide modal instead. Still full table width, still not a
   cramped sidebar, just anchored differently than Settings. */
.mapping-section[open] {
    position: fixed;
    top: 8vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(1000px, 94vw);
    max-height: 84vh;
    margin: 0;
    z-index: 200;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--bg);
    box-shadow: 0 32px 80px rgba(0,0,0,0.45);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modal-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-in { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

.mapping-section[open]::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(0,0,0,0.45);
    animation: drawer-dim 0.2s ease;
}

.mapping-section[open] > summary {
    flex-shrink: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 14px 18px;
}
.mapping-section[open] > summary::before { content: '\2715'; font-size: 0.7rem; transform: none; }

.mapping-section[open] .mapping-actions { flex-shrink: 0; }
.mapping-section[open] .mapping-split {
    flex: 1;
    min-height: 0; /* flex items default to min-height:auto, which refuses to
                       shrink below content size and defeats overflow — this
                       was the actual bug: content got clipped instead of
                       scrolling. */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0 14px 14px;
}
.mapping-section[open] .table-wrapper { flex: 1; min-height: 0; overflow: auto; max-height: none; }
.mapping-section[open] #mapping-json { flex-shrink: 0; }

@media (min-width: 800px) {
    .mapping-section[open] .mapping-split { flex-direction: row; gap: 10px; }
    /* base rule sets width:100% on this textarea, which fights row layout
       and squeezes the table off — give both panes an explicit equal share */
    .mapping-section[open] .table-wrapper,
    .mapping-section[open] #mapping-json { flex: 1 1 0; width: auto; min-width: 0; min-height: 0; }
}

@media (max-width: 640px) {
    .settings-section[open] { width: 100vw; }
    .mapping-section[open] { top: 0; bottom: 0; left: 0; right: 0; width: 100vw; max-height: none; transform: none; border-radius: 0; }
    @keyframes modal-in { from { opacity: 0.4; } to { opacity: 1; } }
    /* Keep the one-pill shape rather than wrapping into a lumpy multi-row
       pill — scroll it horizontally if a narrow phone can't fit it all.
       justify-content:flex-start (not center) so it starts unscrolled at
       the beginning, not mid-way through with "Anonymize" already cut off. */
    .tool-toprow { justify-content: flex-start; overflow-x: auto; padding: 0 1.5rem; margin: 0 -1.5rem; -webkit-overflow-scrolling: touch; }
    .tool-switcher { flex-shrink: 0; }
    .fold .tab { padding: 0.55rem 0.75rem; }
    .tool-triggers > details > summary { padding: 0.5rem 0.7rem; }
}

/* Pattern packs / presets / custom regex read as one grouped surface —
   background fill separates it from the page, no border lines at all. */
.pro-groups {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 0.9rem;
}
.settings-group--packed {
    gap: 0.5rem;
}

/* Flatten inputs/buttons inside Settings: background-only, no border lines
   at all — reads as one clean surface instead of a stack of boxes. */
.settings-section .settings-input {
    border: none;
    background: var(--bg-input);
}
.settings-section .settings-input:focus {
    background: var(--bg);
    box-shadow: 0 0 0 2px var(--border-strong);
}
.settings-section .btn-sm {
    border: none;
    background: var(--bg-input);
}
.settings-section .btn-sm:hover { background: var(--bg); }
.settings-section .btn-sm--danger { background: transparent; }

/* Consistent breathing room between the settings groups themselves */
.settings-section .settings-grid { gap: 1.35rem; }
.settings-section .settings-group { gap: 0.5rem; }

/* Detection category / pattern pack toggles: no checkbox square, no border —
   the whole label is the control, filled when on, flat background when off. */
.settings-section .toggle-grid label {
    position: relative;
    align-items: flex-start;
    gap: 0;
    padding: 0.5rem 0.7rem;
    background: var(--bg-input);
    border-radius: var(--radius);
    line-height: 1.3;
}
.settings-section .toggle-grid input[type="checkbox"] {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
}
.settings-section .toggle-grid label:has(input:checked) {
    background: var(--stamp);
    color: var(--stamp-ink);
    font-weight: 600;
}
.settings-section .toggle-grid label:has(input:focus-visible) {
    outline: 2px solid var(--border-strong);
    outline-offset: 2px;
}

/* ============ MOBILE: real touch targets, no horizontal scroll ============ */
@media (max-width: 640px) {
    .fold { padding-top: 2rem; }
    .fold h1 { font-size: 1.6rem; }
    .fold-strip { gap: 0.9rem; justify-content: flex-start; text-align: left; }

    .fold .tab { min-height: 40px; }

    .tool-panel-header { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 6px; }
    .panel-actions { flex-wrap: wrap; }
    .btn-sm { min-height: 30px; padding: 5px 10px; font-size: 0.6875rem; }

    /* Practical mobile order: input, then the action button, THEN output —
       not input+output stacked before you can even reach Anonymize/Deanonymize.
       display:contents unwraps the panels grid so order can work across it;
       :first-child/:last-child still match the real DOM parent, unaffected. */
    .tool-editor-panels { display: contents; }
    .tool-panel:first-child { order: 1; }
    .tool-action-bar { order: 2; }
    .tool-panel:last-child { order: 3; }
    /* .mapping-input-panel already follows .tool-editor in normal DOM flow — no reorder needed */

    .tool-action-bar { flex-wrap: wrap; }
    #anonymize-btn, #clear-btn, #deanonymize-btn { min-height: 44px; flex: 1; }
    .tool-action-bar .status, .detection-count { flex-basis: 100%; margin-left: 0; order: 3; }

    .settings-section summary, .mapping-section summary { min-height: 44px; }
    .toggle-grid { grid-template-columns: 1fr 1fr; }
    .toggle-grid label { min-height: 32px; }

    .get-row { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
    .get-row-action a { display: inline-block; padding: 6px 0; }
}