/* styles/pg.css — copied from design/final/pg.css by tools/sync-pg.cjs (repo root) with these local
   patches; re-run the script when the final file changes, and fold the patches upstream:
   skip   drop prototype @font-face rules
   skip   drop stray @font-face rules
   skip   fix @keyframes shimmer
   skip   restore the 1100px query
   apply  resets: headings and lists
   apply  resets: list style
   apply  resets: form controls
   apply  resets: button cursor
   apply  resets: links
   apply  resets: link hover
   App-specific glue, extras and old-CSS neutralisation live in styles/pg-app.css (not replaced by this file). */
/* Lacak — Pengaturan: the settings kit (pg.css). The build target the app ports.
   Rules: every class is pg-*, every custom property --pg-*, page resets live under .pg-root (the settings container;
   the prototype puts it on <body>). No bare element selectors at top level. Fonts use the app's own family names
   ("Lite Inter", "Google Sans"), which the app declares (onboarding.css); the prototype loads proto-fonts.css for them.
   Renamed from the proposal's proto.css before prefixing: .pg -> .pg-page, .pg-head -> .pg-page-head,
   .pg-title -> .pg-page-title, .pg-title-row -> .pg-page-title-row, .pg-lead -> .pg-page-lead, .pg-actions -> .pg-page-actions.
   One breakpoint: 720px. */
.pg-root {
  
  --pg-navy: #172944; --pg-navy-2: #2c3e62; --pg-navy-3: #4a5d84; --pg-navy-hover: #263c5b;
  --pg-ink: #172033; --pg-muted: #5c6a86; --pg-faint: #7d889e;
  --pg-line: #e4e8ef; --pg-rule: #eef1f5; --pg-soft: #f5f7fa; --pg-ground: #f8f8f7;
  --pg-cream: #fffefa; --pg-cream-line: #e9e7e1; --pg-cream-hover: #f1f1ec; --pg-cream-open: #eeeee8;
  --pg-gold: #c69749; --pg-gold-bar: #bf8118; --pg-gold-deep: #86662a; --pg-gold-wash: #f6ecd6;
  --pg-good: #1f7a55; --pg-good-bg: #e3f3ea; --pg-warn: #8f5410; --pg-warn-bg: #fbeedb; --pg-bad: #b4372f; --pg-bad-bg: #fbe8e5;
  --pg-blue: #2f62a4; --pg-blue-soft: #edf3fb;
  --pg-radius-card: 12px; --pg-radius-ctl: 9px; --pg-radius-dlg: 14px;
  --pg-shadow-menu: 0 14px 36px rgba(23, 32, 51, .14), 0 2px 8px rgba(23, 32, 51, .06);
  --pg-shadow-dlg: 0 24px 60px rgba(23, 32, 51, .22);
  --pg-sb: 252px;
  --pg-m: 120ms;
}
.pg-root *, .pg-root *::before, .pg-root *::after { box-sizing: border-box; }
.pg-root { margin: 0; min-height: 100dvh; background: var(--pg-ground); color: var(--pg-ink); font: 400 13.5px/1.5 "Lite Inter", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
:where(.pg-root) :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; }
:where(.pg-root) :where(ul, ol) { padding: 0; list-style: none; }
:where(.pg-root) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.pg-root) :where(button) { cursor: pointer; }
:where(.pg-root) a { color: var(--pg-blue); text-decoration: none; font-weight: 600; }
:where(.pg-root) a:hover { text-decoration: underline; }
.pg-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pg-root [hidden] { display: none !important; }
.pg-root :focus-visible { outline: 2px solid var(--pg-blue); outline-offset: 2px; }

