/* HTS-QA-V7.1 — extracted styles (originally inline <style> blocks) */


    html, body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', sans-serif; }
    body { background-color: #fbfbfd; color: #1d1d1f; letter-spacing: -0.01em; }
    * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    h1, h2, h3, h4, h5 { letter-spacing: -0.025em; }
    .custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); background-clip: padding-box; border: 2px solid transparent; }
    [contenteditable]:empty:before { content: attr(placeholder); color: #a1a1a6; pointer-events: none; display: block; }
    [contenteditable] { outline: none; }
    @keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
    /* Note: animate-marquee kept available but is intentionally NOT auto-applied.
       It used to drive an infinite 15s scrolling marquee that felt heavy and
       distracting. Keeping the keyframes here in case a future use needs it,
       but no element in the app applies .animate-marquee by default. */
    .animate-marquee { animation: marquee 15s linear infinite; }
    .mention-tag {
      display: inline-block;
      background: linear-gradient(135deg, #d8e8ff, #b3d0ff);
      color: #0058b8;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 0.92em;
      line-height: 1.4;
      vertical-align: baseline;
      border: 1px solid rgba(0, 113, 227, 0.18);
    }
    .editor-popup {
      position: absolute;
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border: 0.5px solid rgba(0, 0, 0, 0.08);
      border-radius: 14px;
      box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.18), 0 4px 12px -2px rgba(0, 0, 0, 0.06);
      z-index: 60;
      padding: 6px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 200px;
    }
    .editor-popup button {
      padding: 8px 12px; font-size: 13px; text-align: left; border-radius: 8px; transition: background 0.15s; width: 100%;
    }
    .editor-popup button:hover, .editor-popup button.active { background: rgba(0, 113, 227, 0.08); }
    .editor-color-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 6px; }
    .editor-color-grid button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.08); cursor: pointer; padding: 0; }
    .card-hover { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
    .card-hover:hover { box-shadow: 0 6px 24px -6px rgba(0, 0, 0, 0.10); }
    .like-btn[data-liked="true"] svg { fill: #0071e3; stroke: #0071e3; }
    .like-btn[data-liked="true"] { color: #0071e3; }
    [contenteditable]::-webkit-scrollbar { display: none; }
    /* Apple-style gradient mesh background — soft and tasteful */
    .login-bg {
      background:
        radial-gradient(60% 80% at 20% 15%, rgba(0, 113, 227, 0.18) 0%, transparent 60%),
        radial-gradient(50% 60% at 85% 80%, rgba(94, 92, 230, 0.15) 0%, transparent 60%),
        radial-gradient(40% 50% at 50% 50%, rgba(255, 255, 255, 0.4) 0%, transparent 50%),
        linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 100%);
    }
    /* Frosted glass panel — Apple-style */
    .glass-panel {
      background: rgba(255, 255, 255, 0.72);
      backdrop-filter: blur(40px) saturate(180%);
      -webkit-backdrop-filter: blur(40px) saturate(180%);
      border: 0.5px solid rgba(255, 255, 255, 0.6);
    }
    /* Solid panel — opaque alternative to glass-panel for dropdowns and
       modals where the user needs to read small text without background
       bleed-through. Used by the profile dropdown menu (top-right) and
       the Create/Edit User modals. */
    .solid-panel {
      background: #ffffff;
      border: 0.5px solid rgba(0, 0, 0, 0.08);
    }
    .glass-header {
      background: rgba(255, 255, 255, 0.72);
      backdrop-filter: blur(40px) saturate(180%);
      -webkit-backdrop-filter: blur(40px) saturate(180%);
    }
    @media (max-width: 1023px) {
      .sidebar-mobile { position: fixed; inset: 0 0 0 auto; z-index: 40; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1); width: 18rem; }
      .sidebar-mobile.open { transform: translateX(0); }
      .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 35; }
    }
    /* Loading spinner retained for legacy places that explicitly opt-in via
       the .spinner class. Most loading UIs now use the skeleton pattern
       (see .hts-skel classes); .spinner is kept for any future inline
       indicator that the user expects to be tiny and unobtrusive. */
    @keyframes spin { to { transform: rotate(360deg); } }
    .spinner { animation: spin 0.9s linear infinite; }
    /* The view-fade entrance animation on <main> has been removed.
       Previously every renderApp() replayed a 250ms opacity+translate
       animation, which — combined with the multiple renderApp calls during
       bootstrap — produced a visible "pop" on every refresh. The class is
       kept as a no-op for backwards-compat with any code that still applies
       it, but it no longer animates. */
    .view-fade { /* removed: animation: viewFade 0.25s ... */ }
    /* Apple-style button base — kept for backwards-compat. The active-scale
       micro-interaction is intentionally REMOVED to satisfy "remove all
       heavy animation". Buttons still have hover transitions (cheap). */
    .btn-apple {
      transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }
    /* Apple-style focus ring */
    input:focus, textarea:focus, button:focus-visible, [contenteditable]:focus {
      outline: none;
      box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);
    }
    /* Smooth caret in editor */
    [contenteditable] { caret-color: #0071e3; }
    /* Hide number input arrows */
    input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    /* Profile dropdown — was an open/close animation. Removed to comply with
       "remove all heavy animation". The dropdown now appears instantly with
       no transform/scale animation. The transform-origin is kept for any
       future opt-in animation but is currently a no-op. */
    @keyframes profileDropdownOpen {
      from { opacity: 0; transform: translateY(-6px) scale(0.96); }
      to   { opacity: 1; transform: translateY(0)    scale(1); }
    }
    .profile-dropdown-menu { transform-origin: top right; }
    /* On small screens, render the dropdown as a near-full-width sheet
       anchored to the right side of the viewport. We use position: fixed
       (not absolute) so the dropdown can extend BEYOND its parent
       `.relative` container, which on mobile is only as wide as the
       avatar/name button (~80px). Without this, the dropdown gets clipped
       to the parent's narrow width. */
    @media (max-width: 640px) {
      .profile-dropdown-menu {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        top: 56px !important;        /* below the 56px (h-14) header */
        transform-origin: top right !important;
      }
    }
    /* Skeleton pulse — opacity-only, runs on the compositor, no layout cost.
       This is the ONLY animation that intentionally remains in the app. It
       is very subtle (opacity 1 → 0.55) and is what tells the user the page
       is alive while content loads. */
    @keyframes hts-skel-pulse {
      0%, 100% { opacity: 1; }
      50%      { opacity: 0.55; }
    }
    .hts-skel { animation: hts-skel-pulse 1.4s ease-in-out infinite; }
    @media (prefers-reduced-motion: reduce) { .hts-skel { animation: none; } }
  

    /* Skeleton pulse — opacity-only, runs on the compositor, no layout cost.
       The user sees the placeholder "breathe" very subtly so they know the
       page is alive, but there is no heavy animation that would distract
       or feel jarring. */
    @keyframes hts-skel-pulse {
      0%, 100% { opacity: 1; }
      50%      { opacity: 0.55; }
    }
    .hts-skel { animation: hts-skel-pulse 1.4s ease-in-out infinite; }
    @media (prefers-reduced-motion: reduce) { .hts-skel { animation: none; } }
  


  /* ==================================================================
     SIDEBAR REDESIGN (V7.2)
     ------------------------------------------------------------------
     The sidebar now supports two distinct states on desktop:
       * EXPANDED  (default) -- full 256px width with labels + section
                    headers + quick-tip card at the bottom.
       * COLLAPSED (icon-only) -- 72px wide, icons centered, section
                    headers hidden, no quick-tip card. Hovering a nav
                    item reveals its label in a tooltip that pops out
                    to the right of the sidebar.

     The toggle button in the header (replaces the old mobile-only
     hamburger) drives BOTH:
       * On mobile (<1024px) -- opens/closes the off-canvas slide-in
         sidebar (existing .sidebar-mobile behavior).
       * On desktop (>=1024px) -- toggles the .sidebar-collapsed class
         on the existing <aside> element. Because we toggle a CSS class
         (not re-render the DOM), the width transition animates smoothly
         via the transition: width declaration below.
     ================================================================== */

  /* Width transition for the desktop sidebar element. The mobile
     off-canvas variant uses transform: translateX() (already defined
     in the .sidebar-mobile rule above) -- that path is unaffected. */
  #app-sidebar {
    transition: width 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* Collapsed state -- overrides Tailwind's w-64 with !important
     because Tailwind utility classes can also be !important-capable
     and we want the collapsed width to win when this class is present. */
  #app-sidebar.sidebar-collapsed {
    width: 72px !important;
  }

  /* When collapsed: hide section titles, the quick-tip card, and nav
     labels. We use opacity + width/height transitions so the change
     feels smooth rather than a snap. */
  #app-sidebar.sidebar-collapsed .sidebar-section-title,
  #app-sidebar.sidebar-collapsed .sidebar-quick-tip,
  #app-sidebar.sidebar-collapsed .nav-item-label {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }
  #app-sidebar.sidebar-collapsed .sidebar-section-title,
  #app-sidebar.sidebar-collapsed .sidebar-quick-tip {
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  #app-sidebar.sidebar-collapsed .nav-item-label {
    width: 0;
    overflow: hidden;
  }

  /* When collapsed: center icons and remove horizontal padding so the
     72px-wide column visually centers the icon. */
  #app-sidebar.sidebar-collapsed .nav-item {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* The small dot indicator on the active item is decorative; hide it
     when collapsed since the bar accent + brand tint already convey
     active state and the dot would be the only off-center thing. */
  #app-sidebar.sidebar-collapsed .nav-item-active-dot {
    display: none !important;
  }

  /* Tooltips for collapsed nav items -- pop out to the right of the
     sidebar on hover so the user can still read each item's label. */
  #app-sidebar.sidebar-collapsed .nav-item::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: #1d1d1f;
    color: #ffffff;
    font-size: 11px;
    font-weight: 500;
    padding: 5px 9px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 100;
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.18);
  }
  #app-sidebar.sidebar-collapsed .nav-item:hover::after {
    opacity: 1;
    transition-delay: 0.25s;
  }

  /* ------------------------------------------------------------------
     ACTIVE-ITEM LEFT BAR -- the redesigned sidebar uses a 3px vertical
     accent bar on the left of the active nav item instead of (just) the
     dot indicator. This is the dominant "you are here" signal in modern
     professional sidebars (Slack, Linear, Notion). The dot indicator is
     kept for the expanded state as a secondary cue but hidden when
     collapsed.
     ------------------------------------------------------------------ */
  .nav-item-active-bar {
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #0071e3;
  }


  /* ==================================================================
     APPLE-STYLE SIDEBAR (V7.3)
     ------------------------------------------------------------------
     Apple's design language (macOS Big Sur / Monterey / Sonoma
     sidebars — Music, Finder, Notes, Mail):

       * SOLID BLUE PILL for the ACTIVE nav item — bg-brand-600 with
         white text + white icon. This is the iconic Apple sidebar
         active state. Replaces the 3px vertical accent bar from V7.2
         (which was more Slack/Linear style — Apple doesn't use it).

       * SUBTLE GRAY HOVER for INACTIVE items — bg-ink-100 with no
         strong color shift, just a faint tint that signals
         interactivity. Apple sidebars never use bold hover states.

       * ROUNDED-APPLE PILL SHAPE — 12px corner radius on nav items.
         Apple uses generous radius on sidebar rows.

       * SPRING TIMING — cubic-bezier(0.32, 0.72, 0, 1) with 0.2s
         duration. The signature Apple ease-out curve: snappy on the
         way in, gentle on the way out.

       * PRESS FEEDBACK — nav items scale to 0.97 on :active for a
         tactile "press" feel. Very subtle, very Apple.

       * REFINED SECTION TITLES — 11px semibold uppercase, wide
         letter-spacing (0.04em), ink-500 color. Loud enough to scan,
         quiet enough to recede.

       * FROSTED QUICK TIP CARD — soft gradient from brand-50 to
         indigo-50 with a hairline border and a radial highlight that
         catches the eye without being heavy. Frosted-glass feel.

     The 3px vertical accent bar (.nav-item-active-bar) and dot
     indicator (.nav-item-active-dot) rules from V7.2 are kept in the
     stylesheet for backwards-compat with any cached HTML, but no
     longer emitted by renderSidebar().
     ================================================================== */

  /* Apple spring transition for nav-item interactions. Applied as a
     Tailwind-style utility class on every nav-item button. */
  .apple-transition {
    transition:
      background-color 0.2s cubic-bezier(0.32, 0.72, 0, 1),
      color            0.15s ease,
      box-shadow       0.2s ease,
      transform        0.15s cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* Press feedback — nav items "press in" slightly when clicked. Apple
     uses this micro-interaction across its entire UI (buttons, list
     rows, sidebar items). The 0.97 scale is barely perceptible but
     provides the tactile feel that distinguishes Apple sidebars. */
  .nav-item:active:not([data-disabled]) {
    transform: scale(0.97);
  }

  /* Refined section title — overrides the inline Tailwind classes when
     the .sidebar-section-title class is present. We do this so the
     typography stays consistent even if a future refactor changes the
     Tailwind utility classes on the <div>. */
  .sidebar-section-title {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #86868b !important; /* ink-500 */
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-bottom: 6px !important;
  }

  /* Frosted Quick Tip card — soft gradient + hairline border + radial
     highlight. The radial highlight gives the card a subtle "lit from
     above" feel, very Apple. */
  .sidebar-quick-tip-card {
    background: linear-gradient(
      135deg,
      rgba(0, 113, 227, 0.05) 0%,
      rgba(94, 92, 230, 0.05) 100%
    );
    border: 0.5px solid rgba(0, 113, 227, 0.12);
    border-radius: 12px;
    padding: 12px;
    position: relative;
    overflow: hidden;
  }
  .sidebar-quick-tip-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
      80% 60% at 20% 0%,
      rgba(0, 113, 227, 0.06) 0%,
      transparent 70%
    );
    pointer-events: none;
  }
  .sidebar-quick-tip-card > * {
    position: relative;
    z-index: 1;
  }

  /* Active-state inset shadow — a hairline white inset on top of the
     blue pill gives it depth (like a real button lit from above). */
  #app-sidebar .nav-item.bg-brand-600 {
    box-shadow:
      0 1px 3px 0 rgba(0, 113, 227, 0.25),
      inset 0 0.5px 0 0 rgba(255, 255, 255, 0.15);
  }


  /* ==================================================================
     SIDEBAR SECTION DIVIDERS + COLLAPSED-STATE ALIGNMENT FIXES (V7.4)
     ------------------------------------------------------------------
     User requested:
       1. "put line on the sidebar nav menu" — add visible hairline
          dividers between nav sections (Navigation / Content /
          Management / Personal). These appear as horizontal 0.5px
          lines between sections — the same hairline weight Apple
          uses on macOS sidebar separators.
       2. "when toggle sidebar, the ui must be properly aligned" — the
          V7.3 collapsed state had two issues:
            (a) Inter-section gap stayed at 20px (space-y-5) when
                collapsed, creating awkward vertical gaps between
                groups of icons. Now collapses to 4px.
            (b) Icons weren't perfectly centered because `gap-2.5` on
                the nav-item still applied even when the label was
                width:0. The 10px gap pushed the icon off-center. Now
                gap collapses to 0 in collapsed mode.
            (c) Section title height:0 transition was janky because
                it ran alongside the width transition. Now disabled in
                collapsed mode (instant hide) for cleaner feel.
     ================================================================== */

  /* ───────────────────────────────────────────────────────────────────
     HAIRLINE DIVIDERS BETWEEN NAV SECTIONS
     A 0.5px horizontal line (rgba 0,0,0,0.06) separates each section
     from the next. The first section has no divider above it (no
     border-top). The divider uses padding-top + margin-top to create
     breathing room above it so the line doesn't crowd the previous
     section's last nav item.
     ─────────────────────────────────────────────────────────────────── */
  #app-sidebar .nav-section + .nav-section {
    border-top: 0.5px solid rgba(0, 0, 0, 0.06);
    padding-top: 16px;
    margin-top: 16px;
  }

  /* When collapsed: shrink the inter-section gap so the icons cluster
     together (Apple-style collapsed sidebars are dense, not airy). The
     divider line still appears between sections — it's the visual
     "line on the sidebar nav menu" the user asked for. */
  #app-sidebar.sidebar-collapsed .nav-section + .nav-section {
    padding-top: 10px;
    margin-top: 10px;
  }

  /* ───────────────────────────────────────────────────────────────────
     COLLAPSED-STATE ALIGNMENT FIXES
     ─────────────────────────────────────────────────────────────────── */

  /* Fix 1: kill the gap-2.5 between icon and (zero-width) label so the
     icon centers perfectly in the 72px column. */
  #app-sidebar.sidebar-collapsed .nav-item {
    gap: 0 !important;
  }

  /* Fix 2: ensure the icon itself is centered (flex with no other
     visible children + justify-content: center). The icon already has
     shrink-0 so it won't be squeezed. */
  #app-sidebar.sidebar-collapsed .nav-item > svg,
  #app-sidebar.sidebar-collapsed .nav-item > i {
    margin: auto;
  }

  /* Fix 3: kill the section-title transition so the height:0 collapse
     is instant. Running it alongside the width transition made the
     sidebar feel like it was "folding" twice. */
  #app-sidebar.sidebar-collapsed .sidebar-section-title,
  #app-sidebar.sidebar-collapsed .sidebar-quick-tip,
  #app-sidebar.sidebar-collapsed .nav-item-label {
    transition: none !important;
  }

  /* Fix 4: When collapsed, the quick-tip container's border-top was
     leaving a stray hairline at the bottom of the sidebar. Hide the
     entire quick-tip wrapper (not just the card) so the border
     disappears too. */
  #app-sidebar.sidebar-collapsed .sidebar-quick-tip {
    display: none !important;
  }

  /* Fix 5: the nav-item button has a fixed px-3 padding from the
     template. When collapsed, we override to 0 so the icon can
     center within the 72px width. But we also need to set a min
     width so the button fills the column (otherwise it shrinks to
     icon width + centers itself in the column with empty space
     on both sides — the click target would only be ~28px wide). */
  #app-sidebar.sidebar-collapsed .nav-item {
    min-width: 100% !important;
  }


  /* ==================================================================
     SIDEBAR (V7.5 — matches reference design from qa-update2.html)
     ------------------------------------------------------------------
     This section SUPERSEDES the V7.3 Apple-style rules and the V7.4
     alignment rules. We don't delete those rules (would require
     rewriting the whole file); we just override them with later-
     source-order rules of equal-or-higher specificity.

     Key visual changes from V7.3/V7.4:
       * CONTAINER  — solid bg-white instead of glass-panel. No
                      backdrop-blur. Plain right hairline border.
       * ACTIVE     — soft tint (bg-brand-50 text-brand-700), NOT
                      the solid bg-brand-600 pill. The V7.3 inset
                      shadow rule below targets .nav-item.bg-brand-600
                      which no longer exists in the HTML, so it
                      becomes a no-op (harmless).
       * NAV ITEM   — rounded-lg (8px) instead of rounded-apple (12px).
                      text-xs (12px) instead of text-[13px]. px-3
                      py-2 (was already px-3 py-2 in V7.3, same).
       * ICON       — w-4 h-4 (16px) instead of w-[18px] h-[18px].
       * QUICK TIP  — REMOVED. The V7.3 .sidebar-quick-tip-card rule
                      is still in the stylesheet but the element is no
                      longer rendered, so the rule is a no-op.
       * TRANSITION — plain `transition` (Tailwind default 150ms ease)
                      instead of .apple-transition spring timing. The
                      .apple-transition class is no longer on the
                      nav-item buttons in V7.5, so its rule is a no-op.
       * PRESS-SCALE — REMOVED. The V7.3 .nav-item:active scale rule
                      still exists in the stylesheet but we override
                      it below with `transform: none !important` so
                      nav items don't shrink on click.
     ================================================================== */

  /* Override 1: kill the press-scale from V7.3. The reference design
     doesn't have press feedback — items just transition between hover
     and active states with no transform. */
  #app-sidebar .nav-item:active {
    transform: none !important;
  }

  /* Override 2: when collapsed, the smaller 16px icons still need to
     center properly. The V7.4 rules already handle this for 18px
     icons — the same rules work for 16px (the icons shrink-0 class
     prevents shrinking, justify-content: center centers them).
     No additional rule needed — V7.4 covers it. */

  /* Override 3: section title styling — match the reference's exact
     px-2 horizontal padding (was px-3 in V7.2/V7.3/V7.4). The inline
     Tailwind classes on the title element already include px-2 so
     this rule is belt-and-suspenders. */
  #app-sidebar .sidebar-section-title {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Override 4: when collapsed, hide the Quick Tip wrapper. V7.4
     already does this via display:none, but since V7.5 no longer
     renders the Quick Tip at all, this rule is a no-op safety net. */
  #app-sidebar.sidebar-collapsed .sidebar-quick-tip {
    display: none !important;
  }

  /* Override 5: solid white container — kill the V7.2 glass-panel
     backdrop-filter that was bleeding through on desktop. V7.5
     uses bg-white explicitly in the class list, but the .glass-panel
     rule from V7.2 still applies backdrop-filter. Override it. */
  #app-sidebar.glass-panel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  @media (min-width: 1024px) {
    #app-sidebar {
      background-color: #ffffff !important;
    }
  }

  /* Override 6: tighter nav-list spacing on collapsed state for the
     smaller 16px icons. V7.4 already handles gap:0 and padding:0,
     which works for 16px icons too. No additional rule needed. */