@layer tokens, base, components, page;
@layer base {
/* Copyright 2026 Castellan U.S. All rights reserved. */

.platform-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.platform-header > a {
  display: flex;
  margin-right: auto;
}
.platform-header img {
  max-width: 100%;
  height: auto;
}
.platform-header #mode {
  font-size: 0.8rem;
  color: var(--muted);
}
.platform-header .button {
  padding: 0.5rem 0.8rem;
  min-height: 44px;
}
.platform-layout {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  max-width: 87.5rem;
  margin: auto;
  min-height: calc(100dvh - 76px);
}
#navigation {
  position: sticky;
  top: 76px;
  align-self: start;
  max-height: calc(100dvh - 76px);
  overflow-y: auto;
  padding: 1.2rem 0.65rem;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
#navigation a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem;
  min-height: 56px;
  text-decoration: none;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: var(--radius-control,6px);
}
#navigation a[aria-current="page"] {
  color: var(--ink);
  background: var(--raise);
  border-color: var(--line-strong);
}
.emblem {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex-shrink: 0;
}
.workspace-main {
  min-width: 0;
  padding: 2.2rem clamp(1rem, 4vw, 3.5rem) 7rem;
}
.workspace-main h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  margin: 0.4rem 0 1.4rem;
}
.workspace-main h2 {
  font-size: 1.6rem;
  margin: 0 0 1rem;
}
.workspace-main h3 {
  font-size: 1.2rem;
}
.workspace-main h1,
.workspace-main h2,
.workspace-main h3 {
  font-family: var(--display, serif);
  font-weight: 500;
}
.workspace-main .panel {
  padding: 1.4rem;
  margin: 0 0 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-panel,8px);
  background: var(--surface);
  min-width: 0;
}
.workspace-main label {
  display: block;
  margin: 0.8rem 0 0.35rem;
}
.workspace-main input:not([type="checkbox"]),
.workspace-main select,
.workspace-main textarea {
  width: 100%;
  min-width: 0;
  font: inherit;
  padding: 0.75rem;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  border-radius: var(--radius-control,6px);
}
.workspace-main textarea {
  resize: vertical;
  min-height: 100px;
}
.workspace-main input[type="checkbox"] {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  accent-color: var(--button);
}
.workspace-main .check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.workspace-main .button {
  margin-top: 0.7rem;
}
.workspace-main p {
  overflow-wrap: anywhere;
}
.workspace-main .actions {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  align-items: center;
}
.workspace-main .actions .button {
  flex: 0 1 auto;
}
.workspace-main .meta {
  color: var(--muted);
  font-size: 0.85rem;
}
.workspace-main .heading {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.workspace-main .heading .emblem {
  width: 52px;
  height: 52px;
}
.workspace-main .record-text {
  white-space: pre-wrap;
  margin: 0.6rem 0;
}
.workspace-main .scope-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0 0.8rem;
}
.workspace-main .secret {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: all;
  font: 0.9rem var(--mono, monospace);
  padding: 1rem;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control,6px);
}
.workspace-main .badge {
  font-size: 0.75rem;
}
.workspace-main a {
  color: var(--sky);
}
.workspace-main .split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1rem;
}
.workspace-main details {
  margin: 0.8rem 0;
}
.workspace-main summary {
  cursor: pointer;
  padding: 0.5rem 0;
}
.workspace-main .empty {
  color: var(--muted);
  padding: 0.8rem 0;
}
.workspace-main .oauth-client {
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
}
.feedback {
  position: fixed;
  bottom: 1rem;
  left: calc(50% + 90px);
  transform: translateX(-50%);
  z-index: 30;
  max-width: min(600px, 85vw);
  padding: 1rem 1.4rem;
  margin: 0;
  background: var(--raise);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control,6px);
  box-shadow: 0 8px 40px #0008;
  white-space: pre-wrap;
}
.feedback:empty {
  display: none;
}
.feedback[data-tone="error"] {
  border-color: var(--accent);
}
.feedback[data-tone="success"] {
  border-color: #8bc5a1;
}
button:disabled {
  opacity: 0.55;
  cursor: wait;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
}
@media (max-width: 40.625rem) {
  .connection-grid { gap: .6rem; }
  .connection-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 .75rem; }
  .connection-card h3, .connection-card p { grid-column: 1; }
  .connection-card p { margin: .35rem 0 0; font-size: .8rem; }
  .connection-card .button { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .platform-header {
    padding: 0.75rem;
    gap: 0.45rem;
  }
  .platform-header > a {
    max-width: 9.375rem;
  }
  .platform-header #mode {
    max-width: 3.75rem;
    line-height: 1.3;
  }
  .platform-header .button {
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
  }
  .platform-layout {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  #navigation {
    padding: 0.65rem 0.2rem;
    top: 68px;
    max-height: calc(100dvh - 68px);
  }
  #navigation a {
    padding: 0.45rem 0.1rem;
    gap: 0.2rem;
    flex-direction: column;
    font-size: 0.6rem;
    text-align: center;
    line-height: 1.1;
    min-height: 60px;
    border-radius: var(--radius-control,6px);
  }
  .emblem {
    width: 32px;
    height: 32px;
  }
  .workspace-main {
    padding: 1.25rem 0.8rem 7rem;
  }
  .workspace-main .panel {
    padding: 1rem;
  }
  .workspace-main h1 {
    font-size: 2rem;
  }
  .workspace-main h2 {
    font-size: 1.45rem;
  }
  .workspace-main .button {
    font-size: 0.9rem;
    padding: 0.7rem 0.9rem;
  }
  .workspace-main .actions .button {
    flex: 1 1 auto;
  }
  .feedback {
    left: calc(50% + 27px);
    max-width: calc(100vw - 84px);
    width: calc(100vw - 84px);
    font-size: 0.85rem;
    padding: 0.8rem;
  }
  .workspace-main .heading .emblem {
    width: 40px;
    height: 40px;
  }
  .workspace-main .scope-list {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
/* Product navigation shares the existing emblem library. */
#navigation {
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
#navigation a {
  min-height: 48px;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.3rem;
}
.metric {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.2rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-panel,8px);
  text-decoration: none;
}
.metric strong {
  font: 2rem var(--display);
}
.metric span {
  color: var(--muted);
  font-size: 0.85rem;
}
.workspace-name {
  color: var(--muted);
  margin-top: -0.6rem;
  margin-bottom: 1.5rem;
}
.workspace-main dt {
  font-weight: 600;
  margin-top: 1rem;
}
.workspace-main dd {
  margin: 0.25rem 0;
  color: var(--muted);
}
.workspace-main summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  list-style: none;
}
.workspace-main summary::-webkit-details-marker {
  display: none;
}
.workspace-main summary::before {
  content: "›";
  display: inline-block;
  flex-shrink: 0;
}
.workspace-main details[open] > summary::before {
  transform: rotate(90deg);
}
.control-state::before {
  content: "✓ ";
  color: #a8d0b3;
}
@media (max-width: 40.625rem) {
  #navigation a {
    min-height: 54px;
    padding: 0.4rem 0.1rem;
  }
  .metrics {
    gap: 0.45rem;
  }
  .metric {
    padding: 0.8rem 0.5rem;
  }
  .metric strong {
    font-size: 1.65rem;
  }
  .metric span {
    font-size: 0.7rem;
  }
}
/* Content panes share the actual header height and dynamic viewport. */
html {
  height: 100%;
  overflow: hidden;
}
body {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
.platform-header {
  position: relative;
  top: auto;
  min-width: 0;
}
.platform-layout {
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  grid-template-columns: 184px minmax(0, 1fr);
}
#navigation {
  position: relative;
  top: auto;
  align-self: stretch;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  scrollbar-gutter: stable;
  scrollbar-color: var(--line-strong) transparent;
}
#navigation a {
  flex-shrink: 0;
}
#navigation a:hover {
  color: var(--ink);
  background: var(--raise);
}
.workspace-main {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-color: var(--line-strong) transparent;
  overscroll-behavior-y: contain;
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}
#view {
  max-width: 60.0rem;
  margin-inline: auto;
}
.workspace-main h1:focus {
  outline: none;
}
.workspace-main .page-intro {
  color: var(--muted);
  margin: 0 0 1.5rem;
  max-width: 65ch;
}
.workspace-main .panel > :last-child {
  margin-bottom: 0;
}
.workspace-main details.panel > .panel {
  border: 0;
  padding: 1rem 0 0;
  margin: 0;
  background: transparent;
}
.workspace-main details.panel > summary {
  font-size: 1.05rem;
  font-weight: 600;
}
.workspace-main details.panel > summary .emblem {
  width: 32px;
  height: 32px;
}
.workspace-main .record-card {
  padding-block: 1rem;
  border-top: 1px solid var(--line);
}
.record-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  align-items: end;
  margin-bottom: 1rem;
}
.record-filters > label {
  flex: 1 1 170px;
}
.record-filters > p {
  flex-basis: 100%;
  margin: 0;
}
.next-steps {
  list-style: none;
  padding: 0;
  margin: 0;
}
.next-steps li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
}
.next-steps li + li {
  border-top: 1px solid var(--line);
}
.next-steps .emblem {
  width: 40px;
  height: 40px;
  margin-top: 0.25rem;
}
.next-steps h3 {
  margin: 0 0 0.25rem;
}
.next-steps p {
  margin: 0 0 0.5rem;
}
.workspace-footer {
  max-width: 60.0rem;
  margin: 1.5rem auto 0;
  color: var(--muted);
}
.workspace-footer details.panel {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 1rem 0;
}
.workspace-footer details.panel > summary {
  font-size: 0.85rem;
  font-weight: 400;
}
.workspace-footer .emblem {
  width: 24px !important;
  height: 24px !important;
}
.feedback {
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: calc(50% + 92px);
  pointer-events: none;
}
@media (max-width: 40.625rem) {
  .platform-header {
    padding: 0.55rem 0.8rem;
    min-height: 60px;
  }
  .platform-header > a {
    max-width: 9.625rem;
  }
  .platform-layout {
    grid-template-columns: 66px minmax(0, 1fr);
  }
  #navigation {
    padding-top: 0.6rem;
    gap: 0.55rem;
  }
  #navigation a {
    min-height: 63px;
    font-size: 0.65rem;
    line-height: 1.2;
  }
  #navigation .emblem {
    width: 30px;
    height: 30px;
  }
  .workspace-main {
    padding: 1rem 0.75rem max(2rem, env(safe-area-inset-bottom));
  }
  .workspace-main .heading {
    gap: 0.65rem;
  }
  .workspace-main .heading > .emblem {
    width: 32px;
    height: 32px;
  }
  .workspace-main h1 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }
  .workspace-main .panel {
    padding: 1rem;
  }
  .workspace-main h2 {
    font-size: 1.35rem;
  }
  .metrics {
    gap: 0.4rem;
  }
  .metric {
    padding: 0.65rem 0.4rem;
  }
  .metric strong {
    font-size: 1.5rem;
  }
  .metric span {
    font-size: 0.7rem;
  }
  .next-steps li {
    gap: 0.65rem;
  }
  .next-steps .emblem {
    width: 28px;
    height: 28px;
  }
  .workspace-main .secret {
    font-size: 0.78rem;
    padding: 0.75rem;
  }
  .feedback {
    left: calc(50% + 33px);
    max-width: calc(100vw - 90px);
    width: calc(100vw - 90px);
  }
}