.pg-sb { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--pg-sb); display: flex; flex-direction: column; padding: 14px 12px 12px; background: var(--pg-cream) radial-gradient(circle at 24px 14px, rgba(191, 129, 24, .04), transparent 72px); border-right: 1px solid var(--pg-cream-line); overflow: hidden; }
.pg-sb-back { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 9px; border: 0; border-radius: 9px; background: transparent; color: var(--pg-muted); font-size: 12.5px; font-weight: 600; text-align: left; transition: background-color var(--pg-m) ease, color var(--pg-m) ease; }
.pg-sb-back:hover { background: var(--pg-cream-hover); color: var(--pg-navy); }
.pg-sb-back .pg-icon { width: 17px; height: 17px; }
.pg-sb-mark { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 9px; margin-bottom: 4px; color: var(--pg-navy); font-family: "Google Sans", "Lite Inter", sans-serif; font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.pg-sb-mark img { width: 22px; height: 22px; }
.pg-sb-mark small { color: var(--pg-faint); font-family: "Lite Inter", sans-serif; font-size: 11.5px; font-weight: 600; margin-top: 2px; }
.pg-sb-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin: 4px -4px 0; padding: 0 4px; }
.pg-sb-group { margin-top: 18px; }
.pg-sb-group:first-child { margin-top: 8px; }
.pg-sb-group-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 22px; padding: 0 9px; margin-bottom: 4px; color: var(--pg-faint); font-size: 10.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.pg-sb-context { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px; margin: 2px 0 6px; padding: 5px 7px; border: 1px solid transparent; border-radius: 10px; background: transparent; text-align: left; transition: background-color var(--pg-m) ease, border-color var(--pg-m) ease; }
.pg-sb-context.pg-is-picker { cursor: pointer; }
.pg-sb-context.pg-is-picker:hover { background: var(--pg-cream-hover); border-color: var(--pg-cream-line); }
.pg-sb-context .pg-tile { width: 26px; height: 26px; border-radius: 8px; font-size: 9.5px; }
.pg-sb-context-copy { min-width: 0; flex: 1 1 auto; display: grid; gap: 1px; }
.pg-sb-context-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pg-ink); font-size: 12.5px; font-weight: 650; }
.pg-sb-context-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pg-faint); font-size: 11px; font-weight: 500; }
.pg-sb-context .pg-icon { width: 14px; height: 14px; color: var(--pg-faint); }
.pg-sb-link { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 9px 0 11px; border: 0; border-radius: 9px; background: transparent; color: var(--pg-muted); font-size: 12.5px; font-weight: 550; text-align: left; text-decoration: none; transition: background-color var(--pg-m) ease, color var(--pg-m) ease; }
.pg-sb-link:hover { background: var(--pg-cream-hover); color: var(--pg-navy); text-decoration: none; }
.pg-sb-link .pg-icon { width: 16px; height: 16px; opacity: .85; }
.pg-sb-link.pg-active { color: #fff; background: linear-gradient(135deg, #172944, #213858); box-shadow: 0 5px 14px #17294414; font-weight: 650; }
.pg-sb-link.pg-active::before { content: ""; position: absolute; top: 9px; bottom: 9px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--pg-gold-bar); }
.pg-sb-link .pg-dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--pg-bad); box-shadow: 0 0 0 2px var(--pg-cream); }
.pg-sb-link.pg-active .pg-dot { box-shadow: 0 0 0 2px #1d3150; }
.pg-sb-link .pg-count { margin-left: auto; color: var(--pg-faint); font-size: 11px; font-weight: 600; }
.pg-sb-foot { margin-top: 10px; }
.pg-sb-person { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 1px solid var(--pg-cream-line); border-radius: 12px; background: #fff; text-align: left; transition: background-color var(--pg-m) ease; }
.pg-sb-person:hover { background: #fbfbf8; }
.pg-sb-person .pg-avatar { width: 32px; height: 32px; }
.pg-sb-person-copy { min-width: 0; flex: 1 1 auto; display: grid; }
.pg-sb-person-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 650; }
.pg-sb-person-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pg-faint); font-size: 10.5px; }
.pg-sb-person .pg-icon { color: var(--pg-faint); }

.pg-topbar { display: none; }

.pg-main { margin-left: var(--pg-sb); min-height: 100dvh; }
.pg-page { max-width: 920px; margin: 0 auto; padding: 36px 40px 96px; }
.pg-page-head { margin-bottom: 28px; }
.pg-eyebrow { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; color: var(--pg-muted); font-size: 12px; font-weight: 600; }
.pg-eyebrow .pg-tile { width: 18px; height: 18px; border-radius: 5px; font-size: 7.5px; }
.pg-eyebrow .pg-sep { color: var(--pg-line); }
.pg-page-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.pg-root h1.pg-page-title { color: var(--pg-navy); font-family: "Google Sans", "Lite Inter", sans-serif; font-size: 26px; font-weight: 500; line-height: 1.2; letter-spacing: -.015em; }
.pg-page-lead { max-width: 64ch; margin-top: 8px; color: var(--pg-muted); font-size: 13.5px; line-height: 1.6; }
.pg-page-lead b { color: var(--pg-ink); font-weight: 600; }
.pg-page-actions { display: flex; flex: none; gap: 8px; padding-top: 2px; }

.pg-sec + .pg-sec { margin-top: 36px; }
.pg-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.pg-sec-head h2 { color: var(--pg-ink); font-size: 15px; font-weight: 650; line-height: 1.4; letter-spacing: -.005em; }
.pg-sec-head p { max-width: 64ch; margin-top: 3px; color: var(--pg-muted); font-size: 12.5px; line-height: 1.55; }
.pg-sec-actions { display: flex; flex: none; gap: 8px; }
.pg-sec-note { margin-top: 10px; color: var(--pg-faint); font-size: 12px; line-height: 1.55; }
.pg-sec-note a { font-weight: 600; }

