/* Code home: devices and every session in one calm column.
   Structure follows the familiar mobile coding-agent pattern (bar, device
   chips, session cards, a docked "new session" action, bottom sheets); the
   identity stays Sadeed's: mineral surfaces, one emerald signal, amber only
   for "waiting for you", and a pulsing meridian instead of a spinner. */

.account-page:has(.code-home:not([hidden])) { max-width: 40rem; padding-block-start: max(var(--space-3), env(safe-area-inset-top)); padding-inline: var(--space-4); }
.account-page:has(.code-home:not([hidden])) > .account-brand { display: none; }

.code-home { display: flex; flex-direction: column; gap: var(--space-4); padding-block-end: calc(var(--touch-target) + var(--space-10)); }

.code-bar { align-items: center; display: grid; gap: var(--space-2); grid-template-columns: var(--touch-target) minmax(0, 1fr) auto; }
.code-bar h1 { align-items: center; display: flex; font-family: var(--font-ui); font-size: var(--native-title-size); font-weight: 600; gap: var(--space-2); margin: 0; min-inline-size: 0; text-align: start; }
.code-bar h1 img { flex: none; }
.code-bar-actions { display: flex; gap: var(--space-1); }
.code-icon-button svg, .code-search svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.code-icon-button { align-items: center; background: var(--mineral-900); border: 1px solid var(--border-soft); border-radius: var(--radius-pill); color: var(--limestone-100); cursor: pointer; display: inline-flex; block-size: var(--touch-target); inline-size: var(--touch-target); justify-content: center; padding: 0; }
.code-icon-button:hover { border-color: var(--border-mid); }
.code-icon-button:focus-visible, .code-device:focus-visible, .code-session:focus-visible, .code-folder:focus-visible { outline: 2px solid var(--emerald-400); outline-offset: 2px; }
.code-glyph { font-size: var(--text-lg); line-height: 1; }
.code-avatar { align-items: center; background: var(--emerald-wash); border: 1px solid var(--emerald-glow); border-radius: var(--radius-pill); color: var(--emerald-300); display: inline-flex; font-weight: 800; block-size: 2rem; inline-size: 2rem; justify-content: center; }

