/* ==========================================================================
   Shortnshare Design System (2026) - public/css/sns.css
   Implemented from docs/design/design-system.md. That file is the contract;
   if a screen disagrees with this file, the screen is wrong.
   Loaded first on every page. Page stylesheets may only add layout that is
   unique to that page - never a colour, font size, radius or shadow.
   ========================================================================== */

/* ==========================================================================
   1. Font - Inter Variable, self-hosted (CSP: default-src 'self')
   ========================================================================== */

@font-face {
  font-family: 'Inter var';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2. Tokens - declared once, here only
   ========================================================================== */

:root {
  /* surfaces */
  --sns-canvas:      #FAFAF9;
  --sns-surface:     #FFFFFF;
  --sns-surface-2:   #F6F6F5;
  --sns-sidebar:     #FCFCFC;

  /* lines */
  --sns-line:        #E9EAEE;
  --sns-line-strong: #DDDEE4;

  /* ink */
  --sns-ink:         #0E1020;
  --sns-ink-2:       #171A2B;
  --sns-ink-3:       #4A4E60;
  --sns-ink-4:       #6E7183;

  /* brand */
  --sns-brand:       #6560E9;
  --sns-brand-hover: #574FD6;
  --sns-brand-press: #4A42C4;
  --sns-brand-ink:   #4B44C9;
  --sns-brand-tint:  #F0EFFB;
  --sns-brand-tint-2:#E5E3F8;

  /* status */
  --sns-success:      #16A34A;
  --sns-success-tint: #E8F6EE;
  --sns-warn:         #D97706;
  --sns-danger:       #DC2626;
  --sns-danger-tint:  #FDECEC;

  /* pressed fill for secondary/ghost controls (spec 2.1) */
  --sns-surface-press: #EFEFEE;

  /* focus */
  --sns-focus-ring: 0 0 0 3px rgba(101, 96, 233, .22);

  /* type */
  --sns-font: 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI',
              Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-display: clamp(2.5rem, 5.2vw, 3.75rem); /* 40 -> 60px, marketing h1 only */
  --fs-h1:   2.125rem;   /* 34px  page title */
  --fs-h2:   1.75rem;    /* 28px  section title */
  --fs-h3:   1.25rem;    /* 20px  card / panel title */
  --fs-lg:   1.0625rem;  /* 17px  lead paragraph */
  --fs-base: 0.9375rem;  /* 15px  body, inputs, buttons, table cells */
  --fs-sm:   0.8125rem;  /* 13px  meta, helper text */
  --fs-xs:   0.75rem;    /* 12px  eyebrow, badge */

  /* space - 4px base, allowed values only */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* radius */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* elevation */
  --sh-xs: 0 1px 2px rgba(14, 16, 32, .04);
  --sh-sm: 0 1px 3px rgba(14, 16, 32, .06), 0 1px 2px rgba(14, 16, 32, .04);
  --sh-md: 0 8px 24px rgba(14, 16, 32, .08);
  --sh-lg: 0 24px 60px rgba(14, 16, 32, .10);

  /* motion */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

/* ==========================================================================
   3. Reset and base elements
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sns-font);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--sns-ink-3);
  background: var(--sns-canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--sns-ink);
  font-style: normal;
}

p {
  margin: 0;
  color: var(--sns-ink-3);
}

a {
  color: var(--sns-brand-ink);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img, svg {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* Icon defaults (spec 1.7): stroke, currentColor, no fill */
.sns-icon {
  width: 20px;
  height: 20px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Global keyboard focus: never remove focus without replacing it */
:focus-visible {
  outline: none;
  box-shadow: var(--sns-focus-ring);
  border-radius: var(--r-sm);
}

/* ==========================================================================
   4. Layout primitives - app shell
   ========================================================================== */

.sns-shell {
  display: grid;
  grid-template-columns: 272px 1fr;
  min-height: 100dvh;
}

.sns-sidebar {
  background: var(--sns-sidebar);
  border-right: 1px solid var(--sns-line);
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: var(--s-6) var(--s-6);
  gap: var(--s-6);
  overflow-y: auto;
}

.sns-main {
  background: var(--sns-canvas);
  min-width: 0;
}

.sns-topbar {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--s-10);
  border-bottom: 1px solid var(--sns-line);
}

.sns-page {
  padding: var(--s-10);
  max-width: 1120px;
}

.sns-page--narrow {
  max-width: 680px;
  margin-inline: auto;
}

/* A dense data screen is not prose and does not want the reading measure. */
.sns-page--wide {
  max-width: 1600px;
}

/* Page gutter on small screens follows contract 1.3: 24px tablet, 16px phone.
   The topbar keeps the same side padding. */
@media (max-width: 960px) {
  .sns-page {
    padding: var(--s-6) var(--s-4);
  }

  .sns-topbar {
    padding: 0 var(--s-6);
  }
}

/* Marketing band (contract 2.4): a full-bleed horizontal band between two
   hairlines. The page places its centred content column inside it. Never two
   adjacent bands. */
.sns-band {
  background: var(--sns-surface);
  border-top: 1px solid var(--sns-line);
  border-bottom: 1px solid var(--sns-line);
}

/* Sidebar contents, in order (spec 2.4) */

.sns-brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--sns-ink);
  font-size: var(--fs-lg);
  font-weight: 600;
  text-decoration: none;
  margin-top: var(--s-6);
  padding: 0 var(--s-1);
}

