/* Panache Projects app. Look and feel taken from the v1 app (PG Project Execution).
   Layout rules: 8 px grid, cards in a row share one height, one field height per form,
   labels above fields, numbers right-aligned, one primary button per screen section. */
:root {
  --pg-primary: #14AEA1;
  --pg-dark: #2A5365;
  --pg-mid: #158489;
  --pg-accent: #A2BD38;
  --pg-cyan: #59C7D6;
  --pg-pale: #E8F8F7;
  --pg-text: #1A2E35;
  --pg-muted: #5F7A86;
  --pg-warning: #C67015;
  --pg-danger: #C0392B;
  --pg-line: #E4EDF0;
  --pg-bg: #F0F4F5;
  --primary-ink: #0B2A2A;
  --primary-hover: #136F73;
  --sidebar-w: 250px;
  --field-h: 44px;
  --radius: 14px;
  --font: 'Montserrat', 'Noto Sans Devanagari', 'Noto Sans Gujarati', 'Noto Sans Tamil', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--pg-bg); color: var(--pg-text); font: 400 14px/1.5 var(--font); -webkit-text-size-adjust: 100%; }
h1, h2, h3 { font-family: var(--font); line-height: 1.2; margin: 0; }
p { margin: 0; }
a { color: var(--pg-mid); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--pg-primary); outline-offset: 2px; }

