/* Quiet, compact training controls. The physical device is styled separately. */
.sidebar-column {
  --control-surface: #20262a;
  --control-line: #41494e;
  --control-muted: #b8c1c7;
  --control-accent: #d5b888;
  gap: 10px;
}
.sidebar-column .training-hud,
.sidebar-column .compact-controls {
  background: var(--control-surface);
  border: 1px solid #383f44;
  border-radius: 12px;
  box-shadow: none;
}
.sidebar-column .training-hud { padding: 16px 18px 12px; gap: 12px 16px; }
.sidebar-column .activity-emblem { border: 0; background: #d5b88812; width: 38px; height: 38px; }
.sidebar-column .activity-emblem svg { width: 27px; height: 27px; }
.sidebar-column .training-hud h2 { font-size: 15px; letter-spacing: -.2px; }
.sidebar-column .training-hud .eyebrow { font-size: 9px; letter-spacing: 1.2px; color: var(--control-muted); }
.sidebar-column .training-hud p { margin: 3px 0 0; font-size: 12px; color: var(--control-muted); }
.sidebar-column .timer-metric>strong { font-size: 21px; font-weight: 500; color: #f2dec0; }
.sidebar-column .sim-clock { border-color: var(--control-line); padding-top: 9px; gap: 4px 7px; }
.sidebar-column .sim-clock strong { font-size: 15px; font-weight: 500; }
.sidebar-column .sim-clock small { color: var(--control-muted); }
.sidebar-column .activity-toast { border-color: #75664e; border-radius: 10px; background: #292b29; }
.sidebar-column .activity-toast strong { font-size: 14px; }
.compact-controls { padding: 16px 18px 6px; --panel-font: .875rem; --panel-small: .8125rem; }
.compact-controls button { font-size: var(--panel-font); font-weight: 500; min-height: 44px; }
.compact-controls .main-actions { gap: 8px; margin-bottom: 14px; }
.compact-controls .main-actions button {
  min-height: 48px; padding: 8px 9px; gap: 8px; border-radius: 7px;
  border: 1px solid #526069; box-shadow: none; background: #2b3338; color: #edf0f2;
  font-size: var(--panel-font); line-height: 1.25;
}
.compact-controls .main-actions .activity-svg { width: 20px; height: 20px; flex-basis: 20px; }
.compact-controls .main-actions button strong { font-size: var(--panel-font); font-weight: 600; }
.compact-controls .main-actions .drive-primary { background: var(--control-accent); border-color: var(--control-accent); color: #241f18; }
.compact-controls .main-actions .drive-primary[data-driving="true"] { background: #3b4c57; border-color: #718693; color: #f3f6f8; }
.compact-controls .main-actions button:hover:not(:disabled) { background: #39444b; }
.compact-controls .main-actions .drive-primary:hover:not(:disabled) { background: #e2c79e; color: #241f18; }
.compact-controls .main-actions .drive-primary[data-driving="true"]:hover:not(:disabled) { background: #4b616e; color: #fff; }

/* Four compact activity shortcuts in one continuous selector. */
.compact-controls .activity-choices { grid-template-columns: repeat(4,minmax(0,1fr)); padding: 4px; gap: 3px; background: #171d21; border-radius: 9px; }
.compact-controls .activity-choices button {
  min-height: 64px; padding: 8px 2px; gap: 6px; font-size: 12px;
  border: 1px solid transparent; border-radius: 6px; box-shadow: none;
  background: transparent; color: #c6d0d6; overflow-wrap: normal;
}
.compact-controls .activity-choices .activity-svg { width: 24px; height: 24px; }
.compact-controls .activity-choices button:hover:not(:disabled) { background: #2a333a; border-color: transparent; }
.compact-controls .activity-choices button[aria-pressed="true"] { background: #3d3529; border: 1px solid #bba078; color: #ffe7c1; }
.compact-controls .activity-choices button[data-activity="Ruhe"][aria-pressed="true"] { background: #263d32; border-color: #8fb29c; color: #e2f3e8; }
.compact-controls .activity-choices button[aria-pressed="true"]:after { content: '✓'; top: 3px; right: 5px; font-size: 11px; }
.compact-controls .activity-choices button[data-blocked="true"] { color: #a4b1ba; }

/* Secondary actions keep generous hit areas but lose the heavy button chrome. */
.compact-controls .training-time-actions { gap: 4px; margin: 5px 0 8px; }
.compact-controls .training-time-actions button,
.compact-controls .card-print-actions .compact-secondary {
  min-height: 44px; padding: 8px 4px!important; border: 1px solid transparent;
  background: transparent; box-shadow: none; border-radius: 6px; font-size: var(--panel-small);
  color: #d5dde1; text-align: center;
}
.compact-controls .training-time-actions #advance { color: #e3c99e; }
/* A single compact player strip replaces the separate time buttons. */
.compact-controls .training-player { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; padding:4px; margin:12px 0 5px; border:1px solid var(--control-line); border-radius:10px; background:#171d21; }
.compact-controls .training-player button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-width:0; min-height:56px; padding:7px 2px!important; border:1px solid transparent; border-radius:7px; background:transparent; color:#e4eaee; box-shadow:none; font-size:11px; line-height:1.2; }
.compact-controls .training-player .activity-svg { width:23px; height:23px; flex:0 0 23px; stroke-width:2; }
.compact-controls .training-player button:hover:not(:disabled) { background:#303a41; border-color:#667580; }
.compact-controls .training-player #pause { background:#d5b888; color:#241f18; }
.compact-controls .training-player #pause:hover { background:#e7cba0; }
.compact-controls .training-player button:disabled { opacity:.4; cursor:not-allowed; }
.compact-controls .player-hint { margin:0 2px 10px; color:var(--control-muted); font-size:11px; line-height:1.4; }
.compact-controls .card-print-actions { padding: 7px 0; gap: 4px; border-top: 1px solid var(--control-line); }
.compact-controls .card-print-actions .compact-secondary { display: flex; align-items: center; justify-content: center; gap: 7px; }
.compact-controls .card-print-actions .activity-svg { width: 20px; height: 20px; flex: 0 0 20px; }
.compact-controls .training-time-actions button:hover:not(:disabled),
.compact-controls .card-print-actions button:hover:not(:disabled) { background: #303a41; border-color: #5e6c75; }
.compact-controls .compact-disclosure { border-top: 0; margin-top: 8px; }
.compact-controls .primary-disclosure { margin-top: 0; }
.compact-controls .compact-disclosure>summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none;
  min-height: 48px; padding: 11px 12px; font-size: 16px; font-weight: 700; color: #f6e6cd;
  background: #30383d; border-left: 3px solid var(--control-accent); border-radius: 5px;
}
.compact-controls .compact-disclosure>summary h2 { margin: 0; font: inherit; letter-spacing: .15px; }
.compact-controls .compact-disclosure>summary::-webkit-details-marker { display: none; }
.compact-controls .compact-disclosure>summary:after { content: ''; width: 9px; height: 9px; flex: 0 0 9px; margin-right: 3px; border-right: 2px solid #efd3aa; border-bottom: 2px solid #efd3aa; transform: rotate(45deg); }
.compact-controls .compact-disclosure[open]>summary:after { transform: rotate(225deg); }
.compact-controls .compact-disclosure>summary:hover { color: #fff1dc; background: #3a444b; }
.compact-controls .compact-disclosure>.disclosure-content { padding: 14px 0 6px; }
.compact-controls .disclosure-content>h3 { color: #f0d6b1; font-size: 15px; font-weight: 650; letter-spacing: .15px; }
.compact-controls .flags { color: #c5ae87; font-size: 11px; padding: 0 2px 8px; }
.compact-controls .flags:empty { display: none; }

/* First insertion and the independent consent settings live with the device keys. */
.compact-controls .card-preferences { padding: 0 0 12px; margin: 0 0 12px; border-bottom: 1px solid var(--control-line); }
.compact-controls .first-use-row { padding: 8px 2px; gap: 10px; min-height: 52px; border: 0; border-radius: 0; margin: 0; background: none; }
.compact-controls .first-use-row:has(input:checked) { background: none; }
.compact-controls input[type="checkbox"] { width: 18px; height: 18px; flex-basis: 18px; }
.compact-controls .first-use-row strong { font-size: var(--panel-font); font-weight: 500; color: #eef0f2; }
.compact-controls .first-use-row small { font-size: 12px; color: var(--control-muted); }
.compact-controls .privacy-help { background: none; border: 0; margin: 0; }
.compact-controls .privacy-help>summary { min-height: 44px; padding: 10px 2px; font-size: var(--panel-small)!important; color: #e3c99e; }
.compact-controls .privacy-help>div { padding: 4px 2px 8px; font-size: var(--panel-small); }
.compact-controls .privacy-help #privacy-saved { border: 0; border-left: 2px solid #a38a60; background: #181e22; border-radius: 0; padding: 10px; }
.compact-controls .privacy-help #privacy-show-keys { background: transparent; border: 0; padding: 8px 0; min-height: 44px; text-align: left; color: #e3c99e; font-size: var(--panel-small); }
.compact-controls .lcd-magnify { background: none; border: 0; margin: 0; padding: 8px 0; color: #e3c99e; box-shadow: none; font-size: var(--panel-small); }
.compact-controls .keypad { gap: 6px; margin-top: 3px; }
.compact-controls .keypad button { min-height: 54px; padding: 7px 2px; gap: 4px; border: 1px solid #56626b; border-radius: 6px; background: #2c363d; box-shadow: none; color: #eef3f7; }
.compact-controls .keypad .activity-svg { width: 19px; height: 19px; stroke-width: 2.2; }
.compact-controls .keypad #key-ok { background: #423b30; border-color: #a68c67; color: #f6dfbd; }
.compact-controls .keypad #key-ok>span { font-size: 16px; line-height: 19px; }
.compact-controls .keypad small { font-size: 11px; font-weight: 400; }
.compact-controls .guidance { margin-top: 10px; }
.compact-controls .guidance p { color: var(--control-muted); }
.compact-controls .inline-readings { gap: 6px; margin: 8px 0; }
.compact-controls .inline-readings>div { border: 0; border-radius: 5px; padding: 9px 6px; }
.compact-controls .inline-readings .activity-svg { width: 24px; height: 24px; flex-basis: 24px; }
.compact-controls .inline-readings b { font-size: 21px; }

/* Keep interaction and keyboard focus visible, including guidance for blocked actions. */
.compact-controls .preferred-control:not(:disabled) { border-color: #baa17c; box-shadow: none; }
.compact-controls .guided-control:not(:disabled) { outline: 2px solid #f1c781; outline-offset: 3px; background: #4d402c; }
.compact-controls button:disabled { color: #a5b0b8; background: #262e33; border-color: #424d55; box-shadow: none; }
.compact-controls button:active:not(:disabled),.compact-controls button.is-pressed:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 0 0 1px #e6bc7f; border-color: #e6bc7f; filter: brightness(1.16); }
.compact-controls button:focus-visible,.compact-controls summary:focus-visible,.compact-controls input:focus-visible,.compact-controls select:focus-visible,.compact-controls a:focus-visible { outline: 3px solid #f9e2b8; outline-offset: 3px; box-shadow: 0 0 0 5px #111820; }
body[data-large-text="true"] .compact-controls { --panel-font: 1.125rem; --panel-small: 1rem; }
body[data-large-text="true"] .compact-controls .compact-disclosure>summary { font-size: 19px; }
body[data-large-text="true"] .compact-controls .activity-choices { grid-template-columns: 1fr; }
body[data-large-text="true"] .compact-controls .activity-choices button { flex-direction: row; min-height: 48px; gap: 10px; }
body[data-large-text="true"] .compact-controls .activity-choices button { font-size: var(--panel-small); }
body[data-large-text="true"] .compact-controls .main-actions { grid-template-columns: 1fr; }
body[data-large-text="true"] .compact-controls .first-use-row small,body[data-large-text="true"] .compact-controls .keypad small { font-size: .875rem; }
@media(max-width:420px) {
  .compact-controls { padding: 14px 14px 4px; }
  .compact-controls .main-actions { grid-template-columns: 1fr 1fr; }
  .compact-controls .main-actions button { padding: 8px 5px; font-size: 13px; }
  .compact-controls .main-actions button strong { font-size: 13px; }
  .compact-controls .activity-choices button { font-size: 12px; }
}
@media(forced-colors:active) {
  .compact-controls button { border: 1px solid ButtonText; }
  .compact-controls button[aria-pressed="true"] { border: 2px solid Highlight; }
  .compact-controls .compact-disclosure>summary:after { border-color: ButtonText; }
}
@media(max-width:360px) {
  .compact-controls .activity-choices { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Simulator workspace: the scene and its controls share the available screen. */
html:has(.simulator-shell) { height:100%; overflow:hidden; }
body.simulator-shell { height:100%; overflow-x:auto; overflow-y:hidden; }
.card-gap-label { display:block; margin:18px 0 8px; font-size:14px; font-weight:600; }
#card-gap-minutes { width:100%; min-height:46px; padding:8px 12px; font:inherit; color:inherit; background:#2b343b; border:1px solid #6b747b; border-radius:6px; }
.card-gap-direct { width:100%; min-height:46px; margin-top:10px; padding:10px; border:1px solid #6b747b; border-radius:6px; color:inherit; background:transparent; font-size:14px; }
.simulator-shell main { --workspace-height:calc(100dvh - 24px); width:100%; min-width:566px; max-width:none; margin:0; padding:12px; }
.simulator-shell .workspace { display:grid; grid-template-columns:minmax(260px,1fr) clamp(270px,29vw,380px); min-width:542px; height:var(--workspace-height); align-items:stretch; gap:12px; }
.simulator-shell .scene-column { position:relative; top:auto; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); height:100%; min-height:0; width:100%; gap:0; }
.simulator-shell .scene-column>.viewport { grid-column:1; grid-row:1; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); height:100%; min-height:0; margin:0; }
.simulator-shell .viewport>#scene { position:relative; inset:auto; grid-area:1 / 1; min-width:0; min-height:0; }
.simulator-shell #scene>canvas { position:absolute; inset:0; width:100%; height:100%; }
.simulator-shell .viewport>.focus-button { position:relative; inset:auto; grid-area:1 / 1; align-self:end; justify-self:end; margin:18px; }
.simulator-shell .sidebar-column { position:relative; gap:12px; min-width:0; height:100%; min-height:0; max-height:none; overflow:auto; scrollbar-width:thin; scrollbar-color:#62676b #20252a; scrollbar-gutter:stable; padding:0 6px 12px 0; overscroll-behavior:contain; }
.simulator-shell .sidebar-column>.training-hud,.simulator-shell .sidebar-column>.controls { flex:0 0 auto; }
.simulator-meta { display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; margin-top:20px; padding-top:12px; border-top:1px solid #424c52; }
.simulator-meta a,.simulator-meta button { min-height:44px; display:inline-flex; align-items:center; color:#d9c09a; background:none; border:0; padding:0; font-size:13px; text-decoration:none; }
.compact-controls .hints-switch { display:flex; align-items:center; gap:10px; min-height:44px; margin-bottom:10px; font-size:14px; color:#d4dde3; }

/* Notices float inside the scene; showing or hiding them never resizes the canvas. */
.viewport>.device-notice { position:absolute; top:12px; left:12px; right:12px; z-index:6; width:auto; height:auto; max-height:max(88px,calc(50% - 100px)); min-height:0; overflow:auto; scrollbar-width:thin; scrollbar-gutter:stable; overscroll-behavior:contain; margin:0; padding:12px 18px 8px; display:block; border:1px solid #855d60; border-radius:12px; background:linear-gradient(120deg,#39292cf5,#25272bf5 85%); box-shadow:0 5px 24px #160c1028,inset 0 1px 0 #ffc5c00b; color:#f9eeee; opacity:1; transition:opacity .45s ease,transform .45s ease; }
.viewport>.device-notice[data-kind="warning"] { border-color:#b67672; background:linear-gradient(120deg,#492b2df5,#28262af5 90%); }
.viewport>.device-notice[hidden] { display:none; }
.notice-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:7px; }
.notice-badge { display:inline-flex; align-items:center; gap:8px; color:#f0bcb5; font-size:11px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; }
.notice-badge:before { content:''; width:6px; height:6px; border-radius:50%; background:#dc958d; box-shadow:0 0 12px #e99b8d55; }
.device-notice .notice-heading>.activity-svg { width:22px; height:22px; color:#e1aaa2; }
.device-notice>strong { display:block; font-size:17px; line-height:1.4; font-weight:650; color:#fff0e9; }
.device-notice>p { max-width:78ch; margin:6px 0 5px; font-size:14px; line-height:1.6; color:#e3d7d5; overflow-wrap:anywhere; }
.notice-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:4px 20px; }
.device-notice button { min-height:44px; border:0; background:transparent; padding:8px 0; color:#f3c3b6; font-size:13px; border-radius:4px; }
#device-notice-guide { margin-right:auto; text-align:left; text-decoration:underline; text-underline-offset:4px; }
#device-notice-close { font-weight:600; }
.device-notice button:hover { color:#fff; }
.device-notice button:focus-visible { outline:3px solid #ffdfc1; outline-offset:4px; }
.device-notice:focus-visible { outline:2px solid #ffdfc1; outline-offset:2px; }
.device-notice.is-entering { animation:notice-reveal .7s cubic-bezier(.2,.65,.25,1) both; }
.device-notice.is-leaving { opacity:0; transform:translateY(-6px); pointer-events:none; }
@keyframes notice-reveal { from{opacity:0;transform:translateY(9px)} to{opacity:1;transform:translateY(0)} }
body[data-large-text="true"] .device-notice>p,body[data-large-text="true"] .device-notice>strong { font-size:1.125rem; }
body[data-reduced-motion="true"] .device-notice { animation:none; transition:none; transform:none; }
@media(max-width:900px) {
 .simulator-shell main { --workspace-height:calc(100dvh - 20px); min-width:562px; padding:10px; }
 .viewport>.device-notice { padding:10px 12px 8px; }
 .simulator-shell .compact-controls { padding:14px 12px 4px; }
 .simulator-shell .sidebar-column .training-hud { padding:14px 12px 10px; }
 .simulator-shell .viewport>.focus-button { margin:12px; }
}
@media(prefers-reduced-motion:reduce) { .device-notice { animation:none!important; transition:none!important; transform:none!important; } }
@media(forced-colors:active) { .viewport>.device-notice { border:2px solid CanvasText; background:Canvas; color:CanvasText; } .notice-badge,.device-notice>strong,.device-notice>p { color:CanvasText; } }