/* The desktop's apps (design/desktop.md): Finder, Notes, ChatGPT, Claude, Settings, Bin,
   the reader, the Resume window and About this desk. Window frames are in desktop.css. */

/* Finder, as in macOS: no separate title bar; the translucent sidebar runs the full height with
   the traffic lights in its corner, and a unified 52 pt toolbar holds the folder name. */
.win[data-app="finder"] { grid-template-rows: 0 minmax(0, 1fr); background: transparent; }
.win[data-app="finder"] .win-bar { position: absolute; inset: 0 0 auto; height: 52px; z-index: 2; background: none !important; box-shadow: none; pointer-events: none; }
.win[data-app="finder"] .win-lights { pointer-events: auto; left: 12px; }
.win[data-app="finder"] .win-title { display: none; }
.win[data-app="finder"] .win-body { grid-row: 1 / -1; }
.finder { display: grid; grid-template-columns: 180px minmax(0, 1fr); height: 100%; }
.finder-side {
  padding: 52px 8px 10px; overflow: auto; background: rgba(232, 232, 232, 0.6);
  -webkit-backdrop-filter: var(--mac-vibrant); backdrop-filter: var(--mac-vibrant); box-shadow: inset -0.5px 0 0 var(--window-line);
}
.finder-side h3, .notes-side h3 { margin: 0 2px 4px; font: 600 11px / 1.3 var(--mac-font); color: var(--mac-text-2); }
.finder-side ul { margin: 0; padding: 0; list-style: none; }
.side-link {
  display: flex; align-items: center; gap: 6px; width: 100%; height: 24px; padding: 0 8px; border: 0; border-radius: 6px;
  background: none; text-align: left; font: 400 13px / 1 var(--mac-font); color: var(--mac-text);
}
.side-link svg { flex: none; width: 16px; height: 16px; color: var(--mac-accent); }
.side-link.is-sub { padding-left: 24px; }
.side-link[aria-current="true"] { background: var(--row-selected-dim); }
.finder-main { position: relative; display: grid; grid-template-rows: 52px 24px minmax(0, 1fr) auto; min-height: 0; background: var(--window-bg); }
.finder-tools { display: flex; align-items: center; gap: 2px; padding: 0 12px; box-shadow: inset 0 -0.5px 0 var(--window-line); }
.finder-tools .tool { width: 28px; height: 24px; min-width: 0; border-radius: 6px; font-size: 22px; color: var(--mac-text-2); }
.finder-tools .tool:hover:not(:disabled) { background: rgba(0, 0, 0, 0.06); }
.finder-title { margin: 0 0 0 8px; font: 700 15px / 1 var(--mac-font); color: var(--mac-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finder-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) 110px; align-items: center; padding: 0 16px 0 44px;
  box-shadow: inset 0 -0.5px 0 var(--window-line); font: 400 11px / 1 var(--mac-font); color: var(--mac-text-2);
}
.finder-list { margin: 0; padding: 4px 8px; list-style: none; overflow: auto; }
.finder-row {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) 110px; align-items: center; gap: 10px;
  height: 24px; padding: 0 10px; border-radius: 4px; touch-action: pan-y; user-select: none; font: 400 13px / 1 var(--mac-font);
}
.finder-row:nth-child(even) { background: #F4F5F5; }
/* The real icons at list size: the white document icon gets its outline back, as macOS draws it. */
.row-icon :is(svg, img) { display: block; width: 18px; height: 18px; filter: drop-shadow(0 0 0.7px rgba(0, 0, 0, 0.75)) drop-shadow(0 0.5px 0.6px rgba(0, 0, 0, 0.25)); }
.row-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-kind { color: var(--mac-text-2); }
.finder-row[aria-selected="true"] { background: var(--row-selected-dim); }
.win.is-focused .finder-row[aria-selected="true"] { background: var(--row-selected); color: #fff; }
.win.is-focused .finder-row[aria-selected="true"] .row-kind { color: inherit; }
.finder-empty { position: absolute; top: 45%; left: 0; right: 0; margin: 0; text-align: center; color: var(--mac-text-2); }
.finder-foot { margin: 0; padding: 5px 12px; box-shadow: inset 0 0.5px 0 var(--window-line); text-align: center; font: 400 11px / 1.3 var(--mac-font); color: var(--mac-text-2); }
.row-more { display: none; }

/* Notes: faint rules every 23 pt that the text sits on. The baseline of a 23 px line of 15 px
   Instrument Sans falls at 17 px (measured); --base puts the 1 px rule one pixel under it, so the
   letters stand on the rule (also when the screen is scaled) and descenders hang through it.
   The painter draws the same rules for .ruled (laptop-screen/painter.js). */
.ruled {
  --rule: 23px; --base: 18px;
  background: linear-gradient(to bottom, transparent calc(var(--rule) - 1px), var(--line) 0)
    0 calc(var(--base) - var(--rule) + 1px) / 100% var(--rule) repeat-y local;
}
.notes { display: grid; grid-template-columns: 150px minmax(0, 1fr); height: 100%; }
.notes-side { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; background: var(--window-bar); border-right: 1px solid var(--window-line); }
.notes-page { min-height: 0; overflow: auto; padding: 18px 24px 0; font: 400 15px / 23px var(--font-body); }
.notes-welcome { min-height: 100%; }
.notes-page[data-show="mine"] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.notes-page[hidden] { display: none; }
.notes-welcome p { margin: 0 0 23px; }
.notes-welcome p:last-child { position: relative; top: -2px; font: 500 24px / 23px var(--font-hand); color: var(--terracotta-ink); } /* Caveat's baseline sits 2 px lower */
.notes-text { width: 100%; height: 100%; padding: 0; border: 0; resize: none; font: inherit; color: var(--ink); } /* background: .ruled */
.notes-foot { margin: 0; padding: 6px 0 10px; font-size: 12px; line-height: 1.4; color: var(--ink-soft); background: var(--window-bg); }

/* ChatGPT */
.gpt { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; height: 100%; }
.gpt-head, .term-head { display: flex; justify-content: center; padding: 8px 14px; border-bottom: 1px solid var(--window-line); }
.chip-offline { padding: 2px 10px; border: 1px solid var(--window-line); border-radius: var(--radius-pill); font-size: 12px; color: var(--ink-soft); }
.model-pick { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-soft); }
.model-pick select { padding: 3px 6px; border: 1px solid var(--window-line); border-radius: var(--radius-control); background: var(--paper-raised); font: 13px var(--font-body); color: var(--ink); }
.gpt-log { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; overflow: auto; }
.msg { max-width: 88%; margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-wrap; text-wrap: pretty; }
.msg-user { align-self: flex-end; padding: 7px 12px; border-radius: 14px; background: var(--peach); }
/* One question per line: no orphan chip row however many are left. */
.gpt-starters { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; padding: 0 14px 10px; list-style: none; }
.gpt-starters li[hidden] { display: none; }
.chip { padding: 5px 11px; border: 1px solid var(--window-line); border-radius: var(--radius-pill); background: var(--paper-raised); font-size: 12.5px; text-align: left; }
.chip:hover { border-color: var(--terracotta); }
.gpt-form { display: flex; gap: 8px; padding: 10px 14px 14px; border-top: 1px solid var(--window-line); }
.gpt-form input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--window-line); border-radius: 10px; background: #fff; font: 14px var(--font-body); color: var(--ink); }

