/* UI kit chrome only. */

.kit-frame .m-only{ display:block; }

.kit{ max-width:1440px; margin:0 auto; padding:var(--space-section) 0 var(--space-section); }

.kit-head{ display:flex; flex-direction:column; gap:var(--space-group); max-width:684px; margin-bottom:var(--space-section); }

.kit-kicker{
    margin:0; font-family:var(--font-sans); font-weight:var(--type-label-weight);
    font-size:var(--type-label-size); line-height:var(--type-label-leading);
    letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--color-text-secondary);
  }

.kit-head .text-title{ margin:0; }

.kit-head p{ margin:0; color:var(--color-text-secondary); }

.kit-layout{ display:flex; align-items:flex-start; gap:var(--space-group); }

.kit-nav{
    width:calc(var(--space-section) * 3 + var(--space-block) + var(--space-tight)); flex:none; position:sticky; top:calc(var(--size-touch) + var(--space-section));
    display:flex; flex-direction:column; gap:var(--space-group);
  }

.kit-nav-group{ display:flex; flex-direction:column; gap:var(--space-snug); }

.kit-nav-group-label, .kit-group-label, .kit-cell-label, .kit-sub-kicker{
    margin:0; font-family:var(--font-sans); font-weight:var(--type-label-weight);
    font-size:var(--type-label-size); line-height:var(--type-label-leading);
    letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--color-text-tertiary);
  }

.kit-sub-kicker{ padding:var(--space-tight) 0 0; }

.kit-toolbar{
    position:sticky; top:0; z-index:4; display:flex; flex-wrap:wrap; align-items:center;
    gap:var(--space-group); margin-bottom:var(--space-section); padding-block:var(--space-snug);
    background:var(--color-surface);
  }

.kit-tool{ display:flex; align-items:center; gap:var(--space-snug); }

.kit-tool .cov-seg{ margin:0; width:auto; }

.kit-group{ display:flex; flex-direction:column; gap:var(--space-section); scroll-margin-top:calc(var(--size-touch) + var(--space-section)); }

.kit-part{ margin:0; }

.kit-phase, .kit-matrix{ align-items:center; }

.kit-phase{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-group); }

.kit-phase-item, .kit-compare-item{ display:flex; flex-direction:column; gap:var(--space-snug); min-width:0; }

.kit-matrix{
    display:grid; grid-template-columns:minmax(7rem, auto) repeat(3, minmax(0, 1fr));
    gap:var(--space-snug) var(--space-group); overflow-x:auto;
  }

.kit-compare{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); gap:var(--space-card); }

.kit-frame.is-w375{ max-width:375px; }

.kit-frame.is-w768{ max-width:768px; }

.kit-frame.is-w1024{ max-width:1024px; }

.kit-nav summary{
    cursor:pointer; list-style:none;
    font-family:var(--font-sans); font-weight:var(--type-ui-weight);
    font-size:var(--type-ui-size); line-height:var(--type-ui-leading);
    color:var(--color-text);
  }

.kit-nav-jump{
    color:inherit; text-decoration:none;
    font-family:inherit; font-weight:inherit; font-size:inherit; line-height:inherit;
  }

.kit-nav a[aria-current="true"]{ color:var(--color-text); box-shadow:var(--state-selected-mark); }

.kit-nav summary::-webkit-details-marker{ display:none; }

@media (hover:hover){ .kit-nav summary:hover { background:var(--state-hover-fill); } }

.kit-sub{ display:flex; flex-direction:column; gap:var(--space-tight); padding:var(--space-tight) 0; }

.kit-sub a{
    padding-left:var(--space-snug); text-decoration:none;
    font-family:var(--font-sans); font-weight:var(--type-body-weight);
    font-size:var(--type-body-size); line-height:var(--type-body-leading);
    color:var(--color-text-secondary);
  }

@media (hover:hover){ .kit-sub a:hover, .kit-sub a.is-hover { background:var(--state-hover-fill); color:var(--color-text); text-decoration:none; } }

.kit-sub a:active, .kit-sub a.is-press{ background:var(--state-press-fill); }

.kit-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:calc(var(--space-section) * 2); }

.kit-section{ display:flex; flex-direction:column; gap:var(--space-section); scroll-margin-top:calc(var(--size-touch) + var(--space-section)); }

.kit-section .text-heading{ margin:0; }

.kit-story{ display:flex; flex-direction:column; gap:var(--space-snug); scroll-margin-top:calc(var(--size-touch) + var(--space-section)); }

.kit-label{
    display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--space-inline) var(--space-snug);
    margin:0; font-family:var(--font-sans); font-weight:var(--type-label-weight);
    font-size:var(--type-label-size); line-height:var(--type-label-leading);
    letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--color-text-secondary);
  }

.kit-note{
    font-family:var(--font-sans); font-weight:var(--type-body-weight);
    font-size:var(--type-body-size); line-height:var(--type-body-leading);
    letter-spacing:normal; text-transform:none; color:var(--color-text-secondary);
  }

.kit-frame{
    background:var(--color-surface); border:1px solid var(--color-border);
    border-radius:var(--radius-control); padding:var(--space-section);
  }

.kit-frame:has(.kit-scale){ padding:0 var(--space-group); }

.kit-scale{ display:flex; flex-direction:column; }

.kit-scale-row{
    display:flex; align-items:center; gap:var(--space-card);
    padding-block:var(--space-snug);
    border-bottom:1px solid var(--color-border);
  }

