@layer block {
  /* === DIVIDER === */
  hr, [class*="divider"] hr {
    border: none;
    background: var(--color-hr);
    block-size: 1px;
    inline-size: 100%;
    margin-block: var(--space-xs); 
  }

  [class*="divider:text"] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-md);
    margin-block: var(--space-md);
    
    & hr { margin-block: 0; inline-size: 100%; }
    
    & span {
      color: var(--text-muted);
      font-size: var(--text-sm);
      white-space: nowrap;
      text-box: trim-both cap alphabetic;
    }
  }


  /* === DIALOG === */
  dialog {
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dialog);
    
    body[data-mode="dark"] & {
      box-shadow: none;
      filter: drop-shadow(0 0 12px rgba(255,255,255,0.1));
    }
    
    &::backdrop {
      background: rgb(0 0 0 / 0.5);
    }
  }

  /* === DRAWER === */
  [class*="drawer:"] {
    position: fixed;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    overflow: hidden;
    
    [data-mode="dark"] & {
      box-shadow: none;
      filter: drop-shadow(0 0 12px rgba(255,255,255,0.1));
    }
    
    /* Reset dialog/popover defaults */
    inset: auto;
    margin: 0;
    border: 0;
    padding: 0;
    max-width: none;
    max-height: 100svh;
    
    /* Transitions */
    opacity: 0;
    transition: 
      display 0.3s allow-discrete,
      opacity 0.3s,
      transform 0.3s,
      overlay 0.3s allow-discrete;

    /* === DIRECTION VARIANTS === */
    
    /* Left */
    &[class*=":left"] {
      top: 0;
      left: 0;
      width: fit-content;
      max-width: 75%;
      height: 100vh;
      transform: translateX(-100%);
      border-radius: 0 var(--radius-md) var(--radius-md) 0;

      &[open], &:popover-open {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* Right */
    &[class*=":right"] {
      top: 0;
      right: 0;
      width: fit-content;
      max-width: 75%;
      height: 100vh;
      transform: translateX(100%);
      border-radius: var(--radius-md) 0 0 var(--radius-md);

      &[open], &:popover-open {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* Top */
    &[class*=":top"] {
      top: 0;
      left: 0;
      width: 100vw;
      height: max-content;
      max-height: 90vh;
      overflow-y: auto;
      transform: translateY(-100%);
      border-radius: 0 0 var(--radius-md) var(--radius-md);

      &[open], &:popover-open {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Bottom */
    &[class*=":bottom"] {
      bottom: 0;
      left: 0;
      width: 100vw;
      height: max-content;
      max-height: 90vh;
      overflow-y: auto;
      transform: translateY(100%);
      border-radius: var(--radius-md) var(--radius-md) 0 0;

      &[open], &:popover-open {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Backdrop (dialog only) */
    &::backdrop {
      background: var(--drawer-backdrop);
      transition: 
        opacity 0.3s, 
        overlay 0.3s allow-discrete, 
        display 0.3s allow-discrete;
      opacity: 0;
    }

    &[open]::backdrop {
      opacity: 1;
    }
  }

  /* @starting-style for drawer animations */
  @starting-style {
    [class*="drawer:"][class*=":left"][open],
    [class*="drawer:"][class*=":left"]:popover-open {
      opacity: 0;
      transform: translateX(-100%);
    }
    [class*="drawer:"][class*=":right"][open],
    [class*="drawer:"][class*=":right"]:popover-open {
      opacity: 0;
      transform: translateX(100%);
    }
    [class*="drawer:"][class*=":top"][open],
    [class*="drawer:"][class*=":top"]:popover-open {
      opacity: 0;
      transform: translateY(-100%);
    }
    [class*="drawer:"][class*=":bottom"][open],
    [class*="drawer:"][class*=":bottom"]:popover-open {
      opacity: 0;
      transform: translateY(100%);
    }
    dialog[class*="drawer:"][open]::backdrop {
      opacity: 0;
    }
  }

  .drawer-content {
    padding: var(--space-lg, 2rem);
    overflow-y: auto;
    height: 100%;
  }

  .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md, 1.5rem);
    padding-bottom: var(--space-sm, 1rem);
    border-bottom: 2px solid var(--color-pri, #667eea);
  }

  .drawer-header h3 {
    margin: 0;
  }

  /* === INLINE CONTROLS (shared base) === */
  button, [class~="btn"], [class*="btn:"], [class~="chip"], [class*="chip:"], [class~="badge"], [class*="badge:"], kbd {
    text-box: trim-both cap alphabetic;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    font-weight: 500;
    border: none;
  }

  

  /* === BADGE === */
  /* Parent gets relative positioning when it has a badge */
  :has(> [class~="badge"], > [class*="badge:"]) {
    position: relative;
  }

[class~="badge"], [class*="badge:"] {
    position: absolute;
    top: -4px;
    right: -4px;
    padding: 0.25rem;
    min-width: var(--size-3);
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: 999px;
    background: var(--color-inf);
    color: var(--color-inf-text, white);

    /* Color variants */
    &[class*=":suc"] {
      background: var(--color-suc);
      color: var(--color-suc-text, white);
    }
    &[class*=":wrn"] {
      background: var(--color-wrn);
      color: var(--color-wrn-text, white);
    }
    &[class*=":dgr"] {
      background: var(--color-dgr);
      color: var(--color-dgr-text, white);
    }

    /* Dot modifier */
    &.dot {
      padding: 0.3rem;
      min-width: unset;
      width: 0.5rem;
      height: 0.5rem;
    }
  }

  /* === TOOLTIP === */
  .tooltip {
    position: fixed;
    inset: auto;
    position-anchor: var(--tooltip-anchor);
    top: anchor(bottom);
    left: anchor(center);
    translate: -50% var(--space-xs);
    
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-sm);
    background: var(--gry-9);
    color: var(--gry-1);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    
    &:popover-open { display: block; }
  }

  .tooltip-implicit {
    position-anchor: implicit;
  }

  /* === BUTTON === */
  [class~="btn"], [class*="btn:"] {
    --_btn-color: var(--color-sec);
    cursor: pointer;
    height: var(--btn-height-md);
    padding-inline: var(--space-md);
    font-size: var(--text-md);
    border-radius: var(--radius-btn);
    background: color-mix(in oklch, var(--_btn-color), transparent 92%);
    color: var(--_btn-color);
    border: 1.5px solid currentColor;

    @media (hover: hover) {
      &:hover {
        outline: var(--hover-outline-width) solid var(--_btn-color, currentColor);
        outline-offset: 2px;
      }
    }

    &:focus-visible {
      outline: var(--hover-outline-width) solid var(--_btn-color, currentColor);
      outline-offset: 2px;
    }

    /* Mobile: Enhanced tap feedback */
    @media (hover: none) {
      &:active {
        outline: calc(var(--hover-outline-width) * 2) solid var(--_btn-color, currentColor);
        outline-offset: 2px;
        transform: scale(0.98);
      }
    }

    /* Desktop: Standard active */
    @media (hover: hover) {
      &:active {
        outline: calc(var(--hover-outline-width) * 2) solid var(--_btn-color, currentColor);
        outline-offset: 2px;
      }
    }

    /* States */
    &[aria-busy="true"] { opacity: 0.7; cursor: wait; }
    &:disabled { opacity: 0.5; cursor: not-allowed; }

    /* Sizes */
    &[class*="-sm"] {
      height: var(--btn-height-sm);
      padding-inline: var(--space-sm);
      font-size: var(--text-sm);
    }
    &[class*="-lg"] {
      height: var(--btn-height-lg);
      padding-inline: var(--space-lg);
      font-size: var(--text-lg);
    }

    /* Variants */
    &[class*=":pri"] {
      --_btn-color: var(--color-pri);
      background: var(--_btn-color);
      color: color-mix(in oklch, var(--text-color), var(--color-pri) 6%);
      border: 1.5px solid light-dark(
        color-mix(in oklch, var(--_btn-color), black 15%),
        color-mix(in oklch, var(--_btn-color), white 20%)
      );
    }
    &[class*=":sec"] {
      --_btn-color: var(--color-sec);
      background: var(--_btn-color);
      color: color-mix(in oklch, var(--text-color), var(--color-sec) 6%);
      border: 1.5px solid light-dark(
        color-mix(in oklch, var(--_btn-color), black 15%),
        color-mix(in oklch, var(--_btn-color), white 20%)
      );
    }
    &[class*=":inf"] {
      --_btn-color: var(--color-inf);
      background: var(--_btn-color);
      color: color-mix(in oklch, var(--text-color), var(--color-inf) 6%);
      border: 1.5px solid light-dark(
        color-mix(in oklch, var(--_btn-color), black 15%),
        color-mix(in oklch, var(--_btn-color), white 20%)
      );
    }
    &[class*=":suc"] {
      --_btn-color: var(--color-suc);
      background: var(--_btn-color);
      color: color-mix(in oklch, var(--text-color), var(--color-suc) 6%);
      border: 1.5px solid light-dark(
        color-mix(in oklch, var(--_btn-color), black 15%),
        color-mix(in oklch, var(--_btn-color), white 20%)
      );
    }

    &[class*=":wrn"] {
      --_btn-color: var(--color-wrn);
      background: var(--_btn-color);
      color: color-mix(in oklch, var(--text-color), var(--color-wrn) 6%);
      border: 1.5px solid light-dark(
        color-mix(in oklch, var(--_btn-color), black 15%),
        color-mix(in oklch, var(--_btn-color), white 20%)
      );
    }
    &[class*=":dgr"] {
      --_btn-color: var(--color-dgr);
      background: var(--_btn-color);
      color: color-mix(in oklch, var(--text-color), var(--color-dgr) 6%);
      border: 1.5px solid light-dark(
        color-mix(in oklch, var(--_btn-color), black 15%),
        color-mix(in oklch, var(--_btn-color), white 20%)
      );
    }

    /* Outline modifier */
    &[class~="out"] {
      background: color-mix(in oklch, var(--_btn-color, currentColor), transparent 92%);
      color: var(--_btn-color, currentColor);
      border: 1.5px solid currentColor;
    }
  }


  /* === FORM === */
  .form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    
    /* Tabs inside form fields */
    :is([class~="tabs"], [class*="tabs:"]) {
      width: 100%;
      height: var(--btn-height-md);
      padding: 4px;
      box-sizing: border-box;
      align-items: center;
      
      /* Tab buttons: fill space, reduced padding to fit track */
      > :is([class~="tab"], [class*="tab:"]) {
        flex: 1;
        justify-content: center;
        padding-block: 2px;
        height: 100%;
      }
    }
    
    /* Validation states via span in field (matches input pattern) */
    :is(label, div):is([class~="field"], [class*="field:"]):has(:is([class~="tabs"], [class*="tabs:"])) {
      &:has(span.dgr) :is([class~="tabs"], [class*="tabs:"]) { border-color: var(--color-dgr); }
      &:has(span.wrn) :is([class~="tabs"], [class*="tabs:"]) { border-color: var(--color-wrn); }
      &:has(span.suc) :is([class~="tabs"], [class*="tabs:"]) { border-color: var(--color-suc); }
    }
  }

  /* Form column spans */
  .form [class~="field"], .form [class*="field:"] { grid-column: span 4; }
  .form [class*="field:w1"] { grid-column: span 1; }
  .form [class*="field:w2"] { grid-column: span 2; }
  .form [class*="field:w3"] { grid-column: span 3; }
  .form :is(button, [class~="btn"], [class*="btn:"]).w-4 { grid-column: span 4; }

  

  /* === FIELD === */
  :is(label, div):is([class~="field"], [class*="field:"]) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.1;
    color: var(--text-color);

    & span {
      font-size: var(--text-xs);
      font-weight: 400;
      color: transparent;
      &::after { content: ""; }
    }

    &:has(:required) span::after { content: " *"; color: var(--text-color); }
    &:has(:required span.dgr) span::after { color: var(--color-dgr); }
    &:has(:required span.wrn) span::after { color: var(--color-wrn); }
    &:has(:required span.suc) span::after { content: " ✓"; color: var(--color-suc); }

    & input,
    & textarea {
      width: 100%;
      margin: 0;
      border-color: var(--surface-input);
      &::placeholder { color: var(--gry-5); opacity: 1; }
    }

    & textarea { resize: vertical; }

    /* Feedback text and input border colors via sibling selector */
    & span.dgr { color: var(--color-dgr); & ~ :is(input, textarea) { border: 1px solid var(--color-dgr); } }
    & span.suc { color: var(--color-suc); & ~ :is(input, textarea) { border: 1px solid var(--color-suc); } }
    & span.wrn { color: var(--color-wrn); & ~ :is(input, textarea) { border: 1px solid var(--color-wrn); } }
    & span.inf { color: var(--color-inf); & ~ :is(input, textarea) { border: 1px solid var(--color-inf); } }
  }

  /* === INPUT === */
  input:where([type="text"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"], [type="number"]),
  input:not([type]),
  textarea {
    caret-color: var(--color-pri);
    height: var(--btn-height-md);
    padding-inline: var(--space-sm);
    font-size: var(--text-md);
    line-height: 1;
    background: var(--surface-inset);
    color: var(--text-color);
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-btn);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;

    &::placeholder {
      color: var(--text-muted);
    }

    &:focus {
      border-color: var(--color-pri);
      box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-pri), transparent 85%);
    }
  }

  textarea {
    height: auto;
    min-height: 5rem;
    padding: var(--space-sm);
  }

  /* === KBD === */
  kbd {
    padding: 0.2em 0.4em;
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    border-radius: var(--radius-sm);
    background: var(--surface-hover);
    border: 1px solid var(--border-color, rgba(0,0,0,0.1));
  }

/* === CHIP === */
  [class~="chip"], [class*="chip:"] {
    height: var(--size-5);
    padding-inline: var(--space-sm);
    font-size: var(--text-xs);
    border-radius: var(--radius-round);
    background: var(--surface-pri);
    color: color-mix(in oklch, var(--text-color), var(--surface-pri) 6%);
    border: 1px solid light-dark(
      color-mix(in oklch, var(--color-pri), transparent 60%),
      color-mix(in oklch, var(--color-pri), transparent 50%)
    );

    /* Modifiers */
    &.add, &.sub, &.rem { cursor: pointer; }

    &.add::before {
      content: "+";
      margin-inline-end: var(--space-xxs);
      font-weight: bold;
    }

    &.sub::before {
      content: "-";
      margin-inline-end: var(--space-xxs);
      font-weight: bold;
    }

    &.rem {
      &::after {
        content: "\00d7";
        margin-inline-start: var(--space-xxs);
        opacity: 0.6;
      }
      @media (hover: hover) {
        &:hover::after { opacity: 1; }
      }
    }

    /* Size */
    &[class*="-sm"] {
      height: var(--size-4);
      padding-inline: var(--space-xs);
      font-size: var(--text-xxs, 0.65rem);
    }

    /* Variants using theme surfaces */
    &[class*=":pri"] {
      background: var(--surface-pri);
      color: color-mix(in oklch, var(--text-color), var(--surface-pri) 6%);
      border-color: light-dark(
        color-mix(in oklch, var(--color-pri), transparent 60%),
        color-mix(in oklch, var(--color-pri), transparent 50%)
      );
    }

    &[class*=":sec"] {
      background: var(--surface-sec);
      color: color-mix(in oklch, var(--text-color), var(--surface-sec) 6%);
      border-color: light-dark(
        color-mix(in oklch, var(--color-sec), transparent 60%),
        color-mix(in oklch, var(--color-sec), transparent 50%)
      );
    }

    &[class*=":inf"] {
      background: var(--surface-inf);
      color: color-mix(in oklch, var(--text-color), var(--surface-inf) 6%);
      border-color: light-dark(
        color-mix(in oklch, var(--color-inf), transparent 60%),
        color-mix(in oklch, var(--color-inf), transparent 50%)
      );
    }

    &[class*=":suc"] {
      background: var(--surface-suc);
      color: color-mix(in oklch, var(--text-color), var(--surface-suc) 6%);
      border-color: light-dark(
        color-mix(in oklch, var(--color-suc), transparent 60%),
        color-mix(in oklch, var(--color-suc), transparent 50%)
      );
    }

    &[class*=":wrn"] {
      background: var(--surface-wrn);
      color: color-mix(in oklch, var(--text-color), var(--surface-wrn) 6%);
      border-color: light-dark(
        color-mix(in oklch, var(--color-wrn), transparent 60%),
        color-mix(in oklch, var(--color-wrn), transparent 50%)
      );
    }

    &[class*=":dgr"] {
      background: var(--surface-dgr);
      color: color-mix(in oklch, var(--text-color), var(--surface-dgr) 6%);
      border-color: light-dark(
        color-mix(in oklch, var(--color-dgr), transparent 60%),
        color-mix(in oklch, var(--color-dgr), transparent 50%)
      );
    }
  }
  }

  /* === TABS === */
/* === TABS === */
  [class~="tabs"], [class*="tabs:"] {
    --_tabs-color: var(--color-pri);
    display: inline-flex;
    align-self: flex-start;
    width: fit-content;
    gap: var(--space-xs);
    padding: var(--space-xs);
    background: var(--surface-inset);
    border-radius: var(--radius-round);
    border: 1px solid var(--surface-border);

    /* Variants */
    &[class*=":pri"] {
      --_tabs-color: var(--color-pri);
    }
    &[class*=":sec"] {
      --_tabs-color: var(--color-sec);
    }

    /* Size */
    &[class*="-sm"] {
      padding: 3px;
      gap: 2px;
      & > button {
        padding: 0.2rem var(--space-sm);
        font-size: var(--text-sm);
      }
    }

    /* Modifier */
    &.full {
      width: 100%;
      & > button { flex: 1; }
    }

    /* Direct button children */
    & > button {
      padding: var(--space-xs) var(--space-md);
      font-size: var(--text-md);
      font-weight: 500;
      border: none;
      border-radius: var(--radius-round);
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.15s ease;

      @media (hover: hover) {
        &:hover:not(.active) {
          color: var(--text-color);
          background: color-mix(in oklch, var(--_tabs-color), transparent 92%);
        }
      }

      &.active {
        color: var(--_tabs-color);
        background: var(--surface-card);
        box-shadow: var(--shadow-sm);
      }
    }
  }

  /* === POPUP === */
  [class~="popup"], [class*="popup:"] {
    border: 0;
    padding: var(--space-sm);
    margin: 0;
    inset: auto;
    position: absolute;
    min-width: 180px;
    background: var(--surface-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-popup);
    
    transition: 
      display 0.2s allow-discrete, 
      opacity 0.2s, 
      transform 0.2s,
      overlay 0.2s allow-discrete;
    
    opacity: 0;
    transform: scale(0.95) translateY(-8px);
  }

  [class~="popup"]:popover-open, [class*="popup:"]:popover-open {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  @starting-style {
    [class~="popup"]:popover-open, [class*="popup:"]:popover-open {
      opacity: 0;
      transform: scale(0.95) translateY(-8px);
    }
  }

  [class~="popup-item"] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-sm);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    text-align: left;
    transition: background 0.1s ease;

    @media (hover: hover) {
      &:hover {
        background: var(--surface-inset);
      }
    }
  }

  /* === CARD === */
/* === CARD === */
  /* === CARD === */
  [class~="card"], [class*="card:"] {
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
    border: var(--card-border-size) solid var(--card-border);
    background: var(--surface-def);
    color: var(--text-color);
    box-shadow: var(--shadow-card);

    /* Nested content styles */
    & h3 { 
      margin: 0 0 var(--space-xs) 0; 
      font-size: var(--text-md); 
      font-weight: 600; 
    }
    & p { margin-block: 0; }
    & footer { margin-block-start: var(--space-sm); }

    /* Variants */
    &[class*=":pri"] {
      background: var(--surface-pri);
      border-color: var(--card-pri-border);
    }

    &[class*=":sec"] {
      background: var(--surface-sec);
      border-color: var(--card-sec-border);
    }

    &[class*=":gla"] {
      background: var(--surface-gla);
      border-color: var(--card-gla-border);
      backdrop-filter: blur(var(--glass-blur-2));
    }
  }

  /* === ICON BUTTON === */
  [class~="icon-btn"], [class*="icon-btn:"] {
    aspect-ratio: 1;
    width: var(--size-px-8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-btn);
    cursor: pointer;
    background: transparent;
    color: var(--text-color);


    & svg { 
      width: var(--size-px-5); 
      height: var(--size-px-5); 
      flex-shrink: 0; 
    }

    @media (hover: hover) {
      &:hover {
        outline: var(--hover-outline-width) solid var(--_icon-btn-color, currentColor);
        outline-offset: 2px;
      }
    }

    &:focus-visible {
      outline: var(--hover-outline-width) solid var(--_icon-btn-color, currentColor);
      outline-offset: 2px;
    }

    &:active {
      outline: calc(var(--hover-outline-width) * 2) solid var(--_icon-btn-color, currentColor);
      outline-offset: 2px;
    }

    /* Variant: mute */
    &[class*=":mute"] {
      --_icon-btn-color: var(--text-muted);
      color: var(--text-muted);
    }

    /* Color variants */
    &[class*=":pri"] {
      --_icon-btn-color: var(--color-pri);
      color: var(--color-pri);
    }
    &[class*=":sec"] {
      --_icon-btn-color: var(--color-sec);
      color: var(--color-sec);
    }
    &[class*=":inf"] {
      --_icon-btn-color: var(--color-inf);
      color: var(--color-inf);
    }
    &[class*=":suc"] {
      --_icon-btn-color: var(--color-suc);
      color: var(--color-suc);
    }
    &[class*=":wrn"] {
      --_icon-btn-color: var(--color-wrn);
      color: var(--color-wrn);
    }
    &[class*=":dgr"] {
      --_icon-btn-color: var(--color-dgr);
      color: var(--color-dgr);
    }


    /* Size: small */
    &[class*="-sm"] {
      width: var(--size-px-7);
      & svg { width: var(--size-px-4); height: var(--size-px-4); }
    }

    /* States */
    &[aria-busy="true"] { opacity: 0.7; cursor: wait; }
    &:disabled { opacity: 0.5; cursor: not-allowed; }
  }


/* === ID="nav" LOCALITY OF BEHAVIOR PREFERENCE FOR COMPLEX PIECE OF UI === */
#nav {
  /* Padding when drawer mode (no card class) */
  &[class*="drawer"] > div {
    padding: var(--space-sm);
  }

  & > div {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }

  & header, & footer {
    flex-shrink: 0;
  }

  & nav {
    flex: 1;
    overflow-y: auto;
  }

  & a {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-btn);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.2s ease;
    position: relative;

    &:hover {
      background: var(--surface-hover, rgba(0, 0, 0, 0.05));
    }
  }

  & svg {
    flex-shrink: 0;
  }

  & small {
    margin-inline-start: auto;
    /* Style like chip:sec-sm */
    height: var(--size-4);
    padding-inline: var(--space-xs);
    font-size: var(--text-xxs, 0.65rem);
    border-radius: var(--radius-round);
    background: light-dark(
      color-mix(in oklch, var(--color-sec), var(--gry-0) 92%),
      color-mix(in oklch, var(--color-sec), var(--gry-8) 90%)
    );
    color: light-dark(
      color-mix(in oklch, var(--color-sec), var(--gry-9) 30%),
      color-mix(in oklch, var(--color-sec), var(--gry-1) 20%)
    );
    border: 1px solid light-dark(
      color-mix(in oklch, var(--color-sec), transparent 60%),
      color-mix(in oklch, var(--color-sec), transparent 50%)
    );
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Badge via data attribute */
  & a[data-ui-badge]::after {
    content: attr(data-badge);
    position: absolute;
    top: 0;
    left: calc(var(--space-sm) + 16px);
    font-size: var(--text-xs);
    background: var(--color-dgr);
    color: white;
    border-radius: 999px;
    padding: 0 0.4em;
    min-width: 1.2em;
    text-align: center;
  }

  /* Compact mode - stack vertically */
  @container (width <= 6rem) {
    & a {
      flex-direction: column;
      align-items: center;
      padding: var(--space-sm);
      gap: var(--space-2xs);
      font-size: var(--text-xs);
      text-align: center;
    }

    & small {
      display: none;
    }
  }
}


/* === ID="aside" LOCALITY OF BEHAVIOR FOR SETTINGS PANEL === */
#aside {
  /* Padding when drawer mode (no card class) */
  &[class*="drawer"] > div {
    padding: var(--space-md);
  }

  & > div {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
  }
}

  
}