/* Message/control primitives retain the ARK UI 0.3.0 native Web adaptation.
   The appended, pinned material layer uses registered ARK UI 0.5.2.
   Component intent and host-owned draft/receipt contracts remain unchanged.
   Web typography: 18px answers, 20px current question, 14px supporting copy. */
:root {
  --ark-purple:#5a42f9;
  --ark-dock:#f3f4f6;
  --ark-ghost:#f5f6fa;
  --ark-ai-surface:#e1f5ee;
  --ark-ai-line:rgba(36,111,101,.28);
  --ark-lilac:#e3e4ff;
  --ark-pill:999px;
  --ark-action-height:44px;
  --ark-control-line:rgba(15,15,80,.32);
}
.ark-action-button{min-height:var(--ark-action-height);margin:0;padding:10px 18px;line-height:1.5;border-radius:var(--control);font-size:14px;font-weight:550}
.ark-action-button--primary{min-height:48px;background:var(--ark-purple);border-color:var(--ark-purple);color:var(--surface);font-size:16px;font-weight:650}
.ark-action-button--secondary{background:var(--surface);border-color:var(--ark-control-line);color:var(--ink)}
.ark-action-button--quiet{background:transparent;border-color:transparent;color:var(--muted)}
.ark-action-button:active{opacity:.82}
.ark-action-button:disabled{opacity:.45;cursor:default}
.ark-state-notice{display:flex;align-items:flex-start;flex-wrap:wrap;gap:12px;margin:12px 0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--control);background:var(--soft);color:var(--text);overflow-wrap:anywhere}
.ark-state-notice__copy{flex:1;min-width:160px}
.ark-state-notice__copy strong{display:block;font-size:15px;font-weight:600}
.ark-state-notice__copy p{font-size:14px;line-height:1.7;margin:4px 0 0;white-space:pre-wrap}
.ark-state-notice--error{border-color:var(--error)}
.ark-state-notice--error strong{color:var(--error)}
.ark-state-notice--success strong{color:var(--success)}
.ark-state-notice__action{min-height:44px;padding:9px 14px;border:1px solid var(--ark-control-line);background:var(--surface);font-size:15px;font-weight:600;color:var(--action)}
.ark-message{display:flex;align-items:flex-start;width:100%;margin:0 0 26px;min-width:0;font-size:18px}
.ark-message--outgoing{flex-direction:row-reverse}
.ark-message__column{display:flex;flex-direction:column;align-items:flex-start;max-width:94%;min-width:0}
.ark-message--outgoing .ark-message__column{align-items:flex-end;max-width:88%}
.ark-message__author{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 2px 10px;color:var(--muted);font-size:13px;line-height:1.5}
.ark-message__author strong{font-size:14px;font-weight:550;color:var(--ink)}
.ark-message--outgoing .ark-message__author{justify-content:flex-end}
.ark-message__badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 6px;border-radius:4px;background:var(--ark-ghost);color:var(--muted);font-size:11px;font-weight:400}
.ark-message__meta{font-size:12px;color:var(--muted);font-weight:400}
.ark-message__bubble{box-sizing:border-box;max-width:100%;padding:18px 22px;border:1px solid var(--line);border-radius:4px var(--radius) var(--radius) var(--radius);background:var(--surface);color:var(--text)}
.ark-message.is-current .ark-message__bubble{border-color:var(--line);background:var(--surface);padding:0;border:0}
.ark-message--outgoing .ark-message__bubble{border-color:transparent;border-radius:var(--radius) 4px var(--radius) var(--radius);background:var(--ark-ghost);color:var(--text)}
.ark-message__text{font-size:18px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.ark-message.is-current .ark-message__text{font-size:20px;line-height:1.85;color:var(--ink);font-weight:500}
.ark-message__excerpt{font-size:18px;white-space:normal;line-height:1.8}
.ark-message__excerpt-label{display:block;font-size:12px;color:var(--muted);margin-bottom:8px}
.ark-message__excerpt ul{margin:0;padding-left:22px}
.ark-message__disclosure{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:44px;margin:8px 0 0;padding:8px 0;border:0;border-radius:0;background:transparent;color:var(--action);font-size:14px;text-align:left;font-weight:400}
.ark-message--outgoing .ark-message__disclosure{color:var(--action)}
.ark-chevron{display:inline-block;width:7px;height:7px;flex:none;margin:0 5px 4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.ark-chevron.is-up{transform:rotate(225deg);margin-top:5px}
.ark-message-system{padding:8px 12px;margin:4px auto 22px;color:var(--muted);font-size:12px;text-align:center;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7}
.ark-message-composer{width:100%;padding:18px 32px max(14px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--surface)}
.ark-message-composer__caption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;color:var(--muted);font-size:12px;line-height:1.6}
.ark-message-composer__caption label{font-size:14px;font-weight:550;color:var(--ink)}
.ark-message-composer__row{display:flex;align-items:flex-end;gap:12px}
.ark-message-composer__input{flex:1;min-width:0;width:0;min-height:76px;max-height:240px;margin:0;resize:none;padding:12px 16px;border:1px solid var(--line);border-radius:var(--control);background:var(--ark-ghost);font-size:18px;line-height:1.7;overflow-y:auto}
.ark-message-composer__input:focus{border-color:var(--action);background:var(--surface)}
.ark-message-composer__input::placeholder{color:var(--muted);font-size:16px}
.ark-message-composer__send{flex:none;min-width:110px;min-height:48px;padding:11px 18px;border-color:var(--ark-purple);background:var(--ark-purple);color:var(--surface);font-size:16px;font-weight:650}
.ark-message-composer__send:disabled{border-color:var(--line);background:var(--ark-dock);color:var(--muted);opacity:1;cursor:default}
.ark-message-composer__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:10px}
.ark-message-composer__hint{color:var(--muted);font-size:12px;line-height:1.6}
.ark-message-composer__hint:empty{display:none}
.ark-message-composer__footer button{min-height:44px;padding:9px 14px;border-color:var(--ark-control-line);background:var(--ark-ghost);color:var(--ink);font-size:14px;font-weight:600}
.ark-message-composer__footer button[data-action="finish-prompt"]{border-color:var(--error);background:var(--surface);color:var(--error)}
@media(max-width:700px){
 .ark-message__column{max-width:100%}
 .ark-message--outgoing .ark-message__column{max-width:94%}
 .ark-message__bubble{padding:15px 17px}
 .ark-message.is-current .ark-message__text{font-size:18px;line-height:1.85}
 .ark-message__author{gap:6px}
 .ark-message-composer{padding:14px 20px max(10px,env(safe-area-inset-bottom))}
 .ark-message-composer__caption{align-items:flex-start;flex-wrap:wrap;gap:4px;font-size:11px;margin-bottom:10px}
 .ark-message-composer__row{gap:8px}
 .ark-message-composer__send{min-width:100px;max-width:144px;padding:10px 12px;font-size:16px}
 .ark-message-composer__hint{display:none}
 .ark-message-composer__footer{justify-content:flex-end}
 .ark-message-composer__input{min-height:76px}
 .ark-message-composer__footer button{min-height:44px}
}

