/* ============================================================
   UOB Design System — Shared Design Tokens & Layout
   Source of truth for all component documentation pages.
   To restyle all pages, edit values in :root below.
   ============================================================ */

/* ── DESIGN TOKENS ── */
:root {
  /* Brand colours */
  --uob-primary:        #005eb8;
  --uob-primary-dark:   #004585;
  --uob-accent-blue:    #00237b;
  --uob-hover-blue:     #0084ff;

  /* Semantic colours */
  --uob-red:            #fb002c;
  --uob-green:          #28a745;
  --uob-orange:         #f09252;

  /* Neutral palette */
  --uob-black:          #212121;
  --uob-grey-40:        #6e6e6e;
  --uob-grey-30:        #b2b2b2;
  --uob-grey-20:        #e6e6e6;
  --uob-grey-10:        #efefef;
  --uob-white:          #ffffff;
  --uob-page-bg:        #f5f5f5;
  --uob-border:         #e6e6e6;

  /* Do / Don't */
  --uob-do-bg:          #f0fff4;
  --uob-do-border:      #28a745;
  --uob-dont-bg:        #fff5f5;
  --uob-dont-border:    #fb002c;

  /* Typography scale */
  --uob-font-xs:        11px;
  --uob-font-sm:        13px;
  --uob-font-base:      16px;
  --uob-font-lg:        19px;
  --uob-font-doc:       32px;

  /* Border radius */
  --uob-radius-sm:      4px;
  --uob-radius-md:      6px;
  --uob-radius-lg:      8px;
  --uob-radius-full:    9999px;

  /* Toggle switch */
  --uob-toggle-width:   44px;
  --uob-toggle-height:  24px;
  --uob-toggle-dot:     20px;
  --uob-toggle-bg-on:   var(--uob-primary);
  --uob-toggle-bg-off:  var(--uob-grey-30);

  /* Layout */
  --content-width:      900px;
  --section-gap:        56px;
  --section-pad:        32px;
  --state-col-width:    320px;
}

/* ── RESET ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── BASE ── */
html {
  scrollbar-gutter: stable;
}
body {
  font-family: 'Noto Sans', sans-serif;
  background: var(--uob-page-bg);
  color: var(--uob-black);
  line-height: 1.54;
  -webkit-font-smoothing: antialiased;
}