/* Claude: the dark terminal */
.win[data-app="claude"] { background: var(--screen-bg); border-color: rgba(0, 0, 0, 0.5); }
.win[data-app="claude"] .win-bar { background: var(--screen-panel); border-bottom-color: var(--screen-line); }
.win[data-app="claude"] .win-title { color: var(--screen-text); }
.win[data-app="claude"]:not(.is-focused) .win-title { color: var(--screen-dim); }
.term { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; background: var(--screen-bg); color: var(--screen-text); font: 400 13px / 20px var(--font-mono); }
.term-head { justify-content: flex-end; border-bottom-color: var(--screen-line); }
.term .chip-offline { border-color: var(--screen-line); color: var(--screen-dim); }
.term .model-pick { color: var(--screen-dim); }
.term .model-pick select { background: var(--screen-panel); border-color: var(--screen-line); color: var(--screen-text); }
.term-log { padding: 14px 16px; overflow: auto; }
.term-welcome { margin-bottom: 12px; padding: 10px 14px; border: 1px solid var(--screen-accent); border-radius: 8px; }
.term-welcome p { margin: 0; }
.term-line { margin: 0 0 10px; white-space: pre-wrap; }
.term-user { color: var(--screen-dim); }
.term-user::before { content: attr(data-prompt) " "; color: var(--screen-accent); }
.term-form { display: flex; align-items: center; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--screen-line); }
.term-prompt { color: var(--screen-accent); }
.term-form input { flex: 1; min-width: 0; padding: 2px 0; border: 0; background: transparent; font: inherit; color: var(--screen-text); caret-color: var(--screen-accent); }