.sns-brand:hover {
  text-decoration: none;
}

.sns-sidebar .sns-btn--block {
  margin-bottom: var(--s-6);
}

.sns-nav {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.sns-nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 44px;
  padding: 0 var(--s-3);
  border-radius: var(--r-md);
  color: var(--sns-ink-3);
  font-size: var(--fs-base);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.sns-nav-item:hover {
  background: var(--sns-surface-2);
  text-decoration: none;
}

.sns-nav-item[aria-current="page"] {
  background: var(--sns-brand-tint);
  color: var(--sns-brand-ink);
  font-weight: 600;
}

.sns-sidebar-foot {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--sns-line);
}

.sns-user {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 44px;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-md);
  text-align: left;
  color: var(--sns-ink-2);
  font-size: var(--fs-base);
  font-weight: 500;
}

.sns-user:hover {
  background: var(--sns-surface-2);
}

.sns-user .sns-chevron {
  margin-left: auto;
  color: var(--sns-ink-4);
}

/* Below 960px the sidebar collapses to a top bar; the nav opens as a
   full-height sheet from the left. The page supplies the menu button. */
@media (max-width: 960px) {
  .sns-shell {
    grid-template-columns: 1fr;
  }

  .sns-sidebar {
    position: fixed;
    z-index: 40;
    top: 0;
    left: 0;
    height: 100dvh;
    width: 300px;
    max-width: 85vw;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
  }

  .sns-sidebar.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--dur-2) var(--ease);
    box-shadow: var(--sh-lg);
  }
}

.sns-scrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--sns-ink) 40%, transparent);
  border: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}

.sns-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-2) var(--ease);
}

/* ==========================================================================
   4a. Type roles (contract 1.2). One class per row of the pairing table;
   each sets only the size, weight, tracking, line height and colour of its
   row. Pages use these instead of restating the values.
   ========================================================================== */