/* Native checkboxes must not inherit the shared text-field height. */
.workspace-main input[type="checkbox"] {
  min-height: 21px;
  padding: 0;
  margin: 0;
}
.workspace-main .check {
  min-height: 44px;
  align-items: center;
  margin: 0.25rem 0;
}
.skip {
  z-index: 40;
}
/* Watchtower actions and alerts share the existing night palette. */
#watchtower-alerts {
  position: relative;
  min-width: 2.75rem;
  flex-shrink: 0;
  padding: 0.4rem;
}
#watchtower-alerts img {
  width: 24px;
  height: 24px;
}
#watchtower-count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 1.25rem;
  padding: 0 4px;
  border-radius: var(--radius-panel,8px);
  background: var(--accent);
  color: var(--bg);
  font-size: 0.7rem;
  font-weight: 700;
}
.watchtower-controls {
  margin-bottom: 1rem;
}
.watchtower-controls label {
  flex: 1 1 150px;
}
.action-card h3 {
  margin: 0.8rem 0 0.35rem;
  overflow-wrap: anywhere;
}
.action-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.action-status {
  font-size: 0.8rem;
  color: var(--muted);
}
.action-sensitive {
  color: #ffb3bf;
  background: #6d293b66;
  border: 1px solid #bf6377;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-control,6px);
}
.action-unread {
  border-left: 4px solid var(--accent) !important;
}
.action-byline {
  margin: 0.2rem 0;
}
.status-failed {
  color: #ffb3bf;
}
.status-completed {
  color: #a8d0b3;
}
.coverage-row + .coverage-row {
  border-top: 1px solid var(--line);
  padding-top: 1rem;
  margin-top: 1rem;
}
@media (max-width: 22.5rem) {
  .platform-header > a:first-child {
    max-width: 7.75rem;
  }
}