.pg-card { overflow: hidden; border: 1px solid var(--pg-line); border-radius: var(--pg-radius-card); background: #fff; }
.pg-card + .pg-card { margin-top: 12px; }
.pg-card-sub { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 8px 20px; background: var(--pg-soft); border-bottom: 1px solid var(--pg-rule); color: var(--pg-ink); font-size: 12.5px; font-weight: 650; }
.pg-card-sub .pg-brand { width: 20px; height: 20px; }
.pg-card-sub-copy { display: flex; align-items: center; gap: 9px; }
.pg-row { position: relative; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 13px 20px; }
.pg-row + .pg-row::before, .pg-row + .pg-card-sub::before, .pg-card-sub + .pg-row::before { content: ""; position: absolute; top: 0; right: 20px; left: 20px; height: 1px; background: var(--pg-rule); }
.pg-card-sub + .pg-row::before { display: none; }
.pg-row.pg-is-link { cursor: pointer; transition: background-color var(--pg-m) ease; }
.pg-row.pg-is-link:hover { background: #fbfcfd; }
.pg-row-mark { display: grid; flex: none; width: 36px; height: 36px; place-items: center; border-radius: 9px; background: var(--pg-soft); color: var(--pg-muted); }
.pg-row-mark .pg-icon { width: 18px; height: 18px; stroke-width: 1.6; }
.pg-row-mark .pg-brand { width: 22px; height: 22px; }
.pg-row-mark.pg-is-plain { background: transparent; }
.pg-row-copy { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.pg-row-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--pg-ink); font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.pg-row-text { color: var(--pg-muted); font-size: 12.5px; line-height: 1.5; }
.pg-row-text.pg-is-bad { color: var(--pg-bad); font-weight: 550; }
.pg-row-text.pg-is-warn { color: var(--pg-warn); font-weight: 550; }
.pg-row-side { flex: none; display: flex; align-items: center; gap: 8px; }
.pg-row-side .pg-ctl { min-width: 0; }
.pg-row-value { flex: none; display: grid; justify-items: end; gap: 1px; text-align: right; }
.pg-row-value b { color: var(--pg-ink); font-size: 13.5px; font-weight: 650; white-space: nowrap; }
.pg-row-value small { color: var(--pg-faint); font-size: 11.5px; white-space: nowrap; }
.pg-row-status { flex: 0 0 200px; min-width: 0; color: var(--pg-muted); font-size: 12.5px; line-height: 1.45; }
.pg-row-status.pg-is-bad { color: var(--pg-bad); font-weight: 550; }
.pg-row-status.pg-is-warn { color: var(--pg-warn); font-weight: 550; }

.pg-row .pg-edit-view, .pg-row.pg-is-editing .pg-read-view { display: none; }
.pg-row.pg-is-editing .pg-edit-view { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pg-row.pg-is-editing { background: #fbfcfd; }
.pg-row.pg-is-editing .pg-row-copy { align-self: flex-start; padding-top: 5px; }

.pg-facts { display: grid; }
.pg-fact { display: grid; grid-template-columns: 170px 1fr; gap: 6px 20px; align-items: start; padding: 13px 20px; }
.pg-fact + .pg-fact { border-top: 1px solid var(--pg-rule); }
.pg-fact dt { color: var(--pg-muted); font-size: 12.5px; font-weight: 550; padding-top: 1px; }
.pg-fact dd { color: var(--pg-ink); font-size: 13.5px; font-weight: 500; line-height: 1.5; }
.pg-fact dd.pg-is-empty { color: var(--pg-faint); font-weight: 400; }

.pg-table { width: 100%; border-collapse: collapse; }
.pg-table th { padding: 10px 10px; background: var(--pg-soft); color: var(--pg-muted); font-size: 11.5px; font-weight: 650; text-align: left; letter-spacing: .01em; white-space: nowrap; border-bottom: 1px solid var(--pg-rule); }
.pg-table th:first-child, .pg-table td:first-child { padding-left: 20px; }
.pg-table th:last-child, .pg-table td:last-child { padding-right: 16px; }
.pg-table td { padding: 12px 10px; border-top: 1px solid var(--pg-rule); color: var(--pg-ink); font-size: 13px; vertical-align: middle; }
.pg-table tr:first-child td { border-top: 0; }
.pg-table .pg-num { text-align: right; white-space: nowrap; font-weight: 600; }
.pg-table .pg-quiet { color: var(--pg-muted); font-size: 12.5px; }
.pg-table .pg-mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; }
.pg-table .pg-act { width: 1%; text-align: right; white-space: nowrap; }
.pg-table td:has(> .pg-chip), .pg-table td.pg-mono, .pg-table td.pg-fit { width: 1%; white-space: nowrap; }
.pg-table td.pg-biz { white-space: nowrap; }
.pg-table .pg-act .pg-btn { vertical-align: middle; }
.pg-table tr.pg-is-link { cursor: pointer; }
.pg-table tr.pg-is-link:hover td { background: #fbfcfd; }
.pg-table-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--pg-rule); background: #fff; color: var(--pg-faint); font-size: 12px; }
.pg-member { display: flex; align-items: center; gap: 11px; min-width: 0; }
.pg-member .pg-avatar { width: 32px; height: 32px; font-size: 11px; }
.pg-member-copy { min-width: 0; display: grid; gap: 1px; }
.pg-member-copy b { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.pg-member-copy small { color: var(--pg-muted); font-size: 12px; }

.pg-attn { display: grid; gap: 10px; }
.pg-attn-card { display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 16px; border: 1px solid #f0d9b0; border-left: 4px solid var(--pg-gold); border-radius: 12px; background: #fffaf0; }
.pg-attn-card.pg-is-bad { border-color: #f1cfcb; border-left-color: var(--pg-bad); background: #fff5f3; }
.pg-attn-icon { display: grid; flex: none; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: var(--pg-warn-bg); color: var(--pg-warn); }
.pg-attn-card.pg-is-bad .pg-attn-icon { background: var(--pg-bad-bg); color: var(--pg-bad); }
.pg-attn-copy { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.pg-attn-copy b { color: var(--pg-ink); font-size: 13.5px; font-weight: 650; }
.pg-attn-copy p { color: var(--pg-muted); font-size: 12.5px; line-height: 1.5; }
.pg-attn-copy p strong { color: var(--pg-ink); font-weight: 600; }
.pg-attn-actions { flex: none; display: flex; gap: 8px; }

.pg-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; padding: 13px 16px 13px 20px; border: 1px solid #efd5d5; border-left: 4px solid var(--pg-bad); border-radius: 12px; background: #fff1f1; color: #8f3131; }
.pg-banner b { display: block; font-size: 13.5px; font-weight: 650; }
.pg-banner span { display: block; margin-top: 2px; color: #a45353; font-size: 12.5px; }

.pg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 1px solid #d3d9e4; border-radius: var(--pg-radius-ctl); background: #fff; color: var(--pg-ink); font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background-color var(--pg-m) ease, border-color var(--pg-m) ease, color var(--pg-m) ease, box-shadow var(--pg-m) ease; }
.pg-btn:hover { background: #f8f9fb; border-color: #bfc8d6; text-decoration: none; }
.pg-btn .pg-icon { width: 15px; height: 15px; }
.pg-btn.pg-primary { border-color: var(--pg-navy); background: var(--pg-navy); color: #fff; box-shadow: 0 3px 8px rgba(23, 32, 51, .12); }
.pg-btn.pg-primary:hover { background: var(--pg-navy-hover); border-color: var(--pg-navy-hover); }
.pg-btn.pg-quiet { border-color: transparent; background: transparent; color: var(--pg-navy); }
.pg-btn.pg-quiet:hover { background: var(--pg-soft); border-color: transparent; }
.pg-btn.pg-danger { color: var(--pg-bad); }
.pg-btn.pg-danger:hover { background: #fff5f3; border-color: #e9c1bb; }
.pg-btn.pg-danger.pg-solid { background: var(--pg-bad); border-color: var(--pg-bad); color: #fff; }
.pg-btn.pg-danger.pg-solid:hover { background: #a02e27; border-color: #a02e27; }
.pg-btn.pg-sm { min-height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
.pg-btn.pg-link { min-height: 0; padding: 0; border: 0; background: transparent; color: var(--pg-blue); font-weight: 600; }
.pg-btn.pg-link:hover { text-decoration: underline; }
.pg-btn:disabled { opacity: .5; cursor: default; }
.pg-btn.pg-block { width: 100%; }
.pg-more { display: inline-grid; vertical-align: middle; width: 32px; height: 32px; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--pg-faint); transition: background-color var(--pg-m) ease, color var(--pg-m) ease; }
.pg-more:hover, .pg-more[aria-expanded="true"] { background: var(--pg-soft); color: var(--pg-ink); border-color: var(--pg-line); }
.pg-more .pg-icon { width: 17px; height: 17px; }
.pg-input, .pg-select, .pg-textarea { width: 100%; min-height: 38px; padding: 8px 12px; border: 1px solid #d3d9e4; border-radius: var(--pg-radius-ctl); background: #fff; color: var(--pg-ink); font-size: 13.5px; transition: border-color var(--pg-m) ease, box-shadow var(--pg-m) ease; }
.pg-input:focus, .pg-select:focus, .pg-textarea:focus { outline: none; border-color: var(--pg-blue); box-shadow: 0 0 0 3px rgba(47, 98, 164, .15); }
.pg-input::placeholder { color: var(--pg-faint); }
.pg-select { appearance: none; padding-right: 32px; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c6a86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 10px center; }
.pg-select.pg-sm { min-height: 32px; padding: 4px 28px 4px 10px; font-size: 12.5px; font-weight: 600; }
.pg-textarea { min-height: 72px; resize: vertical; }
.pg-field { display: grid; gap: 6px; }
.pg-field + .pg-field { margin-top: 16px; }
.pg-field label, .pg-field .pg-label { color: var(--pg-ink); font-size: 12.5px; font-weight: 600; }
.pg-field .pg-hint { color: var(--pg-faint); font-size: 12px; line-height: 1.5; }
.pg-field .pg-label small { color: var(--pg-faint); font-weight: 500; }
.pg-fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pg-fields-2 .pg-field + .pg-field { margin-top: 0; }
.pg-inline-input { width: 280px; max-width: 100%; }
.pg-toggle { position: relative; width: 38px; height: 22px; flex: none; border: 0; border-radius: 11px; background: #cfd6e2; transition: background-color var(--pg-m) ease; }
.pg-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform var(--pg-m) ease; }
.pg-toggle[aria-checked="true"] { background: var(--pg-good); }
.pg-toggle[aria-checked="true"]::after { transform: translateX(16px); }
.pg-stepper { display: inline-flex; align-items: center; border: 1px solid #d3d9e4; border-radius: var(--pg-radius-ctl); overflow: hidden; }
.pg-stepper button { width: 36px; height: 36px; border: 0; background: #fff; color: var(--pg-ink); font-size: 16px; }
.pg-stepper button:hover { background: var(--pg-soft); }
.pg-stepper button:disabled { color: #c4cad6; }
.pg-stepper output { display: grid; place-items: center; min-width: 44px; height: 36px; border-left: 1px solid var(--pg-line); border-right: 1px solid var(--pg-line); font-weight: 650; }
.pg-code { display: flex; gap: 8px; }
.pg-code input { width: 44px; height: 48px; text-align: center; font-size: 18px; font-weight: 600; border: 1px solid #d3d9e4; border-radius: 9px; }
.pg-code input:first-child { border-color: var(--pg-gold); box-shadow: 0 0 0 3px rgba(198, 151, 73, .2); }
.pg-seg { display: inline-flex; padding: 3px; border: 1px solid var(--pg-line); border-radius: 9px; background: var(--pg-soft); }
.pg-seg button { min-height: 28px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--pg-muted); font-size: 12.5px; font-weight: 600; }
.pg-seg button[aria-pressed="true"] { background: #fff; color: var(--pg-navy); box-shadow: 0 1px 2px rgba(23, 32, 51, .12); }

.pg-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 9px; border-radius: 999px; background: #f0f2f6; color: var(--pg-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.pg-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pg-chip.pg-good { background: var(--pg-good-bg); color: var(--pg-good); }
.pg-chip.pg-warn { background: var(--pg-warn-bg); color: var(--pg-warn); }
.pg-chip.pg-bad { background: var(--pg-bad-bg); color: var(--pg-bad); }
.pg-chip.pg-navy { background: #e9edf5; color: var(--pg-navy); }
.pg-chip.pg-nodot::before { display: none; }
.pg-pill { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border-radius: 6px; background: var(--pg-soft); color: var(--pg-muted); font-size: 11px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.pg-pill.pg-navy { background: var(--pg-navy); color: #fff; }
.pg-pill.pg-gold { background: var(--pg-gold-wash); color: var(--pg-gold-deep); }
.pg-pill.pg-blue { background: var(--pg-blue-soft); color: var(--pg-blue); }
.pg-pill.pg-good { background: var(--pg-good-bg); color: var(--pg-good); }

.pg-tile { display: grid; flex: none; width: 32px; height: 32px; place-items: center; border-radius: 9px; border: 1px solid rgba(23, 41, 68, .08); font-size: 10px; font-weight: 750; letter-spacing: 0; overflow: hidden; }
.pg-tile img { width: 100%; height: 100%; object-fit: cover; }
.pg-tile.pg-tint-blue { background: linear-gradient(145deg, #e8effa, #f6f9fd); color: #2a5896; }
.pg-tile.pg-tint-green { background: linear-gradient(145deg, #e4f4ec, #f5fbf8); color: #12704a; }
.pg-tile.pg-tint-purple { background: linear-gradient(145deg, #f0eafa, #faf7fe); color: #63428f; }
.pg-tile.pg-tint-amber { background: linear-gradient(145deg, #fcf1db, #fffaf0); color: #8a5709; }
.pg-tile.pg-tint-slate { background: linear-gradient(145deg, #eef1f5, #f8fafb); color: #5c6675; }
.pg-tile.pg-tint-logo { background: #7a2e4a; color: #fff; }
.pg-avatar { display: grid; flex: none; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: #efe3cf; color: #6e4e1f; font-size: 12px; font-weight: 750; }
.pg-avatar.pg-lg { width: 56px; height: 56px; font-size: 18px; }

.pg-meter { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; max-width: 100%; color: var(--pg-muted); font-size: 12.5px; }
/* Keep every slot square visible; additional slots grow down within the available width. */
.pg-meter i { display: inline-flex; flex-wrap: wrap; gap: 3px; min-width: 10px; max-width: 100%; }
.pg-meter i b { display: block; flex: 0 0 10px; width: 10px; height: 10px; border-radius: 2px; border: 1px solid var(--pg-navy); background: var(--pg-navy); }
.pg-meter > span { min-width: 0; }
.pg-meter i b.pg-free { background: transparent; border-color: #b9c2d2; }
.pg-meter i b.pg-new { background: var(--pg-good-bg); border-color: var(--pg-good); }

.pg-price { display: flex; align-items: baseline; gap: 8px; }
.pg-price b { color: var(--pg-navy); font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.pg-price span { color: var(--pg-muted); font-size: 13px; font-weight: 500; }
.pg-lines { display: grid; }
.pg-lines li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--pg-rule); font-size: 13px; }
.pg-lines li span { color: var(--pg-muted); }
.pg-lines li span small { display: block; color: var(--pg-faint); font-size: 12px; }
.pg-lines li b { font-weight: 650; white-space: nowrap; }
.pg-lines li.pg-total { border-top: 1px solid var(--pg-line); }
.pg-lines li.pg-total span { color: var(--pg-ink); font-weight: 650; }
.pg-lines li.pg-total b { font-size: 15px; }

.pg-choice { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--pg-line); border-radius: 10px; background: #fff; cursor: pointer; transition: border-color var(--pg-m) ease, background-color var(--pg-m) ease; }
.pg-choice + .pg-choice { margin-top: 8px; }
.pg-choice:hover { background: #fbfcfd; }
.pg-choice.pg-is-on { border-color: var(--pg-navy); box-shadow: inset 0 0 0 1px var(--pg-navy); background: #fbfcfe; }
.pg-choice input { margin: 0; width: 16px; height: 16px; accent-color: var(--pg-navy); }
.pg-choice-copy { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.pg-choice-copy b { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.pg-choice-copy small { color: var(--pg-muted); font-size: 12px; line-height: 1.45; }
.pg-choice-price { text-align: right; white-space: nowrap; }
.pg-choice-price b { font-size: 14px; font-weight: 650; }
.pg-choice-price small { color: var(--pg-faint); font-size: 11.5px; }
.pg-checks { display: grid; border: 1px solid var(--pg-line); border-radius: 10px; overflow: hidden; }
.pg-checks label { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 13px; font-weight: 500; cursor: pointer; }
.pg-checks label + label { border-top: 1px solid var(--pg-rule); }
.pg-checks input { width: 16px; height: 16px; margin: 0; accent-color: var(--pg-navy); }
.pg-checks .pg-tile { width: 24px; height: 24px; border-radius: 6px; font-size: 8px; }

.pg-summary { display: grid; gap: 14px; padding: 16px 18px; border-radius: 10px; background: var(--pg-soft); }
.pg-summary h4 { margin: 0; font-size: 12.5px; font-weight: 650; color: var(--pg-ink); }
.pg-summary .pg-lines li { padding: 6px 0; font-size: 12.5px; border-top-color: #e6eaf0; }
.pg-summary .pg-lines li:first-child { border-top: 0; padding-top: 0; }
.pg-summary .pg-lines li.pg-total b { font-size: 14px; }
.pg-summary p { color: var(--pg-muted); font-size: 12px; line-height: 1.5; }

.pg-menu { position: fixed; z-index: 60; min-width: 196px; padding: 6px; border: 1px solid var(--pg-line); border-radius: 11px; background: #fff; box-shadow: var(--pg-shadow-menu); }
.pg-menu > button, .pg-menu > a { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--pg-ink); font-size: 13px; font-weight: 550; text-align: left; text-decoration: none; }
.pg-menu > button:hover, .pg-menu > a:hover { background: var(--pg-soft); text-decoration: none; }
.pg-menu .pg-danger { color: var(--pg-bad); }
.pg-menu .pg-danger:hover { background: #fff5f3; }
.pg-menu hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--pg-rule); }
.pg-menu-head { display: none; }
.pg-scrim { position: fixed; inset: 0; z-index: 50; background: transparent; }

dialog.pg-dlg { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: var(--pg-radius-dlg); background: #fff; color: var(--pg-ink); box-shadow: var(--pg-shadow-dlg); }
dialog.pg-dlg[open] { display: flex; flex-direction: column; }
dialog.pg-dlg [data-step-panel]:not([hidden]) { display: contents; }
.pg-dlg-head, .pg-dlg-foot { flex: none; }
.pg-dlg-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; outline: none; }
dialog.pg-dlg.pg-wide { width: min(760px, calc(100vw - 32px)); }
dialog.pg-dlg::backdrop { background: rgba(23, 32, 51, .45); }
.pg-dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px 0; }
.pg-dlg-head h3 { font-size: 16px; font-weight: 650; letter-spacing: -.005em; }
.pg-dlg-head p { margin-top: 2px; color: var(--pg-muted); font-size: 12.5px; }
.pg-dlg-x { display: grid; width: 30px; height: 30px; place-items: center; margin: -6px -8px 0 0; border: 0; border-radius: 8px; background: transparent; color: var(--pg-faint); }
.pg-dlg-x:hover { background: var(--pg-soft); color: var(--pg-ink); }
.pg-dlg-body { padding: 18px 22px 22px; font-size: 13.5px; line-height: 1.55; }
.pg-dlg-body p { color: var(--pg-muted); }
.pg-dlg-body p + p { margin-top: 10px; }
.pg-dlg-body p strong { color: var(--pg-ink); font-weight: 600; }
.pg-dlg-body h4 { margin: 0 0 8px; font-size: 12.5px; font-weight: 650; }
.pg-dlg-body .pg-group + .pg-group { margin-top: 20px; }
.pg-dlg-cols { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.pg-dlg-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--pg-rule); background: #fff; border-radius: 0 0 var(--pg-radius-dlg) var(--pg-radius-dlg); }
.pg-dlg-foot .pg-grow { flex: 1 1 auto; }
.pg-dlg-foot .pg-spread { display: flex; gap: 8px; }
.pg-dlg-foot .pg-note { color: var(--pg-faint); font-size: 12px; }
.pg-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--pg-line); border-radius: 10px; background: #fff; text-align: left; transition: border-color var(--pg-m) ease, background-color var(--pg-m) ease; }
.pg-option + .pg-option { margin-top: 8px; }
.pg-option:hover { background: #fbfcfd; border-color: #bfc8d6; }
.pg-option.pg-is-on { border-color: var(--pg-navy); box-shadow: inset 0 0 0 1px var(--pg-navy); }
.pg-option .pg-row-copy b { font-size: 13.5px; font-weight: 600; }
.pg-option .pg-row-copy small { color: var(--pg-muted); font-size: 12px; }
.pg-option .pg-icon.pg-chev { color: var(--pg-faint); }
.pg-big-amount { margin: 2px 0 14px; color: var(--pg-navy); font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.pg-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 12.5px; }
.pg-kv dt { color: var(--pg-muted); }
.pg-kv dd { color: var(--pg-ink); font-weight: 550; }
.pg-callout { display: flex; gap: 10px; padding: 11px 13px; border-radius: 9px; background: var(--pg-soft); color: var(--pg-muted); font-size: 12.5px; line-height: 1.5; }
.pg-callout.pg-warn { background: var(--pg-warn-bg); color: var(--pg-warn); }
.pg-callout.pg-bad { background: var(--pg-bad-bg); color: var(--pg-bad); }
.pg-callout .pg-icon { margin-top: 2px; }
.pg-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 12.5px; color: var(--pg-ink); }
.pg-consent input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--pg-navy); }

.pg-toast { position: fixed; left: 50%; bottom: 22px; z-index: 90; transform: translateX(-50%); display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 10px; background: var(--pg-ink); color: #fff; font-size: 13px; font-weight: 550; box-shadow: 0 14px 36px rgba(23, 32, 51, .25); opacity: 0; transition: opacity var(--pg-m) ease; }
.pg-toast.pg-is-on { opacity: 1; }
.pg-toast .pg-icon { color: #8fd4b1; }

.pg-sec.pg-danger .pg-sec-head h2 { color: var(--pg-ink); }
.pg-sec.pg-danger .pg-card { border-color: #ecd9d6; }

.pg-home-group + .pg-home-group { margin-top: 24px; }
.pg-home-group h2 { margin: 0 0 8px 2px; color: var(--pg-faint); font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.pg-home-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px 10px 14px; color: inherit; text-decoration: none; }
.pg-home-row + .pg-home-row { border-top: 1px solid var(--pg-rule); }
.pg-home-row:hover { background: #fbfcfd; text-decoration: none; }
.pg-home-row .pg-row-mark { width: 32px; height: 32px; border-radius: 8px; }
.pg-home-row .pg-row-copy b { font-size: 13.5px; font-weight: 600; }
.pg-home-row .pg-row-copy small { color: var(--pg-muted); font-size: 12px; }
.pg-home-row .pg-icon.pg-chev { color: var(--pg-faint); }

.pg-state { display: grid; justify-items: center; gap: 8px; padding: 36px 20px; text-align: center; }
.pg-state .pg-row-mark { width: 40px; height: 40px; border-radius: 10px; }
.pg-state b { font-size: 13.5px; font-weight: 650; }
.pg-state p { max-width: 42ch; color: var(--pg-muted); font-size: 12.5px; line-height: 1.5; }
.pg-skeleton { height: 12px; border-radius: 6px; background: linear-gradient(90deg, #eef1f5, #f7f9fb, #eef1f5); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

.pg-filters { display: flex; gap: 8px; margin-bottom: 12px; }
.pg-filters .pg-select { width: auto; min-width: 180px; }

@media (max-width: 720px) {
  .pg-root { --pg-sb: 0px; }
  .pg-sb { display: none; }
  .pg-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 4px; height: 54px; padding: 0 8px; background: rgba(255, 254, 250, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--pg-cream-line); }
  .pg-topbar-back { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 8px 0 4px; border: 0; border-radius: 9px; background: transparent; color: var(--pg-blue); font-size: 14px; font-weight: 600; text-decoration: none; }
  .pg-topbar-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: 14px; font-weight: 650; color: var(--pg-ink); }
  .pg-topbar-spacer { width: 84px; flex: none; }
  .pg-topbar .pg-btn.pg-sm { margin-right: 4px; }
  .pg-main { margin-left: 0; }
  .pg-page { padding: 20px 16px 72px; }
  .pg-page-head { margin-bottom: 22px; }
  .pg-root h1.pg-page-title { font-size: 24px; }
  .pg-page-title-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .pg-page-actions .pg-btn { flex: 1 1 auto; }
  .pg-sec + .pg-sec { margin-top: 28px; }
  .pg-sec-head { flex-wrap: wrap; align-items: flex-start; }
  .pg-sec-actions { width: 100%; }
  .pg-sec-actions .pg-btn { flex: 1 1 auto; }
  .pg-row { flex-wrap: wrap; padding: 13px 16px; }
  .pg-row + .pg-row::before { right: 16px; left: 16px; }
  .pg-row-mark { width: 34px; height: 34px; }
  .pg-row-copy { flex: 1 1 0; min-width: 150px; }
  .pg-row-side { margin-left: auto; }
  .pg-row-side:has(> .pg-btn:not(.pg-sm)) { flex: 1 1 100%; justify-content: flex-start; margin-left: 0; }
  .pg-row:has(> .pg-row-mark) .pg-row-side:has(> .pg-btn:not(.pg-sm)) { padding-left: 48px; }
  .pg-row-status { flex: 1 1 100%; padding-left: 48px; }
  .pg-row.pg-no-mark .pg-row-status { padding-left: 0; }
  .pg-row-value { margin-left: auto; }
  .pg-row-side.pg-wrap { flex: 1 1 100%; justify-content: flex-end; }
  .pg-row-side.pg-wrap .pg-btn { flex: 1 1 auto; }
  .pg-row.pg-is-editing .pg-edit-view { flex: 1 1 100%; }
  .pg-inline-input { width: 100%; }
  .pg-fact { grid-template-columns: 1fr; gap: 3px; padding: 12px 16px; }
  .pg-fields-2 { grid-template-columns: 1fr; gap: 0; }
  .pg-fields-2 .pg-field + .pg-field { margin-top: 16px; }
  .pg-card-sub { padding: 8px 16px; }
  .pg-attn-card { flex-wrap: wrap; padding: 14px 14px 14px 14px; }
  .pg-attn-actions { width: 100%; padding-left: 48px; }
  .pg-attn-actions .pg-btn { flex: 1 1 auto; }
  .pg-banner { flex-direction: column; align-items: stretch; gap: 12px; }
  .pg-banner .pg-btn { align-self: flex-start; }
  .pg-btn { min-height: 40px; }
  .pg-btn.pg-sm { min-height: 32px; }
  
  .pg-table, .pg-table tbody, .pg-table tr, .pg-table td { display: block; }
  .pg-table thead { display: none; }
  .pg-table tr { position: relative; padding: 12px 16px; }
  .pg-table tr + tr { border-top: 1px solid var(--pg-rule); }
  .pg-table td, .pg-table td:first-child, .pg-table td:last-child { padding: 0; border: 0; }
  .pg-table td.pg-num { text-align: left; }
  .pg-table td.pg-act { position: absolute; top: 10px; right: 10px; width: auto; }
  .pg-table td.pg-biz, .pg-table td.pg-mono, .pg-table td:has(> .pg-chip) { width: auto; white-space: normal; }
  .pg-table td.pg-quiet { font-size: 12.5px; }
  .pg-table td[data-label]::before { content: attr(data-label) " "; color: var(--pg-faint); font-weight: 500; }
  .pg-table td.pg-line2 { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; color: var(--pg-muted); font-size: 12.5px; }
  .pg-table-foot { padding: 10px 16px; }
  .pg-filters { flex-wrap: wrap; }
  .pg-filters .pg-select { flex: 1 1 40%; min-width: 0; }
  
  .pg-menu { inset: auto 0 0 0 !important; width: 100%; min-width: 0; max-height: 85dvh; overflow-y: auto; padding: 8px 12px calc(12px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; border: 0; box-shadow: 0 -16px 48px rgba(23, 32, 51, .22); }
  .pg-menu-head { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 2px 4px 6px; color: var(--pg-muted); font-size: 12.5px; font-weight: 600; }
  .pg-menu-head .pg-dlg-x { margin: 0; }
  .pg-menu > button, .pg-menu > a { min-height: 44px; font-size: 14px; }
  .pg-scrim { background: rgba(23, 32, 51, .35); }
  dialog.pg-dlg, dialog.pg-dlg.pg-wide { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
  .pg-dlg-cols { grid-template-columns: 1fr; gap: 18px; }
  .pg-dlg-foot { position: sticky; bottom: 0; flex-direction: column-reverse; align-items: stretch; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .pg-dlg-foot .pg-spread { flex-direction: column-reverse; }
  .pg-dlg-foot .pg-btn { width: 100%; min-height: 44px; }
  .pg-dlg-foot .pg-note { text-align: center; }
  .pg-toast { left: 16px; right: 16px; transform: none; }
  .pg-code input { width: 100%; }
  .pg-member .pg-avatar { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) { .pg-root *, .pg-root *::before, .pg-root *::after { transition: none !important; animation: none !important; } }

/* ---------- Additions for the build target (decisions 3 and 4) ---------- */
/* Sidebar: an unpaid count on Penagihan, the Esc hint on the back link. */
.pg-sb-link .pg-count { margin-left: auto; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--pg-bad); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1; }
.pg-sb-link.pg-active .pg-count { background: #fff; color: var(--pg-bad); }
.pg-sb-esc { margin-left: auto; padding: 1px 5px; border: 1px solid var(--pg-cream-line); border-radius: 5px; color: var(--pg-faint); font-size: 10px; font-weight: 600; letter-spacing: .02em; }
.pg-sb-context .pg-row-mark { width: 26px; height: 26px; border-radius: 8px; }
/* Summary panels in Ubah paket: the gold-washed "Bayar sekarang" and the plain "Mulai {date}". */
.pg-summary + .pg-summary { margin-top: 12px; }
.pg-summary.pg-due { background: #fff6e1; border: 1px solid #f0d9a6; }
.pg-summary.pg-plain { background: #fff; border: 1px solid var(--pg-line); }
.pg-summary .pg-summary-head { font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--pg-muted); }
.pg-summary.pg-due .pg-summary-head { color: var(--pg-gold-deep); }
.pg-summary.pg-due .pg-lines li { border-top-color: #efdcb3; }
/* A deep link to a page the role cannot open: a quiet notice in the column, never a silent redirect. */
.pg-notice { max-width: 560px; margin: 40px auto; padding: 32px 28px; border: 1px solid var(--pg-line); border-radius: 12px; background: #fff; text-align: center; }
.pg-notice .pg-row-mark { width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 14px; }
.pg-notice h2 { font-size: 16px; font-weight: 650; margin: 0 0 6px; }
.pg-notice p { max-width: 46ch; margin: 0 auto; color: var(--pg-muted); font-size: 13px; line-height: 1.6; }
.pg-notice-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
/* A role explained in place of the action it cannot take. */
.pg-role-note { display: inline-flex; align-items: flex-start; gap: 7px; max-width: 46ch; color: var(--pg-muted); font-size: 12.5px; line-height: 1.45; text-align: left; }
.pg-role-note .pg-icon { width: 14px; height: 14px; margin-top: 2px; color: var(--pg-faint); }
/* Switch rows (Tagih otomatis, Masuk dua langkah): the switch sits at the row's right beside its state chip. */
.pg-row-side .pg-toggle { margin-left: 2px; }
.pg-toggle:focus-visible { outline-offset: 3px; }
/* Loading rows. */
.pg-skel-row { display: grid; gap: 9px; padding: 20px; }
.pg-skel-row + .pg-skel-row { border-top: 1px solid var(--pg-rule); }
.pg-skel-row .pg-skeleton:nth-child(1) { width: 34%; }
.pg-skel-row .pg-skeleton:nth-child(2) { width: 58%; }
.pg-state .pg-btn { margin-top: 6px; }
/* Small chips next to a title. */
.pg-chip.pg-sm { min-height: 20px; padding: 0 7px; font-size: 11px; }
/* Quiet text inside a row that replaces a hidden control. */
.pg-row-side .pg-role-note { max-width: 30ch; }
@media (max-width: 720px) {
  .pg-row-side .pg-role-note { max-width: none; }
  .pg-notice { margin: 16px 0; padding: 24px 18px; }
}