/* ── Desk sidebar ─────────────────────────────────────────────── */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
  background: var(--pg-dark); color: #fff; display: flex; flex-direction: column; overflow-y: auto; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 16px 14px; color: #fff; text-decoration: none;
         border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.brand-logo { width: 38px; height: 38px; background: var(--pg-primary); border-radius: 10px; display: flex;
              align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.brand-name { display: block; font-size: 13px; font-weight: 700; line-height: 1.2; }
.brand-tag { display: block; font-size: 9px; opacity: 0.6; margin-top: 2px; }
.nav { padding: 8px 0; flex-grow: 1; }
.nav-link { display: flex; align-items: center; gap: 10px; padding: 10px 18px; min-height: 44px; color: rgba(255,255,255,0.8);
            text-decoration: none; font-size: 13px; font-weight: 500; }
.nav-link i { width: 18px; text-align: center; font-size: 15px; }
.nav-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav-link.active { background: var(--pg-primary); color: #fff; font-weight: 600; }
.nav-section { padding: 16px 18px 4px; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
               color: rgba(255,255,255,0.35); }
.sidebar-foot { padding: 12px 18px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 12px; color: rgba(255,255,255,0.75); }
.sidebar-foot button { margin-top: 8px; background: none; border: 1px solid rgba(255,255,255,0.4); color: #fff;
                       border-radius: 8px; padding: 6px 10px; font: 600 12px var(--font); cursor: pointer; }

.app-main { margin-left: var(--sidebar-w); min-height: 100vh; }
.banner { background: #DDE7EA; color: var(--pg-muted); font-size: 12px; font-style: italic; padding: 6px 16px; text-align: center; }
.page { max-width: 1280px; margin: 0 auto; padding: 20px 24px 48px; }

@media (max-width: 899px) {
  .sidebar { position: sticky; flex-direction: row; overflow-x: auto; overflow-y: hidden; width: auto; height: auto; }
  .brand { border-bottom: 0; border-right: 1px solid rgba(255,255,255,0.12); flex-shrink: 0; }
  .nav { display: flex; padding: 0; flex-shrink: 0; }
  .nav-link { white-space: nowrap; padding: 12px 14px; }
  .nav-section, .sidebar-foot { display: none; }
  .app-main { margin-left: 0; }
  .page { padding: 16px; }
}

/* ── Headings ─────────────────────────────────────────────────── */
.page-title { font-size: 24px; font-weight: 800; color: var(--pg-dark); margin-bottom: 4px; }
.lead { color: var(--pg-muted); margin-bottom: 20px; }
.eyebrow { font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--pg-muted); font-weight: 700; }
.meta, .row-meta { color: var(--pg-muted); font-size: 13px; }
.caption { color: var(--pg-muted); font-size: 12px; font-style: italic; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 16px; }

/* ── Cards ────────────────────────────────────────────────────── */
.card { background: #fff; border: 1px solid var(--pg-line); border-radius: var(--radius);
        box-shadow: 0 1px 6px rgba(0,0,0,0.05); padding: 16px 18px; min-width: 0; }
.card-title { font-size: 14px; font-weight: 700; color: var(--pg-dark); display: flex; align-items: center; gap: 8px;
              padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid #EAF2F4; }
.card-title i { color: var(--pg-primary); font-size: 16px; }
.card-title .spacer { margin-left: auto; }
.card h3 { font-size: 13px; font-weight: 700; color: var(--pg-dark); margin-bottom: 6px; }

.grid { display: grid; gap: 16px; align-items: stretch; grid-template-columns: minmax(0, 1fr); }
.grid-2 { display: grid; gap: 16px; align-items: stretch; grid-template-columns: minmax(0, 1fr); }
.grid-3 { display: grid; gap: 16px; align-items: stretch; grid-template-columns: minmax(0, 1fr); }
.grid-4 { display: grid; gap: 16px; align-items: stretch; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* KPI tiles: coloured icon box, big figure, small label */
.kpi { display: flex; align-items: center; gap: 14px; min-height: 84px; }
.kpi > div { min-width: 0; }
.kpi-value { overflow-wrap: anywhere; }
/* Phone: icon above the figure, so large rupee amounts never push past the card */
@media (max-width: 899px) {
  .kpi { flex-direction: column; align-items: flex-start; gap: 8px; }
  .kpi-value { font-size: 17px; }
}
.stat-icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
             font-size: 20px; flex-shrink: 0; }
.stat-icon.primary { background: var(--pg-pale); color: var(--pg-primary); }
.stat-icon.accent { background: #F4F9E3; color: #7A9A1E; }
.stat-icon.warning { background: #FFF8EC; color: var(--pg-warning); }
.stat-icon.danger { background: #FFF1F1; color: var(--pg-danger); }
.stat-icon.cyan { background: #EBFAFC; color: #1E8FA0; }
.kpi-value { font-size: 19px; font-weight: 800; color: var(--pg-dark); line-height: 1.2; }
.kpi-label { font-size: 11px; color: #7A9AB0; margin-top: 2px; }

/* ── Chips and health colours ─────────────────────────────────── */
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 24px; padding: 2px 8px;
        border-radius: 8px; font-size: 12px; font-weight: 700; background: #EEF3F5; color: var(--pg-text);
        white-space: nowrap; text-decoration: none; }
.chip-fixed { width: 104px; }
.health-green { background: var(--pg-primary); color: var(--primary-ink); }
.health-amber { background: var(--pg-warning); color: #fff; }
.health-red { background: var(--pg-danger); color: #fff; }
.health-none { background: #EEF3F5; color: var(--pg-muted); }
.chip.tag { background: var(--pg-pale); color: var(--pg-dark); }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--field-h);
       padding: 8px 16px; border-radius: 10px; font: 600 13px/1.2 var(--font); border: 1.5px solid var(--pg-dark);
       background: #fff; color: var(--pg-dark); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn.primary { background: var(--pg-primary); border-color: var(--pg-primary); color: var(--primary-ink); }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.btn.secondary:hover { background: var(--pg-pale); }
.btn.danger { border-color: var(--pg-danger); color: var(--pg-danger); }
.btn.small { min-height: 34px; padding: 6px 12px; font-size: 12px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ── Forms: labels above, one field height, one primary button ─ */
.form-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 13px; font-weight: 600; color: var(--pg-dark); }
.field label .req { color: var(--pg-danger); }
.field input, .field select, .field textarea {
  width: 100%; min-height: var(--field-h); padding: 8px 12px; border: 1px solid #C9D7DC; border-radius: 8px;
  background: #fff; color: var(--pg-text); font: 500 14px/1.3 var(--font);
}
.field textarea { min-height: 88px; resize: vertical; }
.field .hint { font-size: 12px; color: var(--pg-muted); font-style: italic; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 52px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 40px; border: 0; border-radius: 8px;
             background: transparent; color: var(--pg-primary); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pw-toggle:focus-visible { outline: 2px solid var(--pg-primary); outline-offset: 2px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; grid-column: 1 / -1; flex-wrap: wrap; }

/* ── Lists and tables ─────────────────────────────────────────── */
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 8px 0; border-top: 1px solid #EAF2F4; }
.list li:first-child { border-top: 0; padding-top: 0; }
.row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #EAF2F4; }
.row:first-child { border-top: 0; padding-top: 0; }
.row > div { min-width: 0; }
.row-title { font-weight: 700; }
.empty { color: var(--pg-muted); padding: 8px 0; }

.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid #EAF2F4; text-align: left; vertical-align: top; }
.table thead th { background: #F4F8F9; color: var(--pg-dark); font-weight: 700; white-space: nowrap; }
.table .num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.table .center { text-align: center; }
.table tfoot td { font-weight: 700; background: #F7FAFB; }

/* ── Project header, switcher, stage rail ─────────────────────── */
.project-switch { display: flex; flex-direction: column; gap: 4px; min-width: 260px; }
.project-switch select { min-height: var(--field-h); padding: 8px 12px; border: 1px solid #C9D7DC; border-radius: 10px;
                         background: #fff; font: 500 14px var(--font); }
.next-action { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.next-action p { font-weight: 700; }
.stage-rail { display: flex; gap: 6px; overflow-x: auto; padding: 6px; margin: 16px 0; border-radius: var(--radius);
              background: linear-gradient(135deg, #F0F7FA, #E8F4F8); }
.stage { flex: 0 0 128px; min-height: 92px; padding: 10px; border-radius: 10px; background: #fff; border: 1px solid var(--pg-line);
         color: var(--pg-text); text-decoration: none; display: flex; flex-direction: column; gap: 4px; }
.stage:hover { box-shadow: 0 1px 5px rgba(20, 174, 161, 0.18); }
.stage-icon { font-size: 18px; color: var(--pg-muted); }
.stage-num { font-size: 10px; font-weight: 800; color: var(--pg-muted); letter-spacing: 0.4px; }
.stage-name { font-size: 12px; font-weight: 700; line-height: 1.25; }
.stage-state { font-size: 11px; color: var(--pg-muted); }
.stage.done .stage-icon { color: var(--pg-accent); }
.stage.done .stage-state { color: #5C7A1A; font-weight: 600; }
.stage.current { background: var(--pg-primary); border-color: var(--pg-primary); color: var(--primary-ink); }
.stage.current .stage-icon, .stage.current .stage-num, .stage.current .stage-state { color: var(--primary-ink); }
.stage.selected { box-shadow: 0 0 0 2px var(--pg-dark); }
@media (min-width: 900px) {
  .stage-rail { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); overflow: visible; }
  .stage { flex: none; width: auto; min-width: 0; }
}

/* Health strip: small clickable tiles */
.health-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0 0 16px; padding: 0; }
@media (min-width: 640px) { .health-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px) { .health-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 6px 10px; background: #fff; border: 1px solid var(--pg-line);
        border-radius: 10px; color: var(--pg-text); text-decoration: none; }
.tile:hover { background: var(--pg-pale); }
.tile-name { font-size: 12px; font-weight: 700; color: var(--pg-dark); }
.tile i { color: var(--pg-primary); margin-right: 4px; }
.tile .chip { width: 100%; min-height: 22px; font-size: 11px; padding: 0 6px; }

/* Checklist */
.check { list-style: none; margin: 0; padding: 0; }
.check li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center;
            min-height: 44px; padding: 8px 0; border-top: 1px solid #EAF2F4; }
.check li:first-child { border-top: 0; }
.tick { text-align: center; font-weight: 800; }
.tick.on { color: var(--pg-mid); }
.tick.off { color: var(--pg-muted); }
.check .owner { color: var(--pg-muted); font-size: 12px; }
.check button { min-height: 34px; min-width: 84px; }

/* Health list in the side column */
.health-list { list-style: none; margin: 0; padding: 0; }
.health-list a { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 8px; align-items: center; min-height: 44px;
                 padding: 8px; margin: 0 -8px; border-top: 1px solid #EAF2F4; color: var(--pg-text); text-decoration: none;
                 border-radius: 8px; font-weight: 600; }
.health-list li:first-child a { border-top: 0; }
.health-list a:hover { background: var(--pg-pale); }
.health-list i { color: var(--pg-primary); margin-right: 6px; }

[id] { scroll-margin-top: 24px; }
.card:target { outline: 3px solid var(--pg-primary); outline-offset: 4px; }

/* Flash messages */
.flash { padding: 10px 14px; border-radius: 10px; margin-bottom: 16px; font-weight: 600; border: 1px solid; }
.flash.ok { background: #EEF9F2; border-color: #B9E3C8; color: #1F5E33; }
.flash.error { background: #FFF1F1; border-color: #F2B8B5; color: #8A241C; }

/* ── Phone (Site surface) ─────────────────────────────────────── */
.phone-top { background: var(--pg-dark); color: #fff; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.phone-top a { color: #fff; text-decoration: none; font-weight: 700; }
.phone-top .who { font-size: 12px; opacity: 0.8; }
.phone-wrap { max-width: 480px; margin: 0 auto; padding: 16px; }
.phone-title { font-size: 22px; font-weight: 800; color: var(--pg-dark); }
.site-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.site-btn { min-height: 96px; padding: 14px; border-radius: 14px; border: 1px solid var(--pg-line); background: #fff; color: var(--pg-dark);
            font: 700 14px/1.2 var(--font); text-decoration: none; display: flex; flex-direction: column; justify-content: space-between;
            gap: 8px; box-shadow: 0 1px 6px rgba(0,0,0,0.05); }
.site-btn i { font-size: 24px; color: var(--pg-primary); }
.site-btn.primary i { color: var(--primary-ink); }
.sync-note { margin-top: 16px; font-size: 13px; color: var(--pg-muted); text-align: center; }
.sync-note.offline { color: var(--pg-warning); font-weight: 700; }
.phone .field input, .phone .field select, .phone .field textarea { min-height: 48px; font-size: 16px; }
.phone .btn { min-height: 48px; width: 100%; }
.phone .form-grid { grid-template-columns: minmax(0, 1fr); }
.recent li { display: flex; justify-content: space-between; gap: 8px; }

/* ── Login and errors ─────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { width: 100%; max-width: 400px; }
.login-card .brand-logo { width: 56px; height: 56px; font-size: 18px; }

/* ── Site surface, after the Panache Site Desk ────────────────── */
.phone-top { background: var(--pg-dark); color: #fff; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: 0; z-index: 5; }
.phone-brand { color: #fff; text-decoration: none; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.phone-brand .brand-logo { width: 30px; height: 30px; font-size: 11px; }
.phone-tools { display: flex; align-items: center; gap: 8px; }
.lang-switch { display: flex; gap: 4px; margin: 0; }
.lang-switch button { min-height: 32px; min-width: 44px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.5); background: none; color: #fff; font: 600 12px var(--font); cursor: pointer; }
.lang-switch button.on { background: #fff; color: var(--pg-dark); }
.signout { min-width: 44px; min-height: 44px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.5); background: none; color: #fff; cursor: pointer; font-size: 16px; }
.phone-wrap .phone-title { font-size: 22px; font-weight: 800; color: var(--pg-dark); margin: 0 0 4px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--pg-mid); font-weight: 700; text-decoration: none; min-height: 44px; }
.back-link svg { width: 18px; height: 18px; }
.title-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--pg-pale); color: var(--pg-primary); display: inline-flex; align-items: center; justify-content: center; }
.title-icon svg { width: 22px; height: 22px; }
.section-label { font-size: 13px; font-weight: 800; color: var(--pg-dark); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 4px; }
.check-line { display: flex; align-items: center; gap: 10px; min-height: 48px; font-weight: 600; }
.check-line input { width: 22px; height: 22px; }
.field-legend { font-size: 13px; font-weight: 600; color: var(--pg-dark); margin-bottom: 6px; }
.btn.pick { flex: 1; justify-content: center; min-height: 48px; }
.btn.pick input { margin-right: 6px; width: 18px; height: 18px; }

/* Site cards: one card per project, four big buttons */
.site-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.site-card { background: #fff; border: 1px solid var(--pg-line); border-radius: var(--radius); box-shadow: 0 1px 6px rgba(0,0,0,0.05); padding: 14px; display: grid; gap: 10px; }
.site-card-static { padding: 14px; }
.site-card-head { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--pg-text); position: relative; padding-right: 18px; }
.site-card-name { font-size: 17px; font-weight: 800; color: var(--pg-dark); }
.dot { position: absolute; right: 0; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--pg-danger); }
.progress { height: 8px; border-radius: 6px; background: #E4EDF0; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--pg-primary); border-radius: 6px; }
/* Site cards: one row of four actions (CLAUDE.md, Site link rules). */
.site-actions.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.site-actions.four .site-btn { min-height: 84px; padding: 10px 6px; font-size: 13px; align-items: center; text-align: center; }
.site-actions.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-btn { min-height: 92px; padding: 12px; border-radius: 14px; border: 1px solid var(--pg-line); background: #fff; color: var(--pg-dark);
            font: 700 15px/1.2 var(--font); text-decoration: none; display: flex; flex-direction: column; align-items: flex-start;
            justify-content: space-between; gap: 8px; box-shadow: 0 1px 6px rgba(0,0,0,0.05); }
.site-btn svg { color: var(--pg-primary); }
.site-btn:hover { background: var(--pg-pale); }
.site-btn.primary { background: var(--pg-primary); border-color: var(--pg-primary); color: var(--primary-ink); }
.site-btn.primary svg { color: var(--primary-ink); }
.site-btn.small { min-height: 64px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; font-size: 14px; }
.site-btn.small svg { width: 22px; height: 22px; }
.recent li { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; }
.sync-note.offline { color: var(--pg-warning); font-weight: 700; }
.phone-wrap .field input, .phone-wrap .field select, .phone-wrap .field textarea { min-height: 48px; font-size: 16px; }
.phone-wrap .btn { min-height: 48px; }
.phone-wrap .form-grid { grid-template-columns: minmax(0, 1fr); }

/* Gujarati and Tamil: the Noto fonts (loaded in base_site.html) carry these scripts; Montserrat does not. */
:lang(gu), :lang(ta) { font-family: "Noto Sans Gujarati", "Noto Sans Tamil", var(--font), sans-serif; }
button.site-btn { font-family: inherit; width: 100%; cursor: pointer; text-align: left; }
/* Four languages plus sign out must fit a 360 px phone: the brand text gives way to the logo. */
@media (max-width: 480px) {
  .phone-brand .brand-name { display: none; }
  .lang-switch button { min-width: 0; padding: 0 7px; font-size: 11px; }
  .phone-tools { gap: 6px; }
}
.table .nowrap { white-space: nowrap; }
/* Site: the one check-in button, full width, and the More section. */
.site-btn.wide { width: 100%; min-height: 72px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; font-size: 18px; }
.site-btn.wide svg { width: 28px; height: 28px; }
.more summary { min-height: 48px; display: flex; align-items: center; font-weight: 700; cursor: pointer; list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: "+"; margin-left: auto; font-size: 22px; color: var(--pg-primary); }
.more[open] summary::after { content: "–"; }
/* Site: labour with large − and + buttons. */
.stepper { display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; gap: 8px; align-items: stretch; }
.stepper input { text-align: center; font-size: 20px; font-weight: 700; }
.step-btn { min-height: 56px; border-radius: 12px; border: 1px solid var(--pg-line); background: #fff; color: var(--pg-dark); font: 700 26px/1 var(--font); cursor: pointer; }
.step-btn:hover { background: var(--pg-pale); }
/* Language picker (sign-in page and Site header). */
.lang-select { min-height: 36px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.5); background: #fff; color: var(--pg-dark); font: 600 13px var(--font); padding: 0 8px; max-width: 150px; }
.login-card .lang-select { border-color: var(--pg-line); }
.lang-switch { margin: 0 0 12px; }
.lang-go { min-height: 36px; margin-left: 6px; }