/* Promise Ledger 政見對帳 — Design Tokens */
:root {
  /* Brand */
  --pl-primary: #0F6C74;
  --pl-primary-dark: #0A4F55;
  --pl-primary-light: #DDF3F1;
  --pl-primary-soft: #E8F4F3;

  /* Surfaces */
  --pl-bg: #F7F6F2;
  --pl-surface: #FCFBF8;
  --pl-surface-2: #F2F1ED;
  --pl-surface-elev: #FFFFFF;

  /* Text */
  --pl-text: #232628;
  --pl-text-muted: #6B7280;
  --pl-text-subtle: #9AA0A6;

  /* Borders */
  --pl-border: #D8DDE3;
  --pl-border-strong: #B7BFC9;
  --pl-border-soft: #E6E9ED;

  /* Status */
  --pl-completed: #2F855A;
  --pl-completed-bg: #E6F4EC;
  --pl-progress: #2B6CB0;
  --pl-progress-bg: #E2ECF7;
  --pl-partial: #D69E2E;
  --pl-partial-bg: #FAF1DD;
  --pl-delayed: #DD6B20;
  --pl-delayed-bg: #FCE8D8;
  --pl-pending: #718096;
  --pl-pending-bg: #ECEEF2;
  --pl-disputed: #805AD5;
  --pl-disputed-bg: #EFE7FA;
  --pl-risk: #C53030;
  --pl-risk-bg: #FBE5E5;

  /* Type */
  --pl-font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Inter, ui-sans-serif, system-ui, sans-serif;
  --pl-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radius */
  --pl-r-sm: 4px;
  --pl-r-md: 8px;
  --pl-r-lg: 12px;
  --pl-r-pill: 999px;

  /* Shadow */
  --pl-shadow-sm: 0 1px 2px rgba(15, 22, 30, 0.04), 0 1px 3px rgba(15, 22, 30, 0.04);
  --pl-shadow-md: 0 2px 4px rgba(15, 22, 30, 0.05), 0 4px 16px rgba(15, 22, 30, 0.06);

  /* Spacing reference (4/8/12/16/24/32/48/64) handled inline */
}

/* Page wrapper inside an artboard. Each artboard scopes to .pl. */
.pl {
  font-family: var(--pl-font-sans);
  color: var(--pl-text);
  background: var(--pl-bg);
  width: 100%;
  height: 100%;
  overflow: auto;
  font-feature-settings: "tnum" 0, "kern" 1;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.005em;
}
.pl * { box-sizing: border-box; }
.pl .tnum { font-variant-numeric: tabular-nums; }
.pl a { color: var(--pl-primary); text-decoration: none; }
.pl a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Buttons */
.pl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--pl-r-md);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
  letter-spacing: 0.01em;
}
.pl-btn-primary { background: var(--pl-primary); color: #fff; }
.pl-btn-primary:hover { background: var(--pl-primary-dark); }
.pl-btn-secondary {
  background: var(--pl-surface-elev);
  color: var(--pl-text);
  border-color: var(--pl-border);
}
.pl-btn-secondary:hover { border-color: var(--pl-border-strong); background: var(--pl-surface); }
.pl-btn-ghost {
  background: transparent;
  color: var(--pl-text-muted);
}
.pl-btn-ghost:hover { background: rgba(0,0,0,.04); color: var(--pl-text); }
.pl-btn-sm { height: 30px; padding: 0 10px; font-size: 13px; }
.pl-btn-lg { height: 46px; padding: 0 22px; font-size: 15px; }

/* Inputs */
.pl-input, .pl-select, .pl-textarea {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--pl-border);
  background: var(--pl-surface-elev);
  border-radius: var(--pl-r-md);
  font-family: inherit;
  font-size: 14px;
  color: var(--pl-text);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.pl-textarea { height: auto; padding: 10px 12px; resize: vertical; min-height: 88px; line-height: 1.5; }
.pl-input:focus, .pl-select:focus, .pl-textarea:focus {
  border-color: var(--pl-primary);
  box-shadow: 0 0 0 3px rgba(15, 108, 116, 0.14);
}
.pl-input::placeholder { color: var(--pl-text-subtle); }

/* Cards */
.pl-card {
  background: var(--pl-surface);
  border: 1px solid var(--pl-border-soft);
  border-radius: var(--pl-r-lg);
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.pl-card-elev { background: var(--pl-surface-elev); box-shadow: var(--pl-shadow-sm); }
.pl-card-hover:hover {
  border-color: var(--pl-border-strong);
  box-shadow: var(--pl-shadow-md);
}

/* Pill/Tag */
.pl-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--pl-r-pill);
  font-size: 12px;
  font-weight: 500;
  background: var(--pl-surface-2);
  color: var(--pl-text-muted);
  border: 1px solid transparent;
  letter-spacing: 0.02em;
}
.pl-tag-outline { background: transparent; border-color: var(--pl-border); }

/* Section headings */
.pl-section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--pl-text);
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.pl-section-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--pl-primary);
  text-transform: uppercase;
}

/* Dividers */
.pl-hr { height: 1px; background: var(--pl-border-soft); border: 0; margin: 0; }

/* Scrollbars inside artboards: hidden (canvas hides them globally too) */
.pl::-webkit-scrollbar { width: 0; height: 0; }

/* KPI */
.pl-kpi-num { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pl-kpi-lbl { font-size: 12px; color: var(--pl-text-muted); letter-spacing: 0.02em; }

/* Trust label */
.pl-trust {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: var(--pl-r-sm);
  background: var(--pl-primary-light);
  color: var(--pl-primary-dark);
  letter-spacing: 0.02em;
}
.pl-trust-ai { background: #F1ECF8; color: #5B3FA0; }
.pl-trust-citizen { background: #FAF1DD; color: #8A6A1F; }

/* Mobile artboard adjusts */
.pl-mobile { font-size: 14px; }
.pl-mobile .pl-section-title { font-size: 16px; }
.pl-mobile .pl-kpi-num { font-size: 26px; }

/* Headline scale */
.pl h1, .pl-h1 { font-size: 40px; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.pl h2, .pl-h2 { font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.pl h3, .pl-h3 { font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.pl h4, .pl-h4 { font-size: 16px; line-height: 1.35; font-weight: 600; margin: 0; }
.pl-micro { font-size: 12px; color: var(--pl-text-muted); }

.pl-mobile h1, .pl-mobile .pl-h1 { font-size: 30px; }
.pl-mobile h2, .pl-mobile .pl-h2 { font-size: 22px; }
.pl-mobile h3, .pl-mobile .pl-h3 { font-size: 18px; }

/* Mock map */
.pl-map-region {
  fill: var(--pl-surface-elev);
  stroke: var(--pl-border);
  stroke-width: 0.8;
  transition: fill .15s, stroke .15s;
  cursor: pointer;
}
.pl-map-region:hover { fill: var(--pl-primary-light); stroke: var(--pl-primary); }
.pl-map-region.active { fill: var(--pl-primary-light); stroke: var(--pl-primary); }

/* Subtle hairline */
.pl-hairline { border-bottom: 1px solid var(--pl-border-soft); }