/* PenEcho design language — incrementally embedded from penecho_design.
   access.html loads no other stylesheet, so the Studio palette and the pe
   contract tokens are declared here with the same names and values that
   style.css uses on the Canvas surfaces. */

:root {
  color-scheme: light;

  /* Studio palette — indigo default (mirrors style.css). */
  --studio-accent: #4f46e5;
  --studio-accent-strong: #4338ca;
  --studio-accent-soft: #e7e8fb;
  --studio-accent-softer: #f4f4fc;
  --studio-accent-border: #c7cbf0;
  --studio-shell: #f2f3f5;
  --studio-titlebar: #f8f8f9;
  --studio-toolbar: #f2f3f5;
  --studio-outside: #f7f8fa;
  --studio-panel: #ffffff;
  --studio-panel-raised: #fbfbfc;
  --studio-line: #d8dbe2;
  --studio-text: #1c1f27;
  --studio-muted: #666d7d;

  /* PenEcho semantic tokens derived from the palette. */
  --pe-surface: var(--studio-panel, #ffffff);
  --pe-surface-raised: var(--studio-panel-raised, #fbfbfc);
  --pe-surface-muted: var(--studio-toolbar, #f2f3f5);
  --pe-surface-pressed: color-mix(in srgb, var(--studio-accent, #4f46e5) 10%, var(--studio-panel, #ffffff));
  --pe-ink: var(--studio-text, #1c1f27);
  --pe-ink-2: var(--studio-muted, #666d7d);
  --pe-ink-3: color-mix(in srgb, var(--studio-muted, #666d7d) 86%, var(--studio-panel, #ffffff));
  --pe-line: color-mix(in srgb, var(--studio-text, #1c1f27) 14%, transparent);
  --pe-line-strong: color-mix(in srgb, var(--studio-text, #1c1f27) 22%, transparent);
  --pe-hover: color-mix(in srgb, var(--studio-accent, #4f46e5) 6%, var(--studio-panel, #ffffff));
  --pe-selected: color-mix(in srgb, var(--studio-accent, #4f46e5) 10%, var(--studio-panel, #ffffff));
  --pe-accent: var(--studio-accent, #4f46e5);
  --pe-accent-strong: var(--studio-accent-strong, #4338ca);
  --pe-accent-label: var(--studio-accent-strong, #4338ca);
  --pe-accent-soft: color-mix(in srgb, var(--studio-accent, #4f46e5) 9%, transparent);
  --pe-accent-focus: color-mix(in srgb, var(--studio-accent, #4f46e5) 28%, transparent);
  --pe-accent-ink: #ffffff;
  --pe-danger: #b4232c;
  --pe-danger-soft: rgba(180, 35, 44, .08);
  --pe-warning: #9a5b12;
  --pe-warning-soft: rgba(154, 91, 18, .09);
  --pe-shadow-dialog: 0 14px 30px rgba(17, 24, 39, .20);
  --pe-control-radius: 5px;
  --pe-r-group: 10px;
  --pe-r-dialog: 14px;
  --pe-button-standard-h: 30px;

  /* Type ramp (catalog role sizes). */
  --pe-font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --pe-type-page: 20px;
  --pe-type-section: 13.5px;
  --pe-type-label: 13px;
  --pe-type-body: 13px;
  --pe-type-description: 13px;
  --pe-type-meta: 11.5px;
  --pe-type-overline: 10.5px;
  --pe-type-regular: 400;
  --pe-type-medium: 500;
  --pe-type-semibold: 600;

  /* Legacy hook pinned by the access focus contract. */
  --accent: var(--pe-accent);

  font-family: var(--pe-font-ui);
}

[data-studio-palette="graphite"] { --studio-accent: #475569; --studio-accent-strong: #334155; --studio-accent-soft: #e7ebef; --studio-accent-softer: #f2f4f6; --studio-accent-border: #c5cdd6; --studio-shell: #f2f3f4; --studio-titlebar: #f8f8f8; --studio-toolbar: #eef0f2; --studio-outside: #f6f7f8; --studio-panel: #ffffff; --studio-panel-raised: #fafbfb; --studio-line: #d7dade; --studio-text: #20242a; --studio-muted: #666d76; }
[data-studio-palette="cobalt"] { --studio-accent: #2563eb; --studio-accent-strong: #1d4ed8; --studio-accent-soft: #e7efff; --studio-accent-softer: #f2f6ff; --studio-accent-border: #bfd0f7; --studio-shell: #f1f4f9; --studio-titlebar: #f7f9fc; --studio-toolbar: #edf1f7; --studio-outside: #f6f8fb; --studio-panel: #ffffff; --studio-panel-raised: #fafcff; --studio-line: #d5dce8; --studio-text: #172033; --studio-muted: #5f6878; }
[data-studio-palette="azure"] { --studio-accent: #0284c7; --studio-accent-strong: #0369a1; --studio-accent-soft: #e3f2f9; --studio-accent-softer: #f0f8fb; --studio-accent-border: #b9d9e8; --studio-shell: #eff5f8; --studio-titlebar: #f6fafc; --studio-toolbar: #eaf2f6; --studio-outside: #f4f9fb; --studio-panel: #ffffff; --studio-panel-raised: #f9fcfd; --studio-line: #d2e0e7; --studio-text: #14242c; --studio-muted: #5c6d75; }
[data-studio-palette="teal"] { --studio-accent: #0f766e; --studio-accent-strong: #115e59; --studio-accent-soft: #e1f0ee; --studio-accent-softer: #eff7f6; --studio-accent-border: #b8d8d4; --studio-shell: #eff5f4; --studio-titlebar: #f6faf9; --studio-toolbar: #eaf2f1; --studio-outside: #f4f9f8; --studio-panel: #ffffff; --studio-panel-raised: #f9fcfb; --studio-line: #d1dfdc; --studio-text: #172824; --studio-muted: #5d6d69; }
[data-studio-palette="forest"] { --studio-accent: #2f6f45; --studio-accent-strong: #245c38; --studio-accent-soft: #e5efe8; --studio-accent-softer: #f1f6f2; --studio-accent-border: #bfd3c5; --studio-shell: #f1f5f2; --studio-titlebar: #f7faf7; --studio-toolbar: #edf2ee; --studio-outside: #f5f8f5; --studio-panel: #ffffff; --studio-panel-raised: #fafcfa; --studio-line: #d5dfd7; --studio-text: #1b271e; --studio-muted: #616d64; }
[data-studio-palette="amber"] { --studio-accent: #b45309; --studio-accent-strong: #92400e; --studio-accent-soft: #f5e9dd; --studio-accent-softer: #faf4ee; --studio-accent-border: #dfc4aa; --studio-shell: #f6f3ef; --studio-titlebar: #faf8f5; --studio-toolbar: #f1eee9; --studio-outside: #faf8f5; --studio-panel: #ffffff; --studio-panel-raised: #fdfbf9; --studio-line: #e3d9cd; --studio-text: #2a211b; --studio-muted: #71665d; }
[data-studio-palette="burgundy"] { --studio-accent: #9f1239; --studio-accent-strong: #881337; --studio-accent-soft: #f4e5ea; --studio-accent-softer: #faf1f4; --studio-accent-border: #dbbcc6; --studio-shell: #f6f1f3; --studio-titlebar: #faf7f8; --studio-toolbar: #f2ecee; --studio-outside: #faf7f8; --studio-panel: #ffffff; --studio-panel-raised: #fdfafb; --studio-line: #e3d4d9; --studio-text: #2b1c21; --studio-muted: #716168; }

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; overflow-x: hidden; background: var(--studio-outside); }
body { min-width: 320px; min-height: 100vh; min-height: 100dvh; margin: 0; overflow-x: hidden; color: var(--pe-ink); background: var(--studio-outside); font: var(--pe-type-regular) var(--pe-type-body)/1.45 var(--pe-font-ui); }
button, a { font: inherit; }
button { letter-spacing: 0; }
svg { display: block; }

.access-topbar {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  padding: 6px max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--pe-line);
  background: var(--studio-titlebar);
}
.access-brand { display: inline-flex; min-height: 36px; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.access-brand-mark { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--pe-line); border-radius: 7px; background: var(--pe-surface); }
.access-brand img { width: 24px; height: 24px; object-fit: contain; }
.access-brand > span:last-child { display: grid; gap: 1px; line-height: 1.05; }
.access-brand strong { color: var(--pe-ink); font-size: 14px; font-weight: var(--pe-type-semibold); letter-spacing: normal; }
.access-brand small { color: var(--pe-ink-2); font-size: var(--pe-type-meta); font-weight: var(--pe-type-medium); letter-spacing: normal; text-transform: none; }

/* Language switch follows the closed segmented contract: 30px track, 24px items. */
.access-language { display: inline-flex; height: 30px; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--pe-line); border-radius: 6px; background: var(--pe-surface-muted); }
.access-language button { min-width: 34px; height: 24px; min-height: 24px; padding: 0 8px; color: var(--pe-ink-2); border: 1px solid transparent; border-radius: 4px; background: transparent; font-size: 12.5px; font-weight: var(--pe-type-medium); cursor: pointer; transition: color .18s ease-out, border-color .18s ease-out, background .18s ease-out; }
.access-language button:hover { color: var(--pe-ink); }
.access-language button[aria-pressed="true"] { color: var(--pe-ink); border-color: var(--pe-line); background: var(--pe-surface); box-shadow: none; }

.access-shell { display: grid; min-height: calc(100vh - 52px); min-height: calc(100dvh - 52px); place-items: center; padding: 24px 16px max(24px, env(safe-area-inset-bottom)); }
.access-panel { width: min(100%, 480px); padding: 24px; border: 1px solid var(--pe-line); border-radius: var(--pe-r-dialog); background: var(--pe-surface); box-shadow: var(--pe-shadow-dialog); }
.access-heading { display: grid; gap: 7px; margin-bottom: 20px; }
.access-kicker { color: var(--pe-accent-label); font-size: var(--pe-type-overline); font-weight: var(--pe-type-semibold); letter-spacing: .035em; }
.access-heading h1 { margin: 0; color: var(--pe-ink); font-size: var(--pe-type-page); font-weight: var(--pe-type-semibold); line-height: 1.25; letter-spacing: normal; text-wrap: balance; }
.access-heading p { margin: 0; color: var(--pe-ink-2); font-size: var(--pe-type-description); font-weight: var(--pe-type-regular); line-height: 1.45; text-wrap: pretty; }

.access-loading { display: flex; min-height: 54px; align-items: center; gap: 11px; color: var(--pe-ink-2); font-size: var(--pe-type-body); }
.access-loading span { width: 18px; height: 18px; border: 2px solid var(--pe-line-strong); border-top-color: var(--pe-accent); border-radius: 50%; animation: access-spin .8s linear infinite; }
@keyframes access-spin { to { transform: rotate(360deg); } }
.access-view { display: grid; gap: 14px; }
.access-view[hidden], .access-loading[hidden], .access-error[hidden], #accessRetry[hidden] { display: none; }

.access-scope-note { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 10px; padding: 12px; border: 1px solid var(--pe-line); border-radius: var(--pe-r-group); background: var(--pe-surface-raised); }
.access-note-icon { display: grid; width: 30px; height: 30px; place-items: center; color: var(--pe-ink-2); border-radius: 7px; background: var(--pe-surface-muted); }
.access-note-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.access-scope-note strong { color: var(--pe-ink); font-size: var(--pe-type-label); font-weight: var(--pe-type-medium); line-height: 1.25; }
.access-scope-note p { margin: 3px 0 0; color: var(--pe-ink-2); font-size: var(--pe-type-description); font-weight: var(--pe-type-regular); line-height: 1.45; }

/* Choice rows implement the catalog icon+title+two-line-copy action list:
   the whole row is clickable, hover is a restrained accent tint, and the
   recommended action leads by position instead of a filled block. */
.access-choice-list { display: grid; overflow: hidden; border: 1px solid var(--pe-line); border-radius: var(--pe-r-group); background: var(--pe-surface); }
.access-choice { display: grid; grid-template-columns: 30px minmax(0, 1fr) 16px; min-height: 70px; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; color: var(--pe-ink); border: 0; background: var(--pe-surface); text-align: left; cursor: pointer; transition: color .18s ease-out, background .18s ease-out; }
.access-choice + .access-choice { border-top: 1px solid var(--pe-line); }
.access-choice:hover { background: color-mix(in srgb, var(--pe-accent) 4%, var(--pe-surface)); }
.access-choice:active { background: var(--pe-surface-pressed); }
.access-choice-icon { display: grid; width: 30px; height: 30px; place-items: center; color: var(--pe-ink-2); border-radius: 7px; background: var(--pe-surface-muted); }
.access-choice-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.access-choice-primary .access-choice-icon { color: var(--pe-accent-label); background: var(--pe-accent-soft); }
.access-choice > span:nth-child(2) { display: grid; gap: 3px; }
.access-choice strong { font-size: var(--pe-type-label); font-weight: var(--pe-type-medium); line-height: 1.25; }
.access-choice small { color: var(--pe-ink-2); font-size: 12.5px; font-weight: var(--pe-type-regular); line-height: 1.45; }
.access-choice-chevron { width: 14px; height: 14px; color: var(--pe-ink-3); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.access-restart-note { margin: 0; padding: 0 2px; color: var(--pe-ink-2); font-size: var(--pe-type-description); font-weight: var(--pe-type-regular); line-height: 1.45; }
.access-restart-note b { color: var(--pe-ink); font-weight: var(--pe-type-medium); }

.access-pin { justify-items: center; }
.access-pin-entry { display: grid; justify-items: center; gap: 7px; width: 100%; padding: 4px 0 2px; }
.access-pin-dots { display: grid; grid-template-columns: repeat(6, 18px); gap: 10px; justify-content: center; min-height: 22px; }
.access-pin-dots i { width: 13px; height: 13px; align-self: center; border: 1.5px solid var(--pe-line-strong); border-radius: 50%; background: var(--pe-surface); transition: border-color .18s ease-out, background .18s ease-out, transform .18s ease-out; }
.access-pin-dots i.filled { border-color: var(--pe-accent); background: var(--pe-accent); transform: scale(1.06); }
.access-pin-step { min-height: 18px; margin: 0; color: var(--pe-ink-3); font-size: var(--pe-type-meta); font-weight: var(--pe-type-medium); line-height: 1.3; text-align: center; }
.access-keypad { display: grid; grid-template-columns: repeat(3, 68px); gap: 8px; width: max-content; }
.access-keypad button { display: grid; width: 68px; height: 52px; place-items: center; padding: 0; color: var(--pe-ink); border: 1px solid var(--pe-line); border-radius: var(--pe-control-radius); background: var(--pe-surface-raised); font-size: 20px; font-weight: var(--pe-type-medium); cursor: pointer; touch-action: manipulation; transition: color .18s ease-out, border-color .18s ease-out, background .18s ease-out, transform .18s ease-out; }
.access-keypad button:hover { color: var(--pe-accent-label); border-color: color-mix(in srgb, var(--pe-accent) 45%, var(--pe-line)); background: var(--pe-hover); }
.access-keypad button:active { background: var(--pe-surface-pressed); transform: scale(.97); }
.access-keypad .access-key-action { color: var(--pe-ink-2); font-size: 16px; font-weight: var(--pe-type-medium); }
.access-keypad .access-key-action svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* The full-width confirmation keeps its 44px presence; hierarchy still comes
   from the single filled primary and its position. */
.access-primary { width: 100%; min-height: 44px; padding: 9px 14px; color: var(--pe-accent-ink); border: 1px solid var(--pe-accent-strong); border-radius: var(--pe-control-radius); background: var(--pe-accent-strong); font-size: var(--pe-type-label); font-weight: var(--pe-type-medium); cursor: pointer; transition: border-color .18s ease-out, background .18s ease-out; }
.access-primary:hover:not(:disabled) { border-color: color-mix(in srgb, var(--pe-accent-strong) 84%, #000); background: color-mix(in srgb, var(--pe-accent-strong) 89%, #000); }
.access-primary:active:not(:disabled) { border-color: var(--pe-accent-strong); background: color-mix(in srgb, var(--pe-accent-strong) 80%, #000); }
.access-text-button { min-height: var(--pe-button-standard-h); padding: 0 10px; color: var(--pe-ink-2); border: 0; border-radius: var(--pe-control-radius); background: transparent; font-size: var(--pe-type-label); font-weight: var(--pe-type-medium); cursor: pointer; transition: color .18s ease-out, background .18s ease-out; }
.access-text-button:hover { color: var(--pe-ink); background: var(--pe-hover); }
.access-text-button:active { background: var(--pe-surface-pressed); }

.access-warning { padding: 12px; border: 1px solid color-mix(in srgb, var(--pe-warning) 25%, var(--pe-line)); border-radius: var(--pe-r-group); background: var(--pe-warning-soft); }
.access-warning strong { color: var(--pe-warning); font-size: var(--pe-type-section); font-weight: var(--pe-type-semibold); line-height: 1.3; }
.access-warning p { margin: 5px 0 0; color: var(--pe-ink-2); font-size: var(--pe-type-description); font-weight: var(--pe-type-regular); line-height: 1.45; }
.access-error { margin-top: 14px; padding: 10px 12px; color: var(--pe-danger); border: 1px solid color-mix(in srgb, var(--pe-danger) 25%, var(--pe-line)); border-radius: var(--pe-r-group); background: var(--pe-danger-soft); font-size: var(--pe-type-body); font-weight: var(--pe-type-regular); line-height: 1.45; }

button:focus-visible, a:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--accent); outline-offset: 2px; }
.access-choice:focus-visible { outline-offset: -3px; }
button:disabled { cursor: not-allowed; opacity: .46; }

@media (max-width: 520px) {
  .access-shell { align-items: start; padding: 18px 0 max(18px, env(safe-area-inset-bottom)); }
  .access-panel { padding: 20px 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .access-heading { margin-bottom: 20px; }
}
@media (max-height: 700px) and (min-width: 521px) { .access-shell { align-items: start; } }
@media (pointer: coarse) {
  .access-language button, .access-text-button { min-height: 44px; }
  .access-brand { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .access-loading span { animation: none; }
}