#watchtower-alerts {
  margin-right: 0;
}
/* Task setup, memory history and portable handoffs share the workspace palette. */
.record-picker { max-height: 18rem; overflow-y: auto; overscroll-behavior: contain; padding: .5rem; border: 1px solid var(--line, #675b70); border-radius: var(--radius-control,6px); }
.record-picker .check { align-items: flex-start; }
.record-picker .check span { overflow-wrap: anywhere; }
.handoff-preview { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 28rem; overflow-y: auto; font: inherit; }
#session-recovery { max-width: min(32rem, calc(100vw - 2rem)); color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-top: 4px solid var(--keepPrimary); border-radius: var(--radius-panel,8px); padding: 1.5rem; }
#session-recovery::backdrop { background: rgba(16,11,24,.74); }
#session-recovery .button { margin: .5rem .25rem .5rem 0; }
.next-steps [aria-label="Complete"] { color: #a6d5ae; }
.access-preview:not(:empty) { max-height: 24rem; overflow-y: auto; overscroll-behavior: contain; }
.record-picker .check span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
/* Squire controls stay inside the existing workspace rooms. */
#squire-dialog { width: min(44rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; box-sizing: border-box; padding: 1.25rem; border: 1px solid var(--line-strong); border-top: 4px solid var(--keepPrimary); border-radius: var(--radius-panel,8px); color: var(--ink); background: var(--surface); }
#squire-dialog::backdrop { background: rgba(16,11,24,.74); }
#squire-dialog .panel { margin: 1rem 0; }
#squire-dialog .record-text { white-space: pre-wrap; overflow-wrap: anywhere; }
#squire-dialog input:not([type=checkbox]), #squire-dialog textarea, #squire-dialog select { box-sizing: border-box; max-width: 100%; width: 100%; }
#squire-dialog label { display: block; margin: .75rem 0; }
#squire-dialog .check { display: flex; }
#squire-dialog > button, #squire-dialog .button { margin: .5rem .25rem .5rem 0; }
.squire-card .badge { display: inline-block; }

.record-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .5rem 1rem; }
.review-card { padding: 1rem 0; border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.review-card > .check { min-height: 44px; }
.selected-review { max-height: 16rem; overflow-y: auto; overflow-wrap: anywhere; }
.audience { display: inline-block; border: 1px solid var(--line); border-radius: var(--radius-control,6px); padding: .2rem .5rem; font-size: .8rem; }
.audience.private { color: #e6cae8; }
.connection-steps { padding-left: 1.3rem; }
.connection-steps li { margin: .65rem 0; }
.connection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; margin: 1rem 0; }
.connection-card { display: flex; flex-direction: column; align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius-panel,8px); padding: 1rem; min-width: 0; }
.connection-card h3 { margin: 0; font-size: 1.1rem; }
.connection-card .button { margin-top: auto; }
.connection-setup { padding: 1rem 0; border-top: 1px solid var(--line); scroll-margin: 1rem; }
.connection-setup .secret { overflow-wrap: anywhere; white-space: pre-wrap; }
.connection-setup input { width: 100%; box-sizing: border-box; }
[hidden] { display: none !important; }
#permission-error:not(:empty) { color: #ffb3bf; border-left: 3px solid #ffb3bf; padding: .6rem; }
.workspace-main .actions > a:not(.button) { display: inline-flex; align-items: center; min-height: 44px; }
/* Beta workspace: full-width phone content and one persistent bottom navigation. */
body > .night { opacity: .18; }
.workspace-main .panel { background: color-mix(in srgb, var(--surface) 97%, #16121c); }
.workspace-main .field-help { color: var(--muted); line-height: 1.6; margin: .75rem 0 1.25rem; max-width: 65ch; }
.workspace-main input::placeholder, .workspace-main textarea::placeholder { color: var(--muted); opacity: .85; }
.workspace-main details > :not(summary) { margin-top: 1rem; }
.workspace-main .button { white-space: normal; line-height: 1.4; min-height: 46px; }
.workspace-main .panel .panel { border: 0; padding: 1rem 0; background: transparent; }
.workspace-main .squire-guide { display: flex; align-items: flex-start; gap: 1.25rem; max-width: 60.0rem; margin: 0 auto 1.5rem; border-color: #69b9a7; }
.squire-figure { width: 72px; flex: 0 0 72px; }
.squire-figure svg { display: block; width: 100%; height: auto; overflow: hidden; image-rendering: pixelated; }
.squire-guide-copy { min-width: 0; }
.squire-guide-copy h2 { margin: 0 0 .6rem; }
.squire-guide-copy p { margin: 0 0 1rem; }
.squire-guide-copy .meta { color: #b7ddce; }
.squire-frames { animation: guide-squire-strip var(--squire-duration) steps(var(--squire-frames)) infinite; }
@keyframes guide-squire-strip { to { transform: translateX(var(--squire-strip-end)); } }
@media (max-width: 40.625rem) {
  .platform-layout { position: relative; display: flex; flex-direction: column; }
  #navigation { position: absolute; inset: auto 0 0; z-index: 15; width: 100%; height: auto; max-height: none; display: grid; grid-template-columns: repeat(var(--room-count,5), minmax(0,1fr)); gap: 0; padding: .35rem .25rem max(.35rem, env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--line-strong); background: var(--surface); scrollbar-gutter: auto; }
  #navigation a { min-height: 58px; padding: .25rem .1rem; gap: .2rem; font-size: .68rem; }
  #navigation .emblem { width: 26px; height: 26px; }
  .workspace-main { width: 100%; flex: 1; padding: 1.25rem 1rem calc(6.5rem + env(safe-area-inset-bottom)); scrollbar-gutter: auto; }
  .workspace-main h1 { font-size: 2rem; }
  .workspace-main .panel { padding: 1.2rem; margin-bottom: 1.25rem; }
  .workspace-main .actions { flex-direction: column; align-items: stretch; gap: .6rem; }
  .workspace-main .actions .button { flex: auto; width: 100%; margin-top: 0; }
  .workspace-main .squire-guide { gap: .75rem; padding: 1rem; }
  .squire-figure { width: 54px; flex-basis: 54px; }
  .squire-guide-copy h2 { font-size: 1.3rem; }
  .squire-guide-copy p { font-size: .9rem; }
  .watchtower-controls { display: block; }
  .watchtower-controls label { margin-bottom: 1rem; }
  .metrics { gap: .6rem; }
  .metric { padding: .8rem .6rem; }
  .metric span { font-size: .75rem; }
  .feedback { left: 50%; width: calc(100vw - 2rem); max-width: 36rem; bottom: calc(5rem + env(safe-area-inset-bottom)); }
  #session-recovery .button { width: 100%; margin: 1rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  .squire-figure * { animation: none !important; }
}
.workspace-main .field-hint { display: block; color: var(--muted); font-size: .85rem; font-weight: 400; margin: .35rem 0 .6rem; line-height: 1.5; }

/* Shared compact lists and provider identity. */
.provider-logo { width: 36px; height: 36px; padding: 5px; background: #fff; border-radius: var(--radius-control,6px); object-fit: contain; flex: 0 0 36px; box-sizing: border-box; }
.provider-generic { display: inline-grid; place-items: center; color: #20202a; font-size: .8rem; }
.provider-heading, .connection-brand { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.provider-heading > :last-child { min-width: 0; overflow-wrap: anywhere; }
.connection-brand { margin: 1rem 0; }
.connection-card .provider-heading { grid-column: 1; }
.connection-card .provider-logo { width: 28px; height: 28px; flex-basis: 28px; padding: 4px; }
.record-toolbar { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; }
.record-toolbar .button { margin: 0; }
.table-scroll { width: 100%; overflow-x: auto; }
.summary-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .9rem; text-align: left; }
.summary-table th { font: 600 .75rem var(--text); color: var(--muted); padding: .65rem .5rem; border-bottom: 1px solid var(--line-strong); }
.summary-table td { padding: .8rem .5rem; vertical-align: middle; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.summary-table tr:last-child td { border-bottom: 0; }
.summary-table th:last-child, .summary-table td:last-child { text-align: right; }
.records-table th:first-child { width: 44%; }
.summary-table th:last-child { width: 88px; }
.summary-table .button { padding: .5rem .65rem; margin: 0; min-height: 40px; font-size: .8rem; }
.record-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; line-height: 1.45; }
.mobile-record-type { display: none; }
.sharing-state, .access-allowed, .access-blocked { font-size: .8rem; }
.sharing-state.private, .access-blocked { color: #eab9c1; }
.sharing-state.shared, .access-allowed { color: #a6d5ae; }
.connections-table th:first-child { width: 26%; }
.access-table th:last-child { width: 120px; }
.access-allowed { white-space: nowrap; }
.connection-inspection { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1.25rem; scroll-margin: 1rem; }
.connection-inspection .notice { margin-top: .8rem; }
.connection-test { margin: 1rem 0; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-panel,8px); }
.connection-test h4 { margin: 0 0 .5rem; }
.record-dialog { width: min(42rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; padding: 1.25rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-panel,8px); }
.record-dialog::backdrop { background: rgba(16,11,24,.74); }
.workspace-main .record-dialog > .panel { padding: 0; margin: 0 0 1rem; border: 0; background: transparent; }
.record-dialog textarea { min-height: 10rem; }
.record-dialog .actions { flex-direction: row; align-items: center; }
.record-dialog .actions .button { width: auto; flex: 0 1 auto; }
.record-sharing { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1rem 0; margin: 1rem 0; }
.auth-mark { display: block; border-radius: var(--radius-panel,8px); margin-bottom: 1rem; }
@media (max-width: 40.625rem) {
  .summary-table .table-secondary { display: none; }
  .summary-table { font-size: .8rem; }
  .summary-table th, .summary-table td { padding: .65rem .3rem; }
  .summary-table th:last-child { width: 68px; }
  .records-table th:first-child { width: auto; }
  .records-table th:nth-child(3) { width: 76px; }
  .connections-table th:first-child { width: auto; }
  .connections-table th:nth-child(3) { width: 65px; }
  .access-table th:last-child { width: 92px; }
  .connections-table .provider-heading { align-items: flex-start; gap: .4rem; }
  .connections-table .provider-logo { width: 24px; height: 24px; flex-basis: 24px; padding: 3px; }
  .summary-table .button { font-size: .75rem; padding: .45rem .5rem; }
  .mobile-record-type { display: block; margin-top: .35rem; font-size: .7rem; color: var(--muted); }
}

/* Authorization is a focused page without the workspace navigation or tour. */
.consent-flow #navigation, .consent-flow #workspace-footer, .consent-flow .squire-guide, .consent-flow > .night { display: none !important; }
.consent-flow .platform-layout { display: block; max-width: none; }
.consent-flow .workspace-main { width: 100%; height: 100%; overflow-y: auto; padding: 1.5rem 1rem; scrollbar-gutter: auto; }
.consent-flow #view { max-width: 36rem; margin: 0 auto; }
.consent-flow .consent-card { padding: 1.5rem; margin: 0; }
.consent-identity { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.consent-identity > img:first-child { border-radius: var(--radius-control,6px); }
.consent-identity .provider-logo { width: 48px; height: 48px; flex-basis: 48px; padding: 7px; }
.consent-identity > span { color: var(--muted); }
.consent-flow h1 { font-size: clamp(1.6rem, 5vw, 2rem); margin: 0 0 .7rem; overflow-wrap: anywhere; }
.consent-intro { color: var(--muted); margin: 0 0 .75rem; line-height: 1.5; }
.consent-destination { font-size: .8rem; margin-bottom: 1.2rem; color: var(--ink); }
.consent-permissions { margin: 0; padding: 0; border: 0; }
.consent-permissions legend { font-weight: 600; margin-bottom: .6rem; }
.consent-flow .scope-list { display: grid; grid-template-columns: 1fr; gap: .5rem; }
.consent-flow .scope-list .check { padding: .75rem; border: 1px solid var(--line); border-radius: var(--radius-panel,8px); margin: 0; align-items: center; min-height: 64px; }
.consent-flow .scope-list .check:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--button) 7%, var(--surface)); }
.scope-help { display: block; color: var(--muted); font-size: .8rem; font-weight: 400; margin-top: .25rem; line-height: 1.4; }
.consent-flow .meta { line-height: 1.5; }
.consent-flow .consent-details { border-top: 1px solid var(--line); padding-top: .4rem; }
.consent-actions { position: sticky; bottom: -1.5rem; display: flex; gap: .75rem; margin: 1rem -1.5rem -1.5rem; padding: 1rem 1.5rem max(1rem, env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-panel,8px) var(--radius-panel,8px); }
.consent-actions .button { margin: 0; flex: 1; }
.consent-actions .button.quiet { flex: 0 0 auto; }
.consent-flow #permission-error:empty { display: none; }
@media (max-width: 40.625rem) {
  .consent-flow .platform-header > a { max-width: 11.25rem; }
  .consent-flow .workspace-main { padding: 1rem .75rem; }
  .consent-flow .consent-card { padding: 1.1rem; }
  .consent-actions { bottom: -1rem; margin: 1rem -1.1rem -1.1rem; padding: .85rem 1.1rem max(.85rem, env(safe-area-inset-bottom)); }
}

}

@layer page {
 .platform-header {border-top:2px solid var(--keepPrimary);background:linear-gradient(100deg,rgba(104,26,47,.13),rgba(83,57,123,.12)),var(--surface)}
 #navigation {background:linear-gradient(180deg,rgba(104,26,47,.09),rgba(83,57,123,.08)),var(--surface)}
 .record-tabs {display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
 .record-tabs a {display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1rem;border-bottom:2px solid transparent;text-decoration:none;color:var(--muted)}
 .record-tabs [aria-current] {border-color:var(--keepPrimary,#e0646f);color:var(--ink)}
 .request-badge {margin-left:auto}
 .request-art {height:8rem;display:flex;align-items:center;justify-content:center;background:linear-gradient(130deg,rgba(104,26,47,.18),rgba(83,57,123,.15));border-radius:var(--radius-panel,8px)}
 .request-art .emblem {width:64px;height:64px}
 .connection-checklist {padding-left:1.4rem} .connection-checklist li {padding:.5rem 0}.connection-checklist a {display:block}
 .provider-cards>details {grid-column:1/-1}.provider-cards>details>.provider-card {margin-top:.75rem}
 dialog {max-width:min(42rem,calc(100vw - 2rem));max-height:90dvh;overflow:auto;border:1px solid var(--line);border-radius:var(--radius-panel,8px);background:var(--surface);color:var(--ink);padding:1.5rem}
 dialog::backdrop {background:rgba(8,6,12,.75)}
 @media(max-width:64rem) {.platform-layout {grid-template-columns:11rem minmax(0,1fr)}.workspace-main {padding:1.25rem}.table-secondary {display:none}}
 @media(max-width:44rem) {.platform-layout {display:block}#navigation {position:static;flex-direction:row;flex-wrap:wrap;max-height:none;padding:.5rem}#navigation a {flex:1 1 5rem;justify-content:center;padding:.5rem;gap:.3rem}#navigation .emblem {width:24px;height:24px}.workspace-main {padding:1rem}.platform-header {padding:.75rem 1rem}.platform-header img {max-width:10rem}}
}

@layer page {
  .connections-table th:last-child {width:7.5rem}
  .connections-table .table-actions {overflow-wrap:normal;word-break:normal}
  .connections-table .table-actions .button {
    min-inline-size:6.25rem;
    max-inline-size:100%;
    min-height:44px;
    overflow-wrap:normal;
    word-break:normal;
    white-space:normal;
  }
}

/* Shared night workspace craft. Page layer wins over the legacy base rules. */
@layer page {
 .workspace-main h1 {font:500 var(--displayLg)/1.15 var(--display);margin-block:0 1.25rem}
 .workspace-main h2,dialog h2 {font:500 var(--displayMd)/1.25 var(--display)}
 .workspace-main h3,dialog h3 {font:500 var(--displaySm)/1.35 var(--display)}
 .workspace-main .meta,.workspace-main .field-help {font-size:var(--caption);line-height:1.6}
 .workspace-main :is(input:not([type=checkbox],[type=radio]),select,textarea),dialog :is(input:not([type=checkbox],[type=radio]),select,textarea) {min-height:44px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--sunk);font:400 var(--body)/1.6 var(--text)}
 .workspace-main :is(.check,label:has(>input[type=checkbox]),label:has(>input[type=radio])) {min-height:44px;align-items:center}
 :is(.workspace-main,dialog) :focus-visible {outline:3px solid var(--sky);outline-offset:3px}
 .platform-header {background:linear-gradient(110deg,rgba(128,36,74,.09),rgba(75,39,112,.08)),var(--surface)}
 #navigation {background:linear-gradient(180deg,rgba(128,36,74,.06),rgba(75,39,112,.05)),var(--surface)}
 #navigation a[aria-current=page] {background:color-mix(in srgb,var(--keepPrimary) 12%,var(--surface));box-shadow:inset 3px 0 var(--keepPrimary);border-color:color-mix(in srgb,var(--keepPrimary) 42%,var(--line));color:var(--ink)}
 .cs-panel,.panel,.connection-card,.record-card {border-radius:var(--radius-panel)}
 :is(dialog,#squire-dialog,#session-recovery,.record-dialog) {border:1px solid var(--line-strong);border-top:4px solid var(--keepPrimary);border-radius:var(--radius-panel);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-lift-lg);padding:var(--space-5)}
 :is(dialog,#squire-dialog,#session-recovery,.record-dialog)::backdrop {background:rgba(16,11,24,.74)}
 dialog {position:fixed}
 .dialog-close {position:sticky;top:0;float:right;display:grid;place-items:center;width:44px;height:44px;min-height:44px;margin:0 0 8px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-control);color:var(--muted);background:var(--surface);z-index:2;cursor:pointer}
 .dialog-close:hover {color:var(--ink);background:var(--raise)}
 .summary-table {font-variant-numeric:tabular-nums;border-collapse:separate;border-spacing:0}
 .summary-table th {position:sticky;top:0;z-index:1;background:var(--surface);font:600 var(--caption)/1.4 var(--text);padding:12px 10px}
 .summary-table td {padding:14px 10px}
 .summary-table tbody tr:hover,.summary-table tbody tr:focus-within {background:color-mix(in srgb,var(--keepPrimary) 6%,var(--surface))}
 .summary-table tr[aria-selected=true],.summary-table tr:has(input[type=checkbox]:checked) {background:var(--sealSoft)}
 .summary-table .button {min-height:44px;min-width:44px;border-radius:var(--radius-control)}
 .summary-table .table-actions {padding-inline-start:12px}
 .summary-table--compact td,.summary-table--compact th {padding-block:8px}
 .table-scroll {border:1px solid var(--line);border-radius:var(--radius-panel);scroll-padding-top:48px}
 .record-tabs {display:flex;gap:var(--space-1);padding:var(--space-1);background:var(--raise);border:1px solid var(--line);border-radius:var(--radius-panel);width:fit-content;max-width:100%;flex-wrap:wrap}
 .record-tabs a {min-height:44px;padding:10px 14px;border:0;border-radius:var(--radius-control);font:600 var(--ui)/1.4 var(--text);color:var(--muted)}
 .record-tabs [aria-current=page] {background:var(--keepPrimary);color:var(--on-button);box-shadow:var(--shadow-lift-sm)}
 .record-tabs a:hover:not([aria-current]) {color:var(--ink);background:var(--surface)}
 .cs-panel--error {border-inline-start:4px solid var(--denied);background:var(--deniedSoft)}
 .empty-state {display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);padding:var(--space-5);border:1px dashed var(--line-strong);border-radius:var(--radius-panel)}
 .empty-state>.emblem {width:56px;height:56px}
 .empty-state p {margin:0;max-width:55ch;color:var(--muted)}
 .empty-state .button {margin:0}
 .loading-skeleton {display:grid;gap:var(--space-3);padding:var(--space-4);width:100%;box-sizing:border-box}
 .loading-skeleton span {display:block;height:20px;border-radius:var(--radius-control);background:var(--raise)}
 .loading-skeleton span:nth-child(2) {width:84%}.loading-skeleton span:nth-child(3) {width:62%}
 .feedback {pointer-events:auto;display:flex;align-items:center;gap:var(--space-3);padding:12px 12px 12px 18px;border-radius:var(--radius-panel);box-shadow:var(--shadow-toast);opacity:0;transform:translateX(-50%) translateY(8px);max-width:min(38rem,calc(100vw - 2rem));white-space:normal}
 .feedback:empty {display:none}.feedback[data-visible=true] {opacity:1;transform:translateX(-50%) translateY(0)}
 .feedback[data-tone=success] {background:var(--okSoft);border-color:var(--ok);color:var(--ink)}
 .feedback[data-tone=error] {background:var(--deniedSoft);border-color:var(--denied);color:var(--ink)}
 .feedback-message {min-width:0;overflow-wrap:anywhere}
 .feedback-dismiss {display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;color:inherit;border:1px solid currentColor;border-radius:var(--radius-control);background:transparent;cursor:pointer}
 .connections-table .table-actions {container-type:inline-size}
 .connection-catalog,.connection-grid,.record-cards {container-type:inline-size}
 .connection-card,.cs-panel--request {container-type:inline-size}
 @container (max-width:420px) {
  .connection-card .actions,.connection-card .connection-actions,.cs-panel--request .actions {display:flex;flex-direction:column;align-items:stretch}
  .connection-card .actions .button {width:100%;margin-inline:0}
  .connections-table .table-actions .button {display:block;width:100%;margin-block:4px}
 }
 @media(max-width:650px) {
  #navigation {position:fixed;inset:auto 0 0;z-index:15;display:grid;grid-template-columns:repeat(var(--room-count,5),minmax(0,1fr));gap:0;padding:4px 4px max(4px,env(safe-area-inset-bottom));border:0;border-top:1px solid var(--line-strong)}
  #navigation a {flex-direction:column;min-width:0;min-height:58px;padding:4px 1px;gap:3px;font-size:.68rem}
  .workspace-main {padding-bottom:calc(6.5rem + env(safe-area-inset-bottom))}
  #navigation a[aria-current=page] {box-shadow:inset 0 3px var(--keepPrimary)}
  #navigation a[aria-current=page]>.emblem {scale:1.06}
  .summary-table td,.summary-table th {padding-inline:6px}
  .record-tabs {width:auto}.record-tabs a {flex:1;justify-content:center;padding-inline:10px;font-size:var(--caption)}
 }
}
@supports (color:oklch(50% .1 30)) {
 @layer page {
  #navigation a[aria-current=page] {background:color-mix(in oklch,var(--keepPrimary-oklch) 12%,var(--surface-oklch))}
  .summary-table tbody tr:hover {background:color-mix(in oklch,var(--keepPrimary-oklch) 6%,var(--surface-oklch))}
 }
}
@media(prefers-reduced-motion:no-preference) {
 @layer page {
  .feedback {transition:opacity var(--duration-med) var(--ease-out),transform var(--duration-med) var(--ease-out)}
  :is(.connection-card,.record-card,.mode-card,.cs-panel--interactive) {transition:transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}
  .loading-skeleton span {background:linear-gradient(100deg,var(--raise) 30%,var(--surface) 50%,var(--raise) 70%);background-size:250% 100%;animation:cs-shimmer 1.6s linear infinite}
 }
 @media(hover:hover) { @layer page { :is(.connection-card,.record-card,.cs-panel--interactive):hover {transform:translateY(-1px);box-shadow:var(--shadow-lift-sm)} } }
 ::view-transition-group(workspace-room) {animation-duration:var(--duration-med);animation-timing-function:var(--ease-out)}
}
@keyframes cs-shimmer {to{background-position:-250% 0}}
:root {view-transition-name:none}
#view {view-transition-name:workspace-room}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important} ::view-transition-group(*) {animation:none!important}}

@layer page {
 .cs-select {position:relative;display:block;min-width:0;max-width:100%}
 .cs-select-native {position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:0!important;overflow:hidden!important;clip-path:inset(50%)!important;opacity:0!important;pointer-events:none}
 .cs-select-trigger {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;width:100%;padding:12px 14px;background:var(--sunk);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-control);font:400 var(--body)/1.6 var(--text);text-align:left;cursor:pointer}
 .cs-select-value {min-width:0;overflow-wrap:anywhere}
 .cs-select-trigger[aria-expanded=true] {border-color:var(--sky);box-shadow:var(--shadow-lift-sm)}
 .cs-select-trigger:disabled {opacity:.55;cursor:not-allowed}
 .cs-select-menu {position:fixed;inset:auto;margin:0;padding:6px;box-sizing:border-box;max-width:calc(100vw - 24px);overflow:auto;overscroll-behavior:contain;background:var(--raise);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--radius-panel);box-shadow:var(--shadow-lift-md);z-index:100}
 .cs-select-menu[hidden] {display:none!important}
 .cs-select-option {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:10px 12px;box-sizing:border-box;border-radius:var(--radius-control);font:400 var(--body)/1.5 var(--text);cursor:pointer}
 .cs-select-option .chrome-icon {color:var(--keepPrimary);visibility:hidden}
 .cs-select-option[aria-selected=true] .chrome-icon {visibility:visible}
 .cs-select-option[data-active=true] {background:color-mix(in srgb,var(--keepPrimary) 12%,var(--surface));box-shadow:inset 3px 0 var(--keepPrimary)}
 .cs-select-option[aria-disabled=true] {opacity:.55;cursor:not-allowed}
 @supports(position-anchor:--test) {.cs-select-menu {top:anchor(bottom);left:anchor(left)}}
}

@layer page {
 .table-scroll {max-height:min(65dvh,42rem);overflow:auto}
 .summary-table time,.summary-table [data-numeric] {font-variant-numeric:tabular-nums}
}

.squire-card .heading { align-items: center; }
.squire-card .squire-figure { width: 54px; flex-basis: 54px; }

.squot-player { display: grid; justify-items: start; gap: .5rem; }
.squot-player .squire-figure { width: 112px; flex-basis: 112px; }
.squire-card .squot-player .squire-figure { width: 84px; flex-basis: 84px; }
.squot-player > button { margin: 0; padding: .25rem .5rem; min-height: 44px; font-size: .85rem; }

/* Account portraits remain separate from records and agent context. */
.workspace-main .profile-settings {margin-block:1.5rem;padding-block:1rem;border-block:1px solid var(--line)}
.workspace-main .profile-picture {display:block;object-fit:contain;image-rendering:pixelated;margin-bottom:1rem}
.workspace-main .profile-picture.photo {object-fit:cover;image-rendering:auto;border-radius:50%}
.workspace-main .royal-choices {display:flex;flex-wrap:wrap;gap:.5rem;padding:.75rem;margin:1rem 0;border:1px solid var(--line);border-radius:8px}
.workspace-main .profile-choice {display:flex;flex-direction:column;align-items:center;gap:.375rem;padding:.5rem;min-width:5rem;border:1px solid transparent;border-radius:8px;font-size:.8125rem;cursor:pointer}
.workspace-main .profile-choice:has(:checked) {border-color:var(--accent,#e0646f);background:var(--surface)}
.workspace-main .profile-choice img {object-fit:contain;image-rendering:pixelated}
.workspace-main .profile-choice input {width:20px;height:20px;margin:0}
.workspace-main .profile-consent {display:flex;align-items:center;gap:.75rem;margin-block:1rem}
.workspace-main .profile-consent input {width:20px;height:20px;flex:none}
.workspace-main #profile-photo {max-width:100%;margin-block:.5rem}

@media(max-width:650px){#navigation a>span{overflow-wrap:anywhere;font-size:.625rem}}

/* Feedback composes only owner-written text, without attaching account data. */
.platform-header #product-feedback {margin-left:auto;white-space:nowrap}
.product-feedback-dialog {width:min(38rem,calc(100vw - 2rem));height:fit-content!important;max-height:calc(100dvh - 2rem);padding:1.25rem!important}
.product-feedback-dialog h2 {margin-top:0}
.product-feedback-dialog label {display:block;margin:.8rem 0}
.product-feedback-dialog .check {display:flex;gap:.6rem}
.product-feedback-dialog textarea,.product-feedback-dialog select {width:100%;box-sizing:border-box}
.product-feedback-dialog .actions {flex-wrap:wrap}
@media(max-width:420px){.platform-header {gap:4px;padding-inline:12px}.platform-header > a {min-width:0}.platform-header img {max-width:140px}.platform-header .button {font-size:.75rem;padding:.5rem}.product-feedback-dialog .actions .button {width:auto}}

.feedback-courier-heading {display:flex;align-items:center;gap:1rem;margin-block:1rem}
.feedback-courier {width:64px;height:72px;flex:none}
.feedback-courier svg {width:100%;height:100%;overflow:hidden;image-rendering:pixelated}
.feedback-courier-name {font:500 1.2rem Georgia,serif}
.feedback-issue {display:inline-flex;align-items:center;min-height:44px;margin-top:1rem}
@media(prefers-reduced-motion:reduce){.feedback-courier *{animation:none!important}}

/* Calm operational surfaces; character frame timing remains pixel-authored. */
@layer page {
 .platform-header {background:color-mix(in srgb,var(--surface) 96%,transparent);box-shadow:0 1px 0 var(--edge-light)}
 #navigation {box-shadow:inset -1px 0 0 var(--edge-light)}
 .workspace-main h1,.workspace-main h2 {letter-spacing:-.02em}
 .workspace-main>.panel,.workspace-main #view>.panel,.connection-card,.record-card {box-shadow:inset 0 1px 0 var(--edge-light)}
 #navigation a[aria-current=page] {box-shadow:inset 2px 0 0 var(--keepPrimary)}
 .keep-collection-card {box-shadow:inset 0 1px 0 var(--edge-light)}
}
@media(prefers-reduced-motion:no-preference){
 ::view-transition-group(workspace-room) {animation-duration:var(--duration-enter);animation-timing-function:var(--ease-settle)}
 .keep-wheel-modal[open] {animation:cs-surface-arrive var(--duration-enter) var(--ease-settle)}
}

.castelang-memory-dialog {width:min(38rem,calc(100vw - 2rem));height:fit-content!important;max-height:calc(100dvh - 2rem);padding:1.25rem!important}
.castelang-memory-dialog h2 {margin-top:0}
.castelang-memory-dialog .actions {gap:.75rem;flex-wrap:wrap;margin-top:1rem}
/* A compact guide keeps phone tasks visible and preserves room progress. */
.workspace-main .squire-guide { display:block; padding:.8rem 1rem; }
.squire-guide-details > summary { min-height:44px; display:list-item; align-content:center; cursor:pointer; }
.squire-guide-body { display:flex; align-items:flex-start; gap:1rem; padding-top:.75rem; }
@media (max-width:650px) {
  .squire-guide-body .squire-figure { width:44px; flex-basis:44px; }
  .workspace-main .squire-guide { margin-bottom:.75rem; padding:.4rem .75rem; }
}

/* Character dialogue stays separate from task output. */
.workspace-main .squot-portrait-button { display:grid; place-items:center; padding:.25rem; margin:0; min-width:44px; min-height:44px; background:transparent; border:1px solid transparent; border-radius:.3rem; color:inherit; cursor:pointer; }
.workspace-main .squot-portrait-button:hover { background:#342c38; border-color:#bca572; }
.workspace-main .squot-portrait-button:focus-visible { outline:3px solid #e8cd91; outline-offset:3px; }
.squot-speech { font-size:.9rem; line-height:1.55; color:#f3e9df; background:#201c26; border:1px solid #99835a; border-left:3px solid #d6b976; border-radius:.25rem; padding:.65rem .85rem; margin:.4rem 0; max-width:36rem; overflow-wrap:anywhere; }
.squot-speech[hidden] { display:none; }
.keep-wheel-center > .squot-portrait-button { width:100%; height:100%; border-radius:50%; }
.keep-wheel-modal > .squot-speech { margin:.25rem auto .8rem; }
.squot-player:has(.squot-speech:not([hidden])) { max-width:36rem; }
.squot-task-companion { grid-template-columns:80px minmax(0,1fr); column-gap:.85rem; align-items:center; margin-block:.5rem 1rem; }
.squot-task-companion > .squot-portrait-button { grid-row:1 / 3; }
.squot-task-companion .squire-figure { width:72px; }
.squot-task-companion > .squot-speech { grid-column:2; margin:0; }
.squot-task-companion > .button { grid-column:2; }