/* ── PAGE WRAPPER ── */
.page-wrap {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 64px 24px 120px;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

/* ── HEADING ── */
.doc-heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.doc-title {
  font-size: var(--uob-font-doc);
  font-weight: 700;
  line-height: 1.1;
  color: var(--uob-black);
}
.doc-desc {
  font-size: var(--uob-font-base);
  font-weight: 400;
  color: var(--uob-black);
  max-width: 640px;
}
.doc-rule {
  height: 3px;
  background: var(--uob-black);
  margin-top: 16px;
}

/* ── NAV PILLS ── */
.doc-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.doc-nav a {
  display: inline-block;
  background: var(--uob-primary);
  color: var(--uob-white);
  font-size: var(--uob-font-sm);
  font-weight: 400;
  padding: 6px 18px;
  border-radius: var(--uob-radius-full);
  text-decoration: none;
  transition: background 0.15s;
}
.doc-nav a:hover {
  background: var(--uob-primary-dark);
}

/* ── SECTION CARD ── */
.doc-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.section-badge {
  display: inline-flex;
  align-items: center;
  background: var(--uob-primary);
  color: var(--uob-white);
  font-size: var(--uob-font-sm);
  font-weight: 700;
  padding: 6px 20px;
  border-radius: var(--uob-radius-md) var(--uob-radius-md) 0 0;
  align-self: flex-start;
  letter-spacing: 0.01em;
}
.section-body {
  background: var(--uob-white);
  border: 1px solid var(--uob-border);
  border-radius: 0 var(--uob-radius-lg) var(--uob-radius-lg) var(--uob-radius-lg);
  padding: var(--section-pad);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ── SUB-HEADING ── */
.sub-heading {
  font-size: var(--uob-font-sm);
  font-weight: 700;
  color: var(--uob-primary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--uob-grey-10);
}

/* ── SIZE CARDS ── */
.sizes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.size-card {
  background: var(--uob-grey-10);
  border-radius: var(--uob-radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.size-label {
  font-size: var(--uob-font-xs);
  font-weight: 700;
  color: var(--uob-grey-40);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.size-chip {
  display: inline-block;
  background: var(--uob-primary);
  color: var(--uob-white);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--uob-radius-full);
}
.size-note {
  font-size: var(--uob-font-xs);
  color: var(--uob-grey-40);
  margin-top: 4px;
}

/* ── STATES LIST ── */
.states-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.state-row {
  display: grid;
  grid-template-columns: var(--state-col-width) 1fr;
  gap: 32px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid var(--uob-grey-10);
}
.state-row:last-child {
  border-bottom: none;
}
.state-demo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Dropdown docs: panel is position:absolute, so it does not grow the row — reserve height so the next state row is not covered */
.state-row:has(.dd-field .dd-panel.is-visible) .state-demo {
  min-height: 240px;
}
.state-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.state-tag {
  display: inline-block;
  background: var(--uob-grey-10);
  color: var(--uob-grey-40);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--uob-radius-full);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  align-self: flex-start;
}
.state-name {
  font-size: var(--uob-font-sm);
  font-weight: 700;
  color: var(--uob-black);
}
.state-desc {
  font-size: var(--uob-font-sm);
  font-weight: 400;
  color: var(--uob-black);
}

/* ── BEHAVIOUR ── */
.behaviour-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.beh-heading {
  font-size: var(--uob-font-sm);
  font-weight: 700;
  color: var(--uob-black);
}
.beh-list {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: disc;
}
.beh-list li {
  font-size: var(--uob-font-sm);
  color: var(--uob-black);
}
.beh-divider {
  height: 1px;
  background: var(--uob-grey-10);
  margin: 4px 0;
}

/* ── SPECS ── */
.specs-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.specs-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.spec-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.spec-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--uob-primary);
  color: var(--uob-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--uob-font-xs);
  font-weight: 700;
}
.spec-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.spec-part {
  font-size: var(--uob-font-sm);
  font-weight: 700;
  color: var(--uob-black);
}
.spec-details {
  padding-left: 16px;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.spec-details li {
  font-size: var(--uob-font-sm);
  color: var(--uob-black);
}
.spec-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.token {
  background: var(--uob-grey-10);
  border: 1px solid var(--uob-grey-20);
  border-radius: var(--uob-radius-sm);
  font-size: 10px;
  font-weight: 700;
  color: var(--uob-primary);
  padding: 2px 8px;
  font-family: monospace;
}

/* ── SPECS DEMO PANEL ── */
.specs-demo {
  background: #ffffff;
  border-radius: var(--uob-radius-lg);
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.annot-badge {
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--uob-primary);
  color: var(--uob-white);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}

/* ── DOS AND DON'TS (numbered list) ── */
.dos-donts-list {
  padding-left: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dos-donts-list li {
  font-size: var(--uob-font-sm);
  color: var(--uob-black);
  line-height: 1.6;
}

/* Legacy grid styles (kept for reference) */
.dd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.dd-column {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.dd-col-header {
  font-size: var(--uob-font-sm);
  font-weight: 700;
  padding: 8px 14px;
  border-radius: var(--uob-radius-sm) var(--uob-radius-sm) 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dd-col-header.do   { background: var(--uob-do-border); color: var(--uob-white); }
.dd-col-header.dont { background: var(--uob-dont-border); color: var(--uob-white); }
.dd-items {
  border: 1px solid var(--uob-grey-20);
  border-top: none;
  border-radius: 0 0 var(--uob-radius-sm) var(--uob-radius-sm);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}
.dd-item {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--uob-grey-10);
  font-size: var(--uob-font-sm);
  color: var(--uob-black);
  align-items: flex-start;
}
.dd-item:last-child { border-bottom: none; }
.dd-item.do-item   { background: var(--uob-do-bg); }
.dd-item.dont-item { background: var(--uob-dont-bg); }
.dd-icon {
  flex-shrink: 0;
  font-size: 14px;
  margin-top: 1px;
}

/* ── PAGE NAV ── */
.page-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--uob-white);
  border-bottom: 1px solid var(--uob-border);
  display: flex;
  align-items: stretch;
  height: 56px;
  font-family: 'Noto Sans', sans-serif;
}
.page-nav__list {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 100%;
}
.page-nav__list::-webkit-scrollbar { display: none; }
.page-nav__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: stretch;
}
.page-nav__group + .page-nav__group {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--uob-grey-20);
}
.page-nav__group-label {
  height: 18px;
  line-height: 18px;
  padding: 4px 10px 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--uob-grey-40);
  white-space: nowrap;
}
.page-nav__group--bare .page-nav__group-label {
  visibility: hidden;
}
.page-nav__group-items {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 34px;
}
.page-nav__item {
  flex-shrink: 0;
  list-style: none;
}
.page-nav__item a,
.page-nav__item span {
  display: block;
  padding: 0 10px;
  height: 34px;
  line-height: 34px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  color: var(--uob-grey-40);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.page-nav__item a:hover { color: var(--uob-black); }
.page-nav__item--active span {
  color: var(--uob-black);
  border-bottom-color: var(--uob-black);
  font-weight: 700;
}
body { padding-top: 56px; }

/* ── RESPONSIVE ── */
@media (max-width: 700px) {
  :root {
    --uob-font-doc: 24px;
    --state-col-width: 100%;
  }
  .state-row         { grid-template-columns: 1fr; gap: 12px; }
  .sizes-grid        { grid-template-columns: 1fr; }
  .specs-layout      { grid-template-columns: 1fr; }
  .dd-grid           { grid-template-columns: 1fr; }
}