/* Shared surfaces and type scale, with fallbacks for the standalone guide. */

.connection-status{position:relative;margin:0 0 14px;padding:0;border:0;font-size:14px;line-height:1.65;overflow-wrap:anywhere}
.connection-heading{display:flex;gap:8px;align-items:center;min-height:44px;padding-right:116px;color:var(--teal-dark,#173b40)}
.connection-heading>span{display:flex;flex:0 0 18px}
.connection-heading .icon{width:18px;height:18px}
.connection-heading strong{font-size:14px;font-weight:500}
.connection-details>summary{position:absolute;right:0;top:0;display:flex;align-items:center;justify-content:flex-end;gap:6px;min-height:44px;min-width:100px;padding:4px 0 4px 8px;font-size:13px;color:var(--muted,#706357);list-style:none;cursor:pointer}
.connection-details>summary::-webkit-details-marker{display:none}
.connection-details>summary .icon{width:14px;height:14px}
.connection-details[open]>summary .icon{transform:rotate(180deg)}
.connection-body{padding:8px 12px;border-left:2px solid var(--gold,#a47a3d);background:var(--paper,#f4eddf)}
.connection-status[data-state=error] .connection-body{border-left-color:var(--red,#681e19)}
.connection-status[data-state=error] .connection-details>summary{color:var(--red,#681e19)}
.connection-message p{margin:7px 0 0}
.connection-message p:empty{display:none}
#connection-note,.connection-actions time{color:var(--muted,#706357);font-size:13px}
.connection-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.connection-actions:has(button:not([hidden])){margin-top:4px}
.connection-actions button{min-height:44px;margin-left:auto;padding:8px 0 8px 12px}
.browser-handoff #copy-page{margin:12px 8px 4px 0;min-height:44px;white-space:normal}
.browser-handoff{margin:0 0 16px;padding:14px 16px;border:1px solid var(--line,#dbcbb0);border-left:3px solid var(--gold,#a47a3d);border-radius:var(--radius,4px);background:var(--teal-soft,#e9eeea);color:var(--ink,#30251f);font-size:14px;line-height:1.75}
.browser-handoff-heading{display:flex;align-items:center;gap:9px;color:var(--teal-dark,#173b40);margin-bottom:6px}
.browser-handoff-heading strong{font-weight:600}
.browser-handoff-heading .icon{width:19px;height:19px}
.browser-handoff p{margin:0;overflow-wrap:anywhere}
.browser-handoff>.text-button{margin:6px 0 -4px;padding-inline:0;text-align:left;min-height:44px}
.guide-add,.guide-check{min-width:0;font-size:15px;line-height:1.75;overflow-wrap:anywhere;color:var(--ink,#302a25)}
.guide-add .icon,.guide-check .icon{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.guide-add h3,.guide-check h3{display:flex;align-items:center;gap:10px;margin:20px 0 12px;font-size:17px;line-height:1.5;font-weight:600}
.guide-stage-number{display:inline-grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--red-soft,#f2e5df);color:var(--red,#79383a);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.guide-add p,.guide-check p{margin:10px 0}
.guide-location{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--muted,#706357);font-size:14px;line-height:1.6}
.guide-location .icon{width:18px;height:18px}
.guide-steps{list-style:none;padding:0;margin:16px 0;display:grid;gap:14px}
.guide-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start;min-width:0;margin:0;padding:0}
.guide-step-icon{position:relative;display:grid;place-items:center;width:28px;height:28px;color:var(--gold,#96743b)}
.guide-step-icon>.icon{width:20px;height:20px}
.guide-step-icon>span{position:absolute;right:-6px;bottom:-3px;display:grid;place-items:center;background:var(--card,#fffcf6);border-radius:50%;width:15px;height:15px;font-size:11px;font-weight:500;line-height:1;color:var(--muted,#706357);font-variant-numeric:tabular-nums}
.guide-steps li>div{padding-top:1px;min-width:0}
.guide-help{margin:12px 0;padding:0;border-top:1px solid var(--line,#d9ccb8);border-bottom:1px solid var(--line,#d9ccb8);background:transparent}
.guide-help+.guide-help{margin-top:-13px}
.guide-help>summary{display:flex;align-items:center;gap:12px;cursor:pointer;min-height:48px;padding:10px 4px;color:var(--red,#79383a);font-size:14px;line-height:1.6;font-weight:500;list-style:none;overflow-wrap:anywhere}
.guide-help>summary::-webkit-details-marker{display:none}
.guide-help>summary::after{content:"";display:block;flex:0 0 7px;width:7px;height:7px;margin:0 6px 4px auto;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .15s}
.guide-help[open]>summary::after{transform:rotate(225deg);margin-bottom:0}
.guide-help>p,.guide-help>.guide-steps,.guide-help>button{margin-left:4px;margin-right:4px}
.guide-help>.guide-steps{margin-bottom:20px}
.guide-help>button{max-width:calc(100% - 8px);min-height:44px;white-space:normal;text-align:left}
.guide-help>p:last-child{margin-bottom:16px}
.guide-add-body{min-width:0;padding:0 4px 12px}
.guide-add-body>.guide-location:first-child{margin-top:2px}
.guide-add-body>.guide-help{margin-left:0;margin-right:0}
.guide-add-details>.guide-add-body{padding-top:2px}
.guide-links{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px}
.guide-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--red,#79383a);text-underline-offset:4px;text-decoration-thickness:1px}
.guide-note,.guide-select-note{font-size:14px;color:var(--muted,#706357)}
.guide-handoff,.guide-caution{padding:12px 14px;background:var(--paper,#f5f1e8);border-left:2px solid var(--gold,#96743b);border-radius:0 6px 6px 0;font-size:14px;color:var(--muted,#706357)}
.guide-methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:16px 0}
.guide-method{min-width:0;display:flex;flex-direction:column;padding:12px 0;border-top:1px solid var(--line,#d9ccb8);background:transparent}
.guide-method h4{display:flex;align-items:center;gap:9px;font-size:16px;line-height:1.5;margin:0;color:var(--ink,#302a25);font-weight:600}
.guide-method h4>.icon{width:22px;height:22px;color:var(--red,#79383a)}
.guide-method .guide-method-note{color:var(--muted,#706357);font-size:14px;margin:8px 0 0}
.guide-method>.guide-steps{flex:1}
.guide-method .guide-step-icon>span{background:var(--paper,#f5f1e8)}
.guide-method>.secondary{white-space:normal;width:100%}
.guide-add .secondary,.guide-check .secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 14px;border:1px solid var(--control-line,#8b7964);border-radius:6px;background:var(--card,#fffcf6);color:var(--red,#79383a);font:inherit;font-size:14px;line-height:1.6;cursor:pointer}
.guide-add .secondary:hover:not(:disabled),.guide-check .secondary:hover:not(:disabled){background:var(--red-soft,#f2e5df);border-color:var(--red,#79383a)}
.guide-add .secondary:active:not(:disabled),.guide-check .secondary:active:not(:disabled){background:#ead6cf}
.guide-add .secondary:disabled,.guide-check .secondary:disabled{opacity:.5;cursor:default}
.guide-brand-heading{font-size:15px;margin:24px 0 12px;font-weight:600}
.guide-check{margin-top:24px;padding-top:2px;border-top:1px solid var(--line,#d9ccb8)}
.guide-confirm{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:12px 8px;cursor:pointer;border-radius:6px}
.guide-confirm:hover{background:var(--paper,#f5f1e8)}
.guide-confirm:has(input:checked){background:var(--red-soft,#f2e5df)}
.guide-confirm input{flex:0 0 20px;width:20px;height:20px;margin:3px 0 0;accent-color:var(--red,#79383a)}
.guide-confirm>span{font-weight:500;min-width:0}
.guide-confirm small{display:block;margin-top:4px;font-size:14px;font-weight:400;color:var(--muted,#706357);line-height:1.6}
.guide-notifications{margin:12px 0;border:1px solid var(--control-line,#8b7964);border-radius:8px;background:var(--card,#fffcf6)}
.guide-notifications>summary{display:flex;gap:10px;align-items:center;min-height:48px;padding:12px 14px;color:var(--red,#79383a);font-weight:500;list-style:none;cursor:pointer}
.guide-notifications>summary::-webkit-details-marker{display:none}
.guide-notifications>summary>.icon{width:20px;height:20px}
.guide-notifications>summary>.icon:last-child{margin-left:auto;transition:transform .15s}
.guide-notifications[open]>summary>.icon:last-child{transform:rotate(180deg)}
.guide-notifications[open]>summary{border-bottom:1px solid var(--line,#d9ccb8)}
.guide-notification-body{padding:2px 14px 12px;min-width:0}
.guide-notification-body h4{margin:20px 0 10px;font-size:15px;font-weight:600}
.guide-progress{font-size:14px;color:var(--muted,#706357);padding:10px 0}
.guide-add :focus-visible,.guide-check :focus-visible{outline:2px solid var(--focus,#79383a);outline-offset:3px;border-radius:3px}
@media(max-width:620px){.guide-methods{grid-template-columns:1fr;gap:12px}.guide-method{padding:12px 0}.guide-steps li{gap:12px}}
@media(max-width:480px){.guide-add,.guide-check{font-size:14px}.guide-links{display:grid;gap:2px}.guide-notification-body{padding-left:12px;padding-right:12px}.guide-handoff,.guide-caution{padding:10px 12px}.guide-test>button{width:calc(100% - 8px)}}
@media(prefers-reduced-motion:reduce){.guide-notifications>summary>.icon:last-child,.guide-help>summary::after{transition:none}}
/* Redesign layer: quiet status before preparation, shared stage numerals. */
.connection-status[data-prepared=false]{display:none}
#entry-hint:empty{display:none}
.guide-stage-number{background:var(--teal-tint,#e7ede8);color:var(--teal,#1d4549);font-family:var(--font-num,Georgia,serif)}
.browser-handoff{background:var(--surface-2,#f8f0e2)}
.guide-notifications{border-color:var(--line-2,#ccb894);border-radius:var(--r,6px)}
.guide-add .secondary,.guide-check .secondary{border-radius:var(--r-sm,4px)}