.sns-type-display { font-size: var(--fs-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; color: var(--sns-ink); }
.sns-type-h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--sns-ink); }
.sns-type-h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--sns-ink); }
.sns-type-h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--sns-ink); }
.sns-type-row-title { font-size: var(--fs-base); font-weight: 600; letter-spacing: 0; line-height: 1.4; color: var(--sns-ink-2); }
.sns-type-lead { font-size: var(--fs-lg); font-weight: 400; letter-spacing: 0; line-height: 1.55; color: var(--sns-ink-3); }
.sns-type-body { font-size: var(--fs-base); font-weight: 400; letter-spacing: 0; line-height: 1.6; color: var(--sns-ink-3); }
.sns-type-meta { font-size: var(--fs-sm); font-weight: 400; letter-spacing: 0; line-height: 1.5; color: var(--sns-ink-4); }
.sns-eyebrow { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; line-height: 1.3; color: var(--sns-ink-4); text-transform: uppercase; }
.sns-type-stat { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--sns-ink); }

/* ==========================================================================
   5. Components
   ========================================================================== */

/* --- 5.1 Button --------------------------------------------------------- */

.sns-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 40px;
  padding: 0 var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease);
}

.sns-btn:hover {
  text-decoration: none;
}

.sns-btn:disabled,
.sns-btn[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
}

/* One primary action (amended contract): one solid brand button per section,
   and never two competing inside the same viewport height. The page's main
   action may repeat in the header and at the point of decision, but a header
   action is always secondary when a solid brand button is already on screen. */
.sns-btn--primary {
  background: var(--sns-brand);
  color: var(--sns-surface);
}

.sns-btn--primary:hover {
  background: var(--sns-brand-hover);
}

.sns-btn--primary:active {
  background: var(--sns-brand-press);
}

.sns-btn--secondary {
  background: var(--sns-surface);
  border-color: var(--sns-line);
  color: var(--sns-ink-2);
}

.sns-btn--secondary:hover {
  background: var(--sns-surface-2);
  border-color: var(--sns-line-strong);
}

.sns-btn--secondary:active {
  background: var(--sns-surface-press);
}

.sns-btn--ghost {
  background: transparent;
  color: var(--sns-ink-3);
}

.sns-btn--ghost:hover {
  background: var(--sns-surface-2);
}

.sns-btn--ghost:active {
  background: var(--sns-surface-press);
}

.sns-btn--danger {
  background: var(--sns-danger);
  color: var(--sns-surface);
}

.sns-btn--danger:hover {
  background: color-mix(in srgb, var(--sns-danger) 92%, black);
}

.sns-btn--danger:active {
  background: color-mix(in srgb, var(--sns-danger) 86%, black);
}

.sns-btn--sm {
  height: 32px;
  padding: 0 var(--s-3);
  font-size: var(--fs-sm);
}

.sns-btn--lg {
  height: 48px;
  padding: 0 var(--s-6);
}

.sns-btn--block {
  display: flex;
  width: 100%;
}

/* Icon button (spec 2.7) */
.sns-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  color: var(--sns-ink-4);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.sns-icon-btn .sns-icon {
  width: 18px;
  height: 18px;
}

.sns-icon-btn:hover {
  background: var(--sns-surface-2);
  color: var(--sns-ink-2);
}

/* Icon circles (spec 1.7) */
.sns-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-full);
  background: var(--sns-brand-tint);
  color: var(--sns-brand);
}

.sns-icon-circle--soft {
  width: 36px;
  height: 36px;
  background: var(--sns-surface-2);
  color: var(--sns-ink-3);
}

/* State circle for errors (entry screens, empty states). Status colour for
   state only (spec 1.1). */
.sns-icon-circle--danger {
  background: var(--sns-danger-tint);
  color: var(--sns-danger);
}

/* --- 5.2 Input ----------------------------------------------------------- */

.sns-input {
  height: 44px;
  padding: 0 var(--s-4);
  background: var(--sns-surface);
  border: 1px solid var(--sns-line);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  color: var(--sns-ink-2);
  width: 100%;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}

.sns-input::placeholder {
  color: var(--sns-ink-4);
}

.sns-input:hover {
  border-color: var(--sns-line-strong);
}

.sns-input:focus {
  outline: none;
  border-color: var(--sns-brand);
  box-shadow: var(--sns-focus-ring);
}

.sns-input--lg {
  height: 52px;
}