/* BEGIN ARK UI 0.5.2 material source: exact generated bytes */
:root {
  --ark-material-canvas-base: #e8f0ff;
  --ark-material-canvas-blue: #bed2ff;
  --ark-material-canvas-lilac: #d2ccff;
  --ark-material-canvas-cyan: #d8f3ff;
  --ark-material-canvas-glow: #f3edff;
  --ark-material-canvas-bottom: #edf4ff;
  --ark-material-color-surface: #ffffff;
  --ark-material-color-ink: #202747;
  --ark-material-color-text: #24283d;
  --ark-material-color-muted: #61677b;
  --ark-material-color-brand: #5746b4;
  --ark-material-color-brand-soft: #edebf7;
  --ark-material-color-brand-line: #dad6ef;
  --accent-soft: #edebf7;
  --accent-line: #dad6ef;
  --ark-material-color-action: #405fa6;
  --ark-material-color-line: #dfe4ef;
  --ark-material-action-fill: #5746b4;
  --ark-material-action-ink: #ffffff;
  --ark-material-action-border: #5746b4;
  --ark-material-background: #ffffff;
  --ark-material-highlight: none;
  --ark-material-border: rgba(32, 39, 71, 0.13);
  --ark-material-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --ark-material-shadow: 0 6px 20px rgba(32, 39, 71, 0.055);
  --ark-material-backdrop: none;
  --ark-material-content-background: #ffffff;
  --ark-material-content-border: rgba(32, 39, 71, 0.12);
  --ark-material-control-radius: 14px;
  --ark-material-content-radius: 20px;
  --ark-material-overlay-radius: 24px;
  --ark-material-duration: 180ms;
  --ark-material-easing: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ark-material-canvas {
  background-color: #e8f0ff;
  background-image: radial-gradient(ellipse 70% 30% at 0% 5%, rgba(216, 243, 255, 0.9), transparent 100%), radial-gradient(ellipse 70% 35% at 95% 0%, rgba(210, 204, 255, 0.18), transparent 100%), radial-gradient(ellipse 72% 38% at 50% 0%, rgba(190, 210, 255, 0.22), transparent 100%), radial-gradient(ellipse 32% 14% at 70% 100%, rgba(243, 237, 255, 0.8), transparent 100%), linear-gradient(180deg, #e8f0ff 0%, #e8f0ff 78%, #edf4ff 100%);
  background-repeat: no-repeat;
}

.ark-material-chrome, .ark-material-menu, .ark-material-dock, .ark-material-panel,
.ark-material-component.ark-material-dock, .ark-material-component.ark-material-panel {
  box-sizing: border-box;
  background-color: var(--ark-material-background);
  background-image: var(--ark-material-highlight);
  border-color: var(--ark-material-border);
  box-shadow: var(--ark-material-shadow);
  -webkit-backdrop-filter: var(--ark-material-backdrop);
  backdrop-filter: var(--ark-material-backdrop);
}

.ark-material-menu, .ark-material-panel {
  border-radius: var(--ark-material-overlay-radius);
}

.ark-material-control {
  border-radius: var(--ark-material-control-radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 6px rgba(32, 39, 71, 0.045);
  transition: transform var(--ark-material-duration) var(--ark-material-easing), border-color var(--ark-material-duration) var(--ark-material-easing), background-color var(--ark-material-duration) var(--ark-material-easing);
}

.ark-material-control:active:not([disabled]):not([aria-disabled=true]) {
  transform: translateY(1px);
}

.ark-material-control[disabled], .ark-material-control[aria-disabled=true] {
  box-shadow: none;
}

.ark-material-content:not(.ark-material-component) {
  background-color: var(--ark-material-content-background);
  border-color: var(--ark-material-content-border);
  border-radius: var(--ark-material-content-radius);
}

.ark-material-pill {
  border-radius: 999px;
}

:root[data-ark-material=glass], :root[data-ark-material=translucent] {
  --ark-material-background: rgba(255, 255, 255, 0.96);
  --ark-material-highlight: linear-gradient(135deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.18) 100%);
  --ark-material-border: rgba(32, 39, 71, 0.11);
  --ark-material-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 0 rgba(32, 39, 71, 0.035);
  --ark-material-shadow: var(--ark-material-inset-shadow), 0 8px 24px rgba(32, 39, 71, 0.065), 0 1px 4px rgba(32, 39, 71, 0.025);
  --ark-material-backdrop: none;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  :root[data-ark-material=glass] {
    --ark-material-background: rgba(255, 255, 255, 0.94);
    --ark-material-highlight: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 28%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0.22) 100%);
    --ark-material-border: rgba(255, 255, 255, 0.72);
    --ark-material-shadow: var(--ark-material-inset-shadow), 0 12px 30px rgba(32, 39, 71, 0.08), 0 2px 8px rgba(32, 39, 71, 0.025);
    --ark-material-backdrop: blur(18px) saturate(1.08);
  }
}
:root[data-ark-material=opaque] {
  --ark-material-background: #ffffff;
  --ark-material-highlight: none;
  --ark-material-backdrop: none;
  --ark-material-border: rgba(32, 39, 71, 0.16);
  --ark-material-content-background: #ffffff;
  --ark-material-shadow: 0 3px 12px rgba(32, 39, 71, 0.05);
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root[data-ark-material] {
    --ark-material-background: #ffffff;
    --ark-material-highlight: none;
    --ark-material-content-background: #ffffff;
    --ark-material-backdrop: none;
    --ark-material-border: #61677b;
    --ark-material-shadow: none;
  }

  .ark-material-canvas {
    background-image: none;
  }

  .ark-material-control {
    box-shadow: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --ark-material-duration: 0ms;
  }

  .ark-material-component, .ark-material-component *, .ark-material-component *::before, .ark-material-component *::after, .ark-material-chrome, .ark-material-menu, .ark-material-control {
    transition-duration: 0ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .ark-material-control:active:not([disabled]):not([aria-disabled=true]) {
    transform: none;
  }
}
@media (forced-colors: active) {
  :root[data-ark-material] {
    --ark-material-background: Canvas;
    --ark-material-highlight: none;
    --ark-material-content-background: Canvas;
    --ark-material-backdrop: none;
    --ark-material-border: CanvasText;
    --ark-material-content-border: CanvasText;
    --ark-material-shadow: none;
  }

  .ark-material-chrome, .ark-material-menu, .ark-material-dock, .ark-material-panel, .ark-material-content {
    background: Canvas;
    color: CanvasText;
    border: 1px solid CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .ark-material-control {
    box-shadow: none;
  }

  .ark-material-canvas {
    background: Canvas;
  }
}
@media print {
  :root[data-ark-material] {
    --ark-material-background: #ffffff;
    --ark-material-highlight: none;
    --ark-material-backdrop: none;
    --ark-material-shadow: none;
  }

  .ark-material-canvas {
    background-image: none;
  }
}
/* END ARK UI 0.5.2 material source */
/* Native HTML adapter aliases; no global host token replacement. */
:root {
  --interview-material-canvas: var(--ark-material-canvas-base);
  --interview-material-ink: var(--ark-material-color-ink);
  --interview-material-text: var(--ark-material-color-text);
  --interview-material-muted: var(--ark-material-color-muted);
  --interview-material-surface: var(--ark-material-content-background);
  --interview-material-border: var(--ark-material-content-border);
  --interview-material-brand-soft: var(--ark-material-color-brand-soft);
  --interview-material-brand-line: var(--ark-material-color-brand-line);
}
/* Opt in only for reading and field surfaces, never the primary action. */
.ark-interview-material-host .ark-interview-solid,
.ark-interview-material-host :is(input, textarea, select, [contenteditable="true"]) {
  background-color: var(--ark-material-content-background, #fff);
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (forced-colors: active) {
  .ark-interview-material-host .ark-interview-solid,
  .ark-interview-material-host :is(input, textarea, select, [contenteditable="true"]) {
    background-color: Canvas;
    color: CanvasText;
  }
}

/* Interview-specific adaptation of ARK UI 0.5.2.
   Preserve the established layout, type scale, main actions and all room sizing.
   Materials describe peripheral chrome; long reading and fields remain solid. */
body.ark-interview-material-host { min-height:100dvh; display:flow-root; }
body.ark-interview-material-host .site-shell {
  --muted:var(--ark-material-color-muted);
  background:transparent;
}
body.ark-interview-material-host .site-shell:not(.is-room)>.topbar.ark-material-chrome {
  margin-top:16px;
  padding-inline:20px;
  border:1px solid var(--ark-material-border);
  border-radius:var(--ark-material-content-radius);
  background-color:var(--ark-material-background);
  background-image:var(--ark-material-highlight);
  box-shadow:var(--ark-material-shadow);
  -webkit-backdrop-filter:var(--ark-material-backdrop);
  backdrop-filter:var(--ark-material-backdrop);
}
body.ark-interview-material-host .is-room>.topbar.ark-material-chrome,
body.ark-interview-material-host .room-meta.ark-material-chrome {
  background-color:var(--ark-material-background);
  background-image:var(--ark-material-highlight);
  border-color:var(--ark-material-border);
  box-shadow:var(--ark-material-inset-shadow);
  -webkit-backdrop-filter:var(--ark-material-backdrop);
  backdrop-filter:var(--ark-material-backdrop);
}
body.ark-interview-material-host .candidate-entry .entry-access {
  border-color:var(--ark-material-content-border);
}
body.ark-interview-material-host .entry-attempt-rule {
  border-color:var(--ark-material-color-brand-line);
}
body.ark-interview-material-host .prepare-body,
body.ark-interview-material-host .admin-login-access,
body.ark-interview-material-host .admin-directory,
body.ark-interview-material-host .admin-create,
body.ark-interview-material-host .admin-review-detail {
  border-color:var(--ark-material-content-border);
  box-shadow:var(--ark-material-inset-shadow),var(--ark-material-shadow);
  background:var(--ark-material-content-background);
}
body.ark-interview-material-host .room-frame,
body.ark-interview-material-host .message-scroll,
body.ark-interview-material-host .composer-dock,
body.ark-interview-material-host .room-reference {
  background:var(--ark-material-content-background);
}
body.ark-interview-material-host :is(input:not([type=checkbox]),textarea,select) {
  background:var(--ark-material-content-background);
  border-color:var(--ark-material-content-border);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
body.ark-interview-material-host :is(input:not([type=checkbox]),textarea,select):focus {
  border-color:var(--action);
}
:root[data-ark-material=opaque] body.ark-interview-material-host {
  background-image:none;
  background-color:var(--ark-material-content-background);
}
@media(max-width:700px) {
  body.ark-interview-material-host .site-shell:not(.is-room)>.topbar.ark-material-chrome {
    margin-top:12px;
    padding-inline:14px;
    border-radius:var(--control);
  }
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  body.ark-interview-material-host { background-image:none; }
}
@media(forced-colors:active) {
  body.ark-interview-material-host { background:Canvas; }
  body.ark-interview-material-host :is(input,textarea,select) { color:CanvasText; }
}
@media(prefers-reduced-motion:reduce) {
  body.ark-interview-material-host :is(button,a,input,textarea,select) { transition:none; }
}

/* 2026-11-02 review candidate: peripheral identity carries no separate card.
   Reuse the host palette and material controller; content/inputs stay opaque. */
body.ark-interview-material-host {
  background-color:var(--ark-material-content-background);
  background-image:linear-gradient(180deg, var(--ark-material-color-brand-soft) 0, var(--ark-material-content-background) 340px);
}
body.ark-interview-material-host .site-shell:not(.is-room)>.topbar.ark-material-chrome {
  border:0;
  border-bottom:1px solid var(--ark-material-content-border);
  border-radius:0;
  padding-inline:0;
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
body.ark-interview-material-host .prepare-body,
body.ark-interview-material-host .admin-directory,
body.ark-interview-material-host .admin-create,
body.ark-interview-material-host .admin-review-detail {
  box-shadow:none;
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  body.ark-interview-material-host{background-image:none}
}
@media(forced-colors:active){
  body.ark-interview-material-host{background:Canvas}
}

/* Headcare reference: use the existing ARK 0.5.2 control material on real
   primary/secondary actions. Quiet links, destructive actions and row selectors
   remain flat; depth never communicates saved/selected business state. */
body.ark-interview-material-host button.ark-material-control {
  border-radius:var(--ark-material-control-radius);
}
body.ark-interview-material-host button.ark-material-control:is(.primary,.ark-action-button--primary,.ark-message-composer__send) {
  background:var(--ark-material-color-brand);
  border-color:var(--ark-material-color-brand);
  color:#fff;
}
body.ark-interview-material-host button.ark-material-control:is(.secondary,.ark-action-button--secondary) {
  border-color:var(--ark-material-content-border);
}
body.ark-interview-material-host button.ark-material-control:hover:not(:disabled),
body.ark-interview-material-host button.ark-material-control:active:not(:disabled) {
  filter:none;
  opacity:1;
}
body.ark-interview-material-host button.ark-material-control:disabled {
  background:var(--ark-dock);
  border-color:var(--ark-material-content-border);
  color:var(--muted);
  box-shadow:none;
  opacity:1;
  cursor:default;
}
@media (forced-colors: active) {
  body.ark-interview-material-host button.ark-material-control {
    background:ButtonFace;
    border-color:ButtonText;
    color:ButtonText;
  }
  body.ark-interview-material-host button.ark-material-control:disabled {
    border-color:GrayText;
    color:GrayText;
  }
}