/* Settings, Bin, reader, Resume, About */
.settings { padding: 20px; }
.set-head { margin: 0 0 8px; font: 600 13px / 1.3 var(--font-body); color: var(--ink-soft); }
.set-card { margin-bottom: 16px; padding: 16px; border-radius: 10px; background: var(--window-bar); }
.wp-choices { display: flex; gap: 16px; }
.wp-choice { display: grid; gap: 6px; justify-items: center; padding: 0; border: 0; background: none; font-size: 13px; }
.wp-thumb { display: block; width: 168px; height: 109px; border-radius: 6px; overflow: hidden; }
.wp-thumb svg { display: block; width: 100%; height: 100%; }
.wp-choice[aria-checked="true"] .wp-thumb { box-shadow: 0 0 0 3px var(--window-bar), 0 0 0 5px var(--rust); }
.wp-choice:focus-visible { box-shadow: none; }
.wp-choice:focus-visible .wp-thumb { box-shadow: 0 0 0 3px var(--window-bar), 0 0 0 5px var(--rust), 0 0 0 7px var(--paper); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.switch { position: relative; flex: none; width: 36px; height: 20px; padding: 0; border: 0; border-radius: 10px; background: var(--light-idle); }
.switch span { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper-raised); box-shadow: var(--shadow-1); transition: transform var(--dur-fast) var(--ease-out); }
.switch[aria-checked="true"] { background: var(--terracotta-ink); }
.switch[aria-checked="true"] span { transform: translateX(16px); }
.switch:disabled { opacity: 0.55; }
.set-note { margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); }
.set-note[hidden] { display: none; }
.settings-foot { margin: 0; font-size: 12px; color: var(--ink-soft); } /* 16 pt under the last card (its margin) */
.bin-head { display: flex; justify-content: flex-end; padding: 10px 14px; border-bottom: 1px solid var(--window-line); }
.bin-list { margin: 0; padding: 6px 8px; list-style: none; }
.bin-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 36px; padding: 2px 8px; }
.bin-empty { margin: 60px 0 0; text-align: center; color: var(--ink-soft); }
.reader { max-width: 62ch; margin: 0 auto; padding: 28px 32px 40px; font: 400 15px / 24px var(--font-body); }
.reader-title { margin: 0 0 14px; font: 600 26px / 1.15 var(--font-display); }
.reader :is(p, ul, ol) { margin: 0 0 12px; }
.reader :is(h3, h4, h5, h6) { margin: 18px 0 8px; font: 600 17px / 1.3 var(--font-display); }
.resume-window { padding: 16px 0; }
.resume-window .resume-page { --mm: 2.85px; margin: 0 auto; } /* the printed A4 sheet, fitted to the 640 pt window */
/* About This Desk (design/desktop-apps.md): small, centred, no title; close works, the others idle.
   Get Info's minimise and zoom lights idle the same way. */
.win[data-app="about"] .win-title { visibility: hidden; }
.win:is([data-app="about"], [data-app="info"]) :is(.light-min, .light-fill) { pointer-events: none; }
.win:is([data-app="about"], [data-app="info"]) :is(.light-min, .light-fill) > span { background: var(--light-idle); box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
.about { display: grid; justify-items: center; padding: 24px 16px 16px; text-align: center; font-family: var(--mac-font); }
.about-mark svg { display: block; width: 56px; height: 64px; }
.about h3 { margin: 12px 0 0; font: 700 22px / 1.2 var(--mac-font); }
.about p { max-width: 30ch; margin: 4px 0 0; font-size: 13px; line-height: 1.35; color: var(--mac-text-2); text-wrap: balance; }
.about-specs { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; margin: 16px 0 0; font-size: 11px; line-height: 18px; text-align: left; }
.about-specs dt { text-align: right; color: var(--mac-text-2); }
.about-specs dd { margin: 0; }
.about .about-disclaimer { margin-top: 16px; font-size: 11px; }

/* Get Info (context menus are styled with the menus in desktop.css). */
.info { display: grid; justify-items: center; padding: 18px 20px 16px; }
.info-icon :is(svg, img) { display: block; width: 48px; height: 48px; }
.info h3 { margin: 8px 0 12px; font: 600 18px / 1.25 var(--font-display); text-align: center; overflow-wrap: anywhere; }
.info dl { display: grid; grid-template-columns: 84px 1fr; gap: 4px 10px; width: 100%; margin: 0; font-size: 13px; }
.info dt { text-align: right; color: var(--ink-soft); }
.info dd { margin: 0; }