.sns-input[aria-invalid="true"] {
  border-color: var(--sns-danger);
}

.sns-input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sns-danger) 22%, transparent);
}

.sns-input:disabled {
  background: var(--sns-surface-2);
  color: var(--sns-ink-4);
  cursor: not-allowed;
}

textarea.sns-input {
  height: auto;
  min-height: 88px;
  padding: var(--s-3) var(--s-4);
  resize: vertical;
}

/* Field wrapper: label + input + helper */
.sns-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.sns-field > label {
  color: var(--sns-ink-2);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.sns-field-help {
  margin-top: var(--s-1);
  color: var(--sns-ink-4);
  font-size: var(--fs-sm);
}

.sns-field-error {
  margin-top: var(--s-1);
  color: var(--sns-danger);
  font-size: var(--fs-sm); /* 13px */
}

/* Input with a leading icon */
.sns-input-group {
  position: relative;
}

.sns-input-group .sns-icon {
  position: absolute;
  top: 50%;
  left: var(--s-4);
  transform: translateY(-50%);
  color: var(--sns-ink-4);
  pointer-events: none;
}

.sns-input-group .sns-input {
  padding-left: 44px;
}

/* --- 5.3 Card ------------------------------------------------------------ */

.sns-card {
  background: var(--sns-surface);
  border: 1px solid var(--sns-line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--sh-xs);
}

.sns-card--flat {
  box-shadow: none;
}

.sns-card--pad-0 {
  padding: 0;
  overflow: hidden;
}

.sns-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

.sns-card-header h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* --- 5.5 Segmented control ------------------------------------------------ */

.sns-segment {
  display: flex;
  width: 100%;
  padding: var(--s-1);
  background: var(--sns-surface);
  border: 1px solid var(--sns-line);
  border-radius: var(--r-md);
}

.sns-segment-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  height: 44px;
  padding: 0 var(--s-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--sns-ink-4);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.sns-segment-btn[aria-pressed="true"],
.sns-segment-btn[aria-checked="true"] {
  background: var(--sns-brand-tint);
  color: var(--sns-brand-ink);
}

.sns-segment-btn:hover {
  color: var(--sns-ink-2);
}

/* --- 5.6 Tabs -------------------------------------------------------------- */

/* A tab strip never pushes the page sideways. When the tabs need more room
   than the column has, the strip itself scrolls. The 4px of top padding,
   pulled back by a matching negative margin, keeps the focus ring off the
   clip edge without moving the strip. */
.sns-tabs {
  display: flex;
  gap: var(--s-4);
  border-bottom: 1px solid var(--sns-line);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-top: 4px;
  margin-top: -4px;
}

.sns-tabs::-webkit-scrollbar {
  height: 0;
}

.sns-tab {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  white-space: nowrap;
  height: 44px;
  padding: 0 var(--s-1);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--sns-ink-4);
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}

.sns-tab:hover {
  color: var(--sns-ink-2);
}

.sns-tab[aria-selected="true"] {
  color: var(--sns-ink);
  font-weight: 600;
  border-bottom-color: var(--sns-brand);
}

/* --- 5.7 Table -------------------------------------------------------------- */

/* A data table keeps its column widths; on a narrow screen the card
   scrolls sideways rather than pushing the page wider than the viewport. */
.sns-table-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* When a table is wider than its card, the row actions must not be the part
   that disappears. The last column stays pinned to the right edge, with a
   hairline and a soft shadow so it reads as sitting above the scrolling
   columns rather than as part of them. */
.sns-table.sns-table--sticky-end th:last-child,
.sns-table.sns-table--sticky-end td:last-child {
  position: sticky;
  right: 0;
  z-index: 1;
  background: var(--sns-surface);
  border-left: 1px solid var(--sns-line-strong);
  box-shadow: -8px 0 16px -8px rgba(14, 16, 32, .10);
}