.kit-scale-row:last-child{ border-bottom:none; }

.kit-scale-meta{
    flex:0 0 calc(var(--space-section) * 4); display:flex; flex-direction:column; gap:var(--space-tight); min-width:0;
  }

.kit-scale-name{
    font-family:var(--font-sans); font-weight:var(--type-label-weight);
    font-size:var(--type-label-size); line-height:var(--type-label-leading);
    letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--color-text-secondary);
  }

.kit-scale-note{
    font-family:var(--font-sans); font-weight:var(--type-caption-weight);
    font-size:var(--type-caption-size); line-height:var(--type-caption-leading);
    color:var(--color-text-secondary);
  }

.kit-scale-sample{ flex:1; min-width:0; display:flex; align-items:center; }

.kit-scale-sample .kit-swatch, .kit-scale-sample .kit-radii{
    width:var(--space-block); height:var(--space-block);
  }

.kit-ramp{ display:flex; flex-wrap:wrap; gap:var(--space-snug) var(--space-group); width:100%; }

.kit-chip{ display:flex; flex-direction:column; gap:var(--space-tight); flex:1 1 72px; max-width:120px; min-width:0; }

.kit-chip .kit-swatch{ width:100%; height:var(--space-section); }

.kit-chip-label{
    font-family:var(--font-sans); font-weight:var(--type-label-weight);
    font-size:var(--type-label-size); line-height:var(--type-label-leading);
    letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--color-text);
  }

.kit-chip-value{
    font-family:var(--font-sans); font-weight:var(--type-caption-weight);
    font-size:var(--type-caption-size); line-height:var(--type-caption-leading);
    color:var(--color-text-secondary); overflow-wrap:anywhere;
  }

.kit-frame.kit-wrap{
    width:100%; max-width:100%;
  }

.kit-scale-row[id]{ scroll-margin-top:calc(var(--size-touch) + var(--space-section)); }

.kit-frame.kit-wrap .cov-seg{ margin:0; width:auto; }

.kit-glyph{ display:block; overflow:visible; }

.kit-icon-row{ display:flex; align-items:center; gap:var(--space-group); }

.kit-icon{
    display:inline-flex; align-items:center; justify-content:center;
    width:var(--size-icon); height:var(--size-icon); color:var(--color-text);
  }

.kit-icon svg{ width:100%; height:100%; display:block; }

.kit-icon-sm{ width:var(--size-icon-sm); height:var(--size-icon-sm); }

.kit-icon-inline{ display:inline-flex; align-items:center; gap:var(--space-tight); color:var(--color-text); }

.kit-icon-mark{
    display:inline-flex; align-items:center; justify-content:center;
    width:var(--size-icon); height:var(--size-icon); border-radius:var(--radius-full);
    color:var(--color-on-accent);
  }

.kit-icon-mark svg{ width:72%; height:72%; display:block; }

.kit-icon-mark.tone-pass{ background:var(--tone-pass-edge); }

.kit-icon-mark.tone-block{ background:var(--tone-block-edge); }

.kit-icon-mark.tone-caution{ background:var(--tone-caution-edge); }

.kit-icon-mark.tone-neutral{ background:var(--tone-neutral-edge); }

.kit-scale-heading{
    margin:var(--space-group) 0 0; padding-top:var(--space-snug);
    border-top:1px solid var(--color-border); color:var(--color-text);
  }

.kit-scale-heading:first-child{ margin-top:0; border-top:none; }

.kit-motion-demo{ display:flex; align-items:center; gap:var(--space-group); width:100%; }

.kit-motion-bar{
    display:block; width:var(--space-group); height:var(--space-group);
    border-radius:var(--radius-full); background:var(--color-accent);
  }

.kit-frame .text-display, .kit-frame .text-title, .kit-frame .text-heading, .kit-frame .text-subheading,
  .kit-frame .text-body, .kit-frame .text-ui, .kit-frame .text-caption,
  .kit-frame .text-label, .kit-frame .text-data{ margin:0; color:var(--color-text); }

.kit-space{
    height:var(--space-snug); background:var(--color-accent); border-radius:var(--space-tight);
  }

.kit-swatch{
    width:calc(var(--space-section) * 2); height:calc(var(--space-card) * 2 + var(--space-inline));
    border:1px solid var(--color-border); border-radius:var(--radius-control);
  }

.kit-radii{
    width:calc(var(--space-section) * 2); height:calc(var(--space-block) * 2);
    background:var(--color-surface-sunken); border:1px solid var(--color-border);
  }

.kit-motion{ margin:0; color:var(--color-text); }

.kit-frame .cov-svg, .kit-frame .intro-map{ width:min(100%, var(--width-map)); display:block; }

.kit-frame .m-row{ width:100%; }

.kit-frame .card-result{ height:auto; }

.kit-frame .btn-block{ width:auto; }

.kit-frame .addr-wrap{ max-width:var(--width-map); }

.kit-missing{ margin:0; color:var(--tone-block-edge); }

.kit-layers{ display:flex; flex-wrap:wrap; gap:var(--space-group); align-items:flex-start; }

.kit-layer{ margin:0; width:160px; }

.kit-layer svg{ width:100%; height:auto; display:block; }

.kit-layer figcaption{ margin-top:var(--space-snug); color:var(--color-text-secondary); font-size:var(--type-caption-size); }