.code-section { display: flex; flex-direction: column; gap: var(--space-3); }
.code-section-head { align-items: center; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
.code-section-head h2 { color: var(--limestone-300); font-size: var(--text-sm); font-weight: 700; margin: 0; }
.code-section-note { color: var(--amber-400); font-size: var(--text-xs); }

/* Device chips scroll sideways; the dot says online in color and the label says it in words. */
.code-devices { display: flex; gap: var(--space-2); list-style: none; margin: 0; overflow-x: auto; padding: 0 0 var(--space-1); scrollbar-width: none; }
.code-device { align-items: center; background: var(--mineral-950); border: 1px solid var(--border-mid); border-radius: var(--radius-pill); color: var(--limestone-100); cursor: pointer; display: inline-flex; font: inherit; font-weight: 600; gap: var(--space-2); min-block-size: var(--touch-target); padding-block: 0; padding-inline: var(--space-3) var(--space-4); white-space: nowrap; }
.code-device-icon { block-size: 0.8rem; border: 1.5px solid currentcolor; border-radius: 2px; inline-size: 1.1rem; position: relative; }
.code-device-icon::after { background: currentcolor; block-size: 1.5px; border-radius: 1px; content: ""; inset-block-end: -4px; inset-inline: -3px; position: absolute; }
.code-device-icon::before { background: var(--mineral-600); block-size: 0.45rem; border: 1.5px solid var(--mineral-950); border-radius: var(--radius-pill); content: ""; inline-size: 0.45rem; inset-block-start: -5px; inset-inline-end: -6px; position: absolute; }
.code-device[data-online="true"] .code-device-icon::before { background: var(--emerald-400); }
.code-device[data-online="false"] { color: var(--limestone-300); }

.code-empty { color: var(--limestone-300); display: flex; flex-direction: column; font-size: var(--text-sm); gap: var(--space-3); line-height: 1.8; margin: 0; }
.code-empty p { margin: 0; }
.code-empty .button { align-self: flex-start; }
.code-search-label { color: var(--limestone-300); font-size: var(--text-xs); }
.code-search { align-items: center; background: var(--mineral-950); border: 1px solid var(--border-mid); border-radius: var(--radius-md); color: var(--limestone-300); display: flex; gap: var(--space-2); min-block-size: var(--touch-target); padding-inline: var(--space-3); }
.code-search svg { flex: none; }
.code-search input { background: transparent; border: 0; color: var(--limestone-100); flex: 1; font: inherit; font-size: var(--input-text-min); min-block-size: var(--touch-target); min-inline-size: 0; outline: none; inline-size: 100%; text-align: start; }
.code-search:focus-within { border-color: var(--emerald-400); outline: 2px solid var(--emerald-glow); outline-offset: 2px; }

/* The primary action is docked where the thumb already is. */
.code-dock { background: var(--mineral-1000); border-block-start: 1px solid var(--border-soft); inset-block-end: 0; inset-inline: 0; padding: var(--space-3) var(--space-4) max(var(--space-3), env(safe-area-inset-bottom)); position: fixed; z-index: 2; }
.code-new { align-items: center; border-radius: var(--radius-pill); display: flex; font-size: var(--text-md); font-weight: 800; gap: var(--space-2); justify-content: center; margin-inline: auto; max-inline-size: 40rem; min-block-size: 3.25rem; text-decoration: none; inline-size: 100%; }

/* Sheets rise from the bottom on a phone and float centered on a wide screen. */
.code-sheet { background: var(--mineral-900); border: 1px solid var(--border-mid); border-radius: var(--radius-xl) var(--radius-xl) 0 0; color: var(--limestone-100); inset-block-end: 0; inset-block-start: auto; margin: 0 auto; max-block-size: 85dvh; max-inline-size: 40rem; overflow-y: auto; padding: var(--space-5) var(--space-5) max(var(--space-6), env(safe-area-inset-bottom)); inline-size: 100%; }
.code-sheet[open] { animation: code-sheet-rise var(--duration-base, 180ms) ease-out; display: flex; flex-direction: column; gap: var(--space-3); }
.code-sheet::backdrop { background: rgb(2 8 10 / 62%); }
.code-sheet-tall { max-block-size: 92dvh; }
@keyframes code-sheet-rise { from { transform: translateY(1.5rem); opacity: 0.4; } to { transform: none; opacity: 1; } }
.code-sheet-head { align-items: center; display: grid; gap: var(--space-3); grid-template-columns: var(--touch-target) 1fr auto; margin-block-end: var(--space-2); }
.code-sheet-head h2 { font-size: var(--text-lg); font-weight: 800; margin: 0; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.code-sheet-state { color: var(--limestone-300); font-size: var(--text-xs); min-inline-size: var(--touch-target); text-align: end; }
.code-sheet-state[data-online="true"] { color: var(--emerald-300); }
.code-label { color: var(--limestone-300); font-size: var(--text-sm); font-weight: 700; margin: var(--space-2) 0 0; }
.code-hint { color: var(--limestone-300); font-size: var(--text-sm); line-height: 1.8; margin: 0; }
.code-folder { align-items: center; background: var(--mineral-950); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); color: var(--limestone-100); display: flex; gap: var(--space-3); justify-content: space-between; min-block-size: 3.25rem; padding-inline: var(--space-4); text-decoration: none; }
.code-folder bdi { font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-chevron { color: var(--limestone-300); font-size: var(--text-lg); }
.code-sessions-cards .code-session { background: var(--mineral-850); }
.code-sheet .code-new { margin-block-start: var(--space-3); }
.code-steps { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding-inline-start: var(--space-5); }
.code-steps li { display: flex; flex-direction: column; gap: var(--space-2); line-height: 1.8; }
.code-steps .link-button { align-self: flex-start; }
.code-sheet code, .code-steps code { background: var(--code-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); display: block; font-family: var(--font-mono); padding: var(--space-2) var(--space-3); text-align: start; }
.code-sheet .account-subsection { margin-block-start: var(--space-4); padding-block-start: var(--space-4); }

@media (min-width: 720px) {
  .code-sheet { border-radius: var(--radius-xl); inset-block: 0; margin: auto; max-block-size: 80dvh; }
}

@media (prefers-reduced-motion: reduce) {
  .code-status[data-activity="working"]::after, .code-sheet[open] { animation: none; }
}

/* Device management inside the account sheet keeps links in the brand voice. */
.code-sheet .device-item a { color: var(--emerald-300); font-size: var(--text-sm); }

/* Session filters: a quiet segmented pair, pressed state in words and color. */
.code-filters { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); margin-inline-start: auto; }
.code-filter { background: transparent; border: 1px solid var(--border-mid); border-radius: var(--radius-pill); color: var(--limestone-300); cursor: pointer; font: inherit; font-size: var(--text-xs); min-block-size: var(--touch-target); padding-inline: var(--space-3); }
.code-filter[aria-pressed="true"] { background: var(--emerald-wash); border-color: var(--emerald-400); color: var(--emerald-300); font-weight: 700; }
.code-filter:focus-visible { outline: 2px solid var(--emerald-400); outline-offset: 2px; }