.sns-table.sns-table--sticky-end thead th:last-child {
  background: var(--sns-surface-2);
}

/* A table with many columns earns tighter gutters. The reading measure of a
   sentence does not apply to a grid of short values. */
.sns-table.sns-table--dense th,
.sns-table.sns-table--dense td {
  padding-inline: var(--s-3);
  white-space: nowrap;
}

.sns-table th {
  height: 44px;
  padding: 0 var(--s-5);
  border-bottom: 1px solid var(--sns-line);
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--sns-ink-4);
  white-space: nowrap;
}

.sns-table th[aria-sort] {
  color: var(--sns-ink-2);
  background: var(--sns-surface-2);
}

.sns-table td {
  height: 60px;
  padding: 0 var(--s-5);
  border-bottom: 1px solid var(--sns-line);
  font-size: var(--fs-base);
  vertical-align: middle;
}

.sns-table tbody tr:last-child td {
  border-bottom: 0;
}

.sns-table tbody tr {
  transition: background var(--dur-1) var(--ease);
}

.sns-table tbody tr:hover {
  background: var(--sns-surface-2);
}

.sns-table .sns-cell-title {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--sns-ink-2);
  font-weight: 600;
}

.sns-table a {
  color: var(--sns-brand-ink);
}

.sns-table a:hover {
  text-decoration: underline;
}

.sns-table .sns-cell-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sns-table .sns-cell-actions {
  text-align: right;
  white-space: nowrap;
}

.sns-table th:last-child,
.sns-table td:last-child {
  text-align: right;
}

/* --- 5.8 List row ------------------------------------------------------------ */

.sns-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 56px;
  padding: 0 var(--s-4);
  background: var(--sns-surface);
  border: 1px solid var(--sns-line);
  border-radius: var(--r-md);
  transition: border-color var(--dur-1) var(--ease);
}

.sns-row:hover {
  border-color: var(--sns-line-strong);
}

.sns-row-title {
  color: var(--sns-ink-2);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.4;
}

.sns-row-sub {
  color: var(--sns-ink-4);
  font-size: var(--fs-sm);
}

.sns-row-end {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--sns-ink-4);
}

a.sns-row {
  text-decoration: none;
}

a.sns-row:hover {
  text-decoration: none;
}

/* --- 5.9 Accordion ------------------------------------------------------------ */

.sns-accordion {
  border-top: 1px solid var(--sns-line);
}

.sns-accordion details + details {
  border-top: 1px solid var(--sns-line);
}

.sns-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 56px;
  padding: var(--s-3) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--sns-ink-2);
}

.sns-accordion summary::-webkit-details-marker {
  display: none;
}

.sns-accordion summary .sns-icon {
  color: var(--sns-ink-4);
  transition: transform var(--dur-2) var(--ease);
}

.sns-accordion details[open] summary .sns-icon {
  transform: rotate(180deg);
}

.sns-accordion .sns-accordion-body {
  padding-bottom: var(--s-5);
  max-width: 68ch;
  font-size: var(--fs-base);
  color: var(--sns-ink-3);
}

/* --- 5.10 Badge ---------------------------------------------------------------- */

.sns-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

.sns-badge--neutral {
  background: var(--sns-surface-2);
  color: var(--sns-ink-3);
}

.sns-badge--brand {
  background: var(--sns-brand-tint);
  color: var(--sns-brand-ink);
}

.sns-badge--success {
  background: var(--sns-success-tint);
  color: var(--sns-success);
}

.sns-badge--warn {
  background: color-mix(in srgb, var(--sns-warn) 14%, var(--sns-surface));
  color: var(--sns-warn);
}

.sns-badge--danger {
  background: var(--sns-danger-tint);
  color: var(--sns-danger);
}

/* --- 5.11 Stat tile -------------------------------------------------------------- */

.sns-stat {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.sns-stat-label {
  font-size: var(--fs-base);
  color: var(--sns-ink-3);
}

.sns-stat-number {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--sns-ink);
  font-variant-numeric: tabular-nums;
}

.sns-stat-row {
  display: flex;
  align-items: stretch;
}

.sns-stat-row > * {
  padding: 0 var(--s-6);
}

.sns-stat-row > * + * {
  border-left: 1px solid var(--sns-line);
}

/* --- 5.12 Empty state ------------------------------------------------------------- */

.sns-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-12) var(--s-6);
  text-align: center;
}

.sns-empty h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
}

.sns-empty p {
  font-size: var(--fs-base);
  color: var(--sns-ink-3);
}

.sns-empty .sns-btn {
  margin-top: var(--s-2);
}

/* --- 5.13 Dropzone ------------------------------------------------------------------ */

.sns-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-10);
  border: 2px dashed var(--sns-line);
  border-radius: var(--r-lg);
  background: transparent;
  text-align: center;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}

.sns-dropzone .sns-icon {
  width: 24px;
  height: 24px;
  color: var(--sns-ink-4);
}

.sns-dropzone .sns-dropzone-title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--sns-ink);
}

.sns-dropzone .sns-dropzone-help {
  font-size: var(--fs-sm);
  color: var(--sns-ink-4);
}

.sns-dropzone.is-dragover {
  border-color: var(--sns-brand);
  background: var(--sns-brand-tint);
}

/* --- 5.14 Toast ----------------------------------------------------------------------- */

.sns-toast {
  position: fixed;
  left: 50%;
  bottom: var(--s-4);
  z-index: 60;
  transform: translate(-50%, var(--s-2));
  padding: var(--s-3) var(--s-4);
  background: var(--sns-ink);
  color: var(--sns-surface);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  box-shadow: var(--sh-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease),
              visibility 0s linear var(--dur-2);
}

.sns-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease);
}

/* --- 5.15 Avatar (contract 2.15) ------------------------------------------- */

.sns-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--r-full);
  background: var(--sns-brand-tint-2);
  color: var(--sns-brand-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  overflow: hidden;
}

.sns-avatar--sm { width: 24px; height: 24px; font-size: var(--fs-xs); }
.sns-avatar--lg { width: 56px; height: 56px; font-size: var(--fs-h3); }
.sns-avatar--xl { width: 80px; height: 80px; font-size: 1.75rem; }

/* An image fills the circle; the initials underneath are the fallback. */
.sns-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 5.16 Message (contract 2.16) -------------------------------------------- */

/* A status message: inline feedback after an action or a redirect banner.
   Never a container for layout; text only. */
.sns-msg {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.sns-msg--info {
  background: var(--sns-brand-tint);
  color: var(--sns-brand-ink);
}

.sns-msg--success {
  background: var(--sns-success-tint);
  color: var(--sns-success);
}

.sns-msg--error {
  background: var(--sns-danger-tint);
  color: var(--sns-danger);
}

/* ==========================================================================
   6. Utilities - the only abbreviated classes allowed
   ========================================================================== */

.sns-u-hidden {
  display: none;
}

.sns-u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sns-u-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sns-u-nums {
  font-variant-numeric: tabular-nums;
}

.sns-u-stack-2 {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.sns-u-stack-3 {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.sns-u-stack-4 {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.sns-u-stack-6 {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.sns-u-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* ==========================================================================
   7. Motion - everything respects reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .sns-btn,
  .sns-icon-btn,
  .sns-nav-item,
  .sns-user,
  .sns-input,
  .sns-segment-btn,
  .sns-tab,
  .sns-table tbody tr,
  .sns-row,
  .sns-dropzone {
    transition-duration: 0.01ms;
  }

  .sns-accordion summary .sns-icon,
  .sns-sidebar,
  .sns-sidebar.is-open,
  .sns-scrim,
  .sns-scrim.is-open,
  .sns-toast,
  .sns-toast.is-visible {
    transition: none;
  }
}