/* SNS geometry V1.1 · 2026-10-28 · Load after color and typography tokens. */
:root {
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
  --radius-tag: var(--radius-xs);
  --radius-popover: var(--radius-sm);
  --radius-control: var(--radius-md);
  --radius-card: var(--radius-lg);
  --radius-feature: var(--radius-xl);
  --radius-dialog: var(--radius-xl);
  --radius-table: var(--radius-lg);
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --gap-icon: var(--space-2);
  --gap-actions: var(--space-2);
  --gap-field-label: var(--space-2);
  --gap-field-help: var(--space-1);
  --gap-fields: var(--space-4);
  --gap-related: var(--space-4);
  --gap-sections: var(--space-6);
  --gap-page-title: var(--space-6);
  --padding-page: var(--space-8);
  --padding-card: var(--space-6);
  --padding-dialog: var(--space-6);
  --padding-control-x: var(--space-4);
  --padding-control-y: var(--space-2);
  --padding-cell-x: var(--space-4);
  --padding-cell-y: var(--space-4);
  --size-control: 40px;
  --size-row: 56px;
  --size-table-head: 48px;
  --size-icon: 16px;
}
[data-density="compact"] {
  --padding-card: var(--space-4);
  --padding-control-x: var(--space-3);
  --padding-control-y: var(--space-1);
  --padding-cell-y: var(--space-3);
  --size-control: 32px;
  --size-row: 48px;
}
[data-density="comfortable"] {
  --padding-card: var(--space-8);
  --padding-control-y: var(--space-3);
  --padding-cell-y: var(--space-5);
  --size-control: 48px;
  --size-row: 64px;
}
/* Define density once per workspace. Do not nest conflicting densities. */
@media (max-width: 1199px) { :root { --padding-page: var(--space-6); } }
@media (max-width: 767px) { :root { --padding-page: var(--space-4); } }
/* Opt-in reference components; no global reset or business behavior. */
.sns-geo-card {
  box-sizing: border-box;
  padding: var(--padding-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  background: var(--color-bg-surface);
}
.sns-geo-control {
  box-sizing: border-box;
  min-height: var(--size-control);
  padding: var(--padding-control-y) var(--padding-control-x);
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-control);
  font-family: var(--font-family-ui, sans-serif);
  font-size: var(--font-size-14, 14px);
  line-height: var(--font-leading-14, 22px);
  background: var(--color-bg-input);
  color: var(--color-text-primary);
}
.sns-geo-control:focus-visible {
  outline: 3px solid var(--color-interaction-focus-ring);
  outline-offset: 3px;
}
.sns-geo-table-shell {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-table);
  overflow: auto;
  max-width: 100%;
}
.sns-geo-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.sns-geo-table th, .sns-geo-table td {
  box-sizing: border-box;
  padding: var(--padding-cell-y) var(--padding-cell-x);
  border-radius: var(--radius-none);
  font-size: var(--font-size-14, 14px);
  line-height: var(--font-leading-14, 22px);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border-subtle);
}
.sns-geo-table td { height: var(--size-row); }
.sns-geo-table th { height: var(--size-table-head); padding-block: var(--space-3); background: var(--color-bg-subtle); font-weight: 500; }
.sns-geo-table tr:last-child td { border-bottom: 0; }