/* Serena Jobs: Texas Pathology brand colors and fonts (see CLAUDE.md), plus Kevin's rose accent. */
:root {
  --navy: #0E172F;          /* Brand Navy: toolbar, buttons, headings */
  --navy-hover: #25314F;    /* hover on navy, borders on navy */
  --navy-deep: #16203C;     /* panels on navy */
  --navy-divider: #1B2540;
  --on-navy: #F4F6F8;       /* Paper White text on navy */
  --on-navy-soft: #DDE3EE;
  --on-navy-muted: #A9B3C4;
  --slate: #4D5B76;         /* secondary text */
  --paper: #F4F6F8;         /* light page surface */
  --ink: #1A1A1A;           /* Document Black: body text */
  --placeholder: #8792A6;
  --raised: #FFFFFF;
  --raised-soft: #FAFBFC;
  --line: #DDE3EE;
  --rose: #BBA49F;          /* Kevin's dusty rose accent */
  --blush: #F6EFED;
  --error: #A12A2A;
  --font-heading: "EB Garamond", Garamond, Georgia, serif;
  --font-ui: "Source Sans 3", Calibri, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--paper);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

button, input, select, textarea { font: inherit; }

.hidden { display: none !important; }

/* ---- Top toolbar ---- */

.toolbar {
  background: var(--navy);
  color: var(--on-navy);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 10px 20px;
}

.logo {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.6rem;
  margin: 0;
  color: var(--rose);
}

/* A row of buttons where one is chosen (Type/Write, the four formats). */
.seg {
  display: flex;
  gap: 4px;
  background: var(--navy-deep);
  padding: 4px;
  border-radius: 8px;
}

.seg-btn {
  background: transparent;
  color: var(--on-navy-soft);
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  min-height: 40px;
  cursor: pointer;
}

.seg-btn:hover { background: var(--navy-hover); }

.seg-btn.active {
  background: var(--rose);
  color: var(--navy);
  font-weight: 600;
}

.toolbar-actions { display: flex; gap: 8px; }

.share-btn {
  background: var(--rose);
  color: var(--navy);
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  min-height: 44px;
  font-weight: 600;
  cursor: pointer;
}

.share-btn:hover { background: var(--on-navy); }

.logout-btn {
  background: transparent;
  color: var(--on-navy-soft);
  border: 1px solid var(--navy-hover);
  border-radius: 6px;
  padding: 10px 14px;
  min-height: 44px;
  cursor: pointer;
}

.logout-btn:hover { background: var(--navy-hover); }

/* ---- Second row: tools ---- */

.subbar {
  background: var(--raised);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 8px 20px;
}

.subbar-hint { color: var(--slate); font-size: 0.9rem; }

.tool-group { display: flex; align-items: center; gap: 6px; }

.tool-btn {
  background: var(--raised);
  color: var(--navy);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 12px;
  min-height: 44px;
  cursor: pointer;
}

.tool-btn:hover { background: var(--raised-soft); border-color: var(--on-navy-muted); }
.tool-btn[aria-pressed="true"] { background: var(--blush); border-color: var(--rose); font-weight: 600; }
.tool-btn:disabled { opacity: 0.5; cursor: default; }

.convert-btn { background: var(--navy); color: var(--on-navy); border-color: var(--navy); font-weight: 600; margin-left: auto; }
.convert-btn:hover { background: var(--navy-hover); border-color: var(--navy-hover); }

.swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--raised);
  box-shadow: 0 0 0 1px var(--line);
  background: var(--c);
  cursor: pointer;
}

.swatch.active { box-shadow: 0 0 0 3px var(--navy); }

.width-btn {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--raised);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.width-btn span {
  display: block;
  width: 22px;
  height: var(--w);
  border-radius: 99px;
  background: var(--navy);
}

.width-btn.active { background: var(--blush); border-color: var(--rose); }

.paper-pick { display: flex; align-items: center; gap: 6px; color: var(--slate); }

.paper-pick select {
  font-size: 16px;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--raised);
  color: var(--navy);
}

.app-status { margin: 0; padding: 0 20px; min-height: 0; color: var(--slate); }
.app-status:not(:empty) { padding: 8px 20px; background: var(--blush); color: var(--navy); }
.app-status.error:not(:empty) { color: var(--error); }

/* ---- Writing area ---- */

main {
  flex: 1;
  padding: 20px;
  display: flex;
  min-height: 0;
}

#editor {
  flex: 1;
  width: 100%;
  background: var(--raised);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  font-size: 1.15rem;
  line-height: 1.6;
  resize: none;
  white-space: pre-wrap;
}

#editor::placeholder { color: var(--placeholder); }

/* The handwriting area: paper underneath, ink on top. */
.ink-wrap {
  flex: 1;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--raised);
  min-height: 300px;
}

.ink-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Stop the page from scrolling or zooming while the pen or a finger draws. */
#inkCanvas { touch-action: none; cursor: crosshair; }

#editor:focus,
button:focus-visible,
select:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}

/* ---- Send window ---- */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(14, 23, 47, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-content {
  background: var(--raised);
  padding: 24px;
  border-radius: 10px;
  width: 100%;
  max-width: 380px;
}

.modal-content h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--navy);
  margin-top: 0;
}

.share-to { color: var(--slate); line-height: 1.5; }
.share-to strong { color: var(--navy); }
.share-status { min-height: 1.4em; margin: 8px 0 0; }
.share-status.error { color: var(--error); }
.share-status.ok { color: var(--navy); background: var(--blush); padding: 8px; border-radius: 6px; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.modal-actions button {
  padding: 10px 16px;
  min-height: 44px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--navy);
  cursor: pointer;
}

#confirmShare { background: var(--navy); color: var(--on-navy); border-color: var(--navy); font-weight: 600; }
#confirmShare:hover { background: var(--navy-hover); }
#confirmShare:disabled { opacity: 0.6; cursor: default; }

@media (min-width: 900px) {
  main { padding: 24px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- Sign-in ---- */

/* Pages that need a signed-in person stay hidden until auth.js confirms one,
   so signed-out visitors never see the editor flash before the redirect. */
html.auth-pending body { visibility: hidden; }

.auth-main {
  align-items: flex-start;
  justify-content: center;
  background: var(--paper);
}

.auth-card {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px;
  width: 100%;
  max-width: 400px;
  margin-top: 6vh;
  display: flex;
  flex-direction: column;
}

.auth-card h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 18px;
}

.auth-card label {
  font-weight: 600;
  color: var(--slate);
  margin-top: 10px;
}

/* 16px inputs so Safari on iPad and iPhone does not zoom in on them. */
.auth-card input {
  font-size: 16px;
  padding: 12px;
  margin-top: 6px;
  border: 1px solid var(--on-navy-muted);
  border-radius: 6px;
}

.auth-card input:focus,
.auth-card button:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}

.auth-card [hidden] { display: none; }

.auth-message {
  min-height: 1.4em;
  margin: 14px 0 4px;
  color: var(--slate);
}

.auth-message.error { color: var(--error); }
.auth-message.ok { color: var(--navy); background: var(--blush); padding: 10px; border-radius: 6px; }

.auth-submit {
  background: var(--navy);
  color: var(--on-navy);
  border: none;
  border-radius: 6px;
  padding: 14px;
  font-weight: 600;
  min-height: 48px;
  cursor: pointer;
}

.auth-submit:hover { background: var(--navy-hover); }
.auth-submit:disabled { opacity: 0.6; cursor: default; }

/* Connecting Claude (oauth-consent.html, November 5, 2026). */
.auth-card[hidden] { display: none; }
.auth-card p { margin: 6px 0; color: var(--ink, #1A1A1A); }
.consent-list { margin: 4px 0 10px; padding-left: 20px; line-height: 1.6; }
.consent-small { font-size: 0.9rem; color: var(--slate); }
.consent-who .link-btn { padding: 0; min-height: 0; }
.consent-buttons { display: flex; gap: 10px; margin-top: 8px; }
.consent-buttons button { flex: 1; }
.consent-deny {
  background: var(--raised); color: var(--navy); border: 1px solid var(--navy);
  border-radius: 6px; padding: 14px; font-weight: 600; min-height: 48px; cursor: pointer; font: inherit;
}
.consent-deny:disabled { opacity: 0.6; cursor: default; }

.auth-links {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.link-btn {
  background: none;
  border: none;
  color: var(--navy);
  text-decoration: underline;
  padding: 10px 2px;
  min-height: 44px;
  cursor: pointer;
}

.link-btn:hover { color: var(--slate); }

/* ---- Speak ---- */
.mic-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--navy);
  color: var(--on-navy);
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  min-height: 48px;
  font-weight: 600;
  cursor: pointer;
}
.mic-btn:hover { background: var(--navy-hover); }
.mic-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--rose); }
.mic-btn[aria-pressed="true"] { background: var(--rose); color: var(--navy); }
.mic-btn[aria-pressed="true"] .mic-dot { background: #B3261E; animation: mic-pulse 1.2s ease-in-out infinite; }
@keyframes mic-pulse { 50% { opacity: 0.3; } }
/* Speak's big microphone (Kevin, November 3, 2026): round, under the note, centred near
   the bottom of the screen; the note gets room underneath so no words hide behind it.
   Off: navy microphone. On: rose with a pulsing ring, showing a crossed-out microphone
   (tap to mute). */
.big-mic {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 25;
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
  width: 76px; height: 76px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--navy); color: var(--on-navy);
  box-shadow: 0 6px 18px rgba(14, 23, 47, 0.28);
}
.big-mic.hidden { display: none; }
.big-mic svg { width: 36px; height: 36px; grid-area: 1 / 1; }
.big-mic .mic-off { display: none; }
.big-mic[aria-pressed="true"] { background: var(--rose); color: var(--navy); animation: big-mic-ring 1.6s ease-out infinite; }
.big-mic[aria-pressed="true"] .mic-on { display: none; }
.big-mic[aria-pressed="true"] .mic-off { display: block; }
.big-mic:disabled { opacity: 0.4; cursor: default; }
@keyframes big-mic-ring { 0% { box-shadow: 0 0 0 0 rgba(187, 164, 159, 0.7); } 100% { box-shadow: 0 0 0 18px rgba(187, 164, 159, 0); } }
body.speak-mode #editor { padding-bottom: 110px; }
/* With the phone's calculator docked at the bottom, the microphone sits just above it. */
@media (max-width: 700px) { body.speak-mode main.calc-on ~ .big-mic, body.speak-mode main.calc-on .big-mic { bottom: calc(var(--calc-h, 420px) + 12px); } }
/* What's being heard right now, before it's final. */
.heard { flex-basis: 100%; margin: 0; min-height: 1.4em; color: var(--slate); font-style: italic; }

/* Sailboat mark beside the name. */
.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark { width: 36px; height: 36px; flex: none; }

/* Opened from the iPad home screen: keep the toolbar clear of the status bar. */
.toolbar { padding-top: max(10px, env(safe-area-inset-top)); }

/* ---- Left sidebar: clock, calendars, weather ---- */
body.with-sidebar { flex-direction: row; height: 100vh; height: 100dvh; overflow: hidden; }
/* Behind the sidebar the page is navy too, so no light strip can show beneath it
   (at the very bottom of the iPad screen, under the home bar). */
html:has(body.with-sidebar) { background: linear-gradient(to right, #0E172F 176px, #F4F6F8 176px); }
body.with-sidebar { background: transparent; }

.workspace { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: auto; }

.sidebar {
  width: 176px;
  flex: none;
  background: var(--navy);
  color: var(--on-navy-soft);
  border-right: 1px solid var(--navy-divider);
  overflow-y: auto;
  /* Extra room at the top: when the app runs in a window, iPadOS puts its three
     window-control dots in the top-left corner, right where the clock was. */
  padding: calc(max(14px, env(safe-area-inset-top)) + 34px) 12px max(18px, env(safe-area-inset-bottom));
}

.sidebar p { margin: 0; line-height: 1.4; }

.sb-clock { display: flex; align-items: baseline; gap: 4px; color: var(--on-navy); }
.sb-time { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 500; line-height: 1; }
.sb-ampm { font-family: var(--font-heading); font-size: 1.1rem; color: var(--on-navy-muted); }
.sb-date { white-space: pre-line; color: var(--rose); margin: 6px 0 14px !important; font-size: 0.95rem; } /* rose date (Kevin, November 8, 2026) */

.sb-month { margin-bottom: 14px; }
.sb-month-name { font-family: var(--font-heading); font-weight: 500; font-size: 1.2rem; color: var(--on-navy); margin: 0 0 4px; }

.sb-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; text-align: center; font-size: 0.78rem; }
.sb-dow { color: var(--on-navy-muted); font-weight: 600; font-size: 0.75rem; padding-bottom: 2px; }
.sb-day { color: var(--on-navy-soft); padding: 2px 0; }
/* Today: a filled rose circle with navy numerals. */
.sb-day.today { background: var(--rose); border-radius: 50%; color: var(--navy); font-weight: 700; }

/* Months before and after this one are dimmed so this month stands out. */
.sb-month:not(.current) { opacity: 0.45; }

.sb-weather { border-top: 1px solid var(--navy-hover); padding-top: 12px; margin-top: 4px; flex: none; }
/* A column: clock and date on top, weather pinned to the bottom, calendars filling
   what's between (sidebar.js shows as many whole months as fit). */
.sidebar { display: flex; flex-direction: column; overflow: hidden; height: 100%; }
.sb-clock, .sb-date { flex: none; }
#sbCalendars { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.sb-temp { font-family: var(--font-heading); font-size: 2.4rem; line-height: 1.05; color: var(--on-navy); }
.sb-sky { font-weight: 600; color: var(--on-navy); font-size: 1.05rem; margin-bottom: 4px !important; }
.sb-place { color: var(--rose); margin-top: 6px !important; }
.sb-place.sb-askable { cursor: pointer; }

/* Phones: no room for it; the iPad keeps it in both orientations. */
@media (max-width: 700px) {
  .sidebar { display: none; }
}

/* ---- Notice after sending, clearing, or a problem ---- */
.toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: min(92vw, 520px);
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--navy);
  color: var(--on-navy);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 6px 20px rgba(14, 23, 47, 0.25);
  z-index: 20;
}
.toast.ok { border-left: 4px solid var(--rose); }
.toast.error { background: var(--error); }
.toast-btn {
  background: var(--rose);
  color: var(--navy);
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  min-height: 40px;
  font-weight: 600;
  cursor: pointer;
}

/* ---- Attached files ---- */
.attach-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 20px;
  background: var(--raised-soft);
  border-bottom: 1px solid var(--line);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--blush);
  color: var(--navy);
  border: 1px solid var(--rose);
  border-radius: 999px;
  padding: 2px 4px 2px 12px;
  max-width: 100%;
}
.chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-btn {
  background: transparent;
  border: none;
  color: var(--navy);
  min-width: 36px;
  min-height: 36px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
}
.chip-btn:hover { background: var(--raised); }

/* Shown while files are dragged over the page. */
.drop-zone {
  position: fixed;
  inset: 12px;
  border: 3px dashed var(--rose);
  border-radius: 14px;
  background: rgba(246, 239, 237, 0.92);
  display: grid;
  place-items: center;
  z-index: 15;
  pointer-events: none;
}
.drop-zone p { font-family: var(--font-heading); font-size: 1.8rem; color: var(--navy); margin: 0; }

/* ---- Notes sent this session ---- */
.history-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 6px 20px;
  background: var(--raised);
  border-bottom: 1px solid var(--line);
}
.nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--navy);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.nav-btn:hover:not(:disabled) { background: var(--blush); border-color: var(--rose); }
.nav-btn:disabled { opacity: 0.35; cursor: default; }
.history-label { color: var(--slate); min-width: 12em; }

.history-view {
  flex: 1;
  overflow: auto;
  background: var(--blush);
  border: 1px solid var(--rose);
  border-radius: 8px;
  padding: 20px;
}
.hv-meta { margin: 0 0 12px; color: var(--slate); font-weight: 600; }
.hv-text { white-space: pre-wrap; font-size: 1.15rem; line-height: 1.6; color: var(--ink); }
.hv-image { display: block; max-width: 100%; margin-top: 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--raised); }
.hv-files { margin: 12px 0 0; padding-left: 1.2em; color: var(--slate); }

/* The writing area is for drawing only: no text selection, copy menu or magnifier. */
.ink-wrap, .ink-wrap canvas {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Phones: finger writing needs room. The writing area takes most of the screen
   and the page scrolls to reach the tools above it. */
@media (max-width: 700px) {
  body.with-sidebar { height: auto; overflow: visible; }
  .workspace { overflow: visible; }
  main { padding: 12px; }
  .ink-wrap { min-height: 70vh; min-height: 70dvh; }
  #editor { min-height: 60vh; min-height: 60dvh; }
  .toolbar { padding: 8px 12px; }
  .subbar, .attach-bar, .history-bar { padding-left: 12px; padding-right: 12px; }
}

/* "Started Mon, Oct 19, 6:02 AM" above the writing area. */
.note-stamp { margin: 0; padding: 8px 20px 0; color: var(--slate); font-size: 0.9rem; text-align: right; }
/* Always takes its line, even before a note starts, so nothing shifts when the stamp appears. */
.note-stamp { height: 30px; line-height: 22px; overflow: hidden; white-space: nowrap; box-sizing: border-box; }
@media (min-width: 900px) { .note-stamp { padding: 10px 40px 0; } }

/* ---- Ask Claude panel ---- */
.claude-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--raised);
  border-left: 1px solid var(--line);
  box-shadow: -8px 0 24px rgba(14, 23, 47, 0.18);
  z-index: 18;
  padding-top: env(safe-area-inset-top);
}
.cp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--navy);
  color: var(--on-navy);
}
.cp-head h2 { flex: 1; margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 1.4rem; color: var(--rose); }
.cp-close {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--navy-hover); background: transparent; color: var(--on-navy); font-size: 1.1rem; cursor: pointer;
}
.cp-head .cp-small { background: transparent; color: var(--on-navy-soft); border-color: var(--navy-hover); }
.cp-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.cp-chip {
  background: var(--blush); color: var(--navy); border: 1px solid var(--rose);
  border-radius: 999px; padding: 6px 12px; min-height: 40px; cursor: pointer;
}
.cp-chip:hover { background: var(--raised); }
.cp-log { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.cp-hint { color: var(--slate); margin: 0; }
.cp-msg { border-radius: 10px; padding: 10px 12px; }
.cp-msg.from-you { background: var(--paper); align-self: flex-end; max-width: 90%; }
.cp-msg.from-claude { background: var(--blush); border: 1px solid var(--rose); }
.cp-who { margin: 0 0 4px; font-size: 0.8rem; font-weight: 600; color: var(--slate); }
.cp-text { margin: 0; white-space: pre-wrap; line-height: 1.5; color: var(--ink); }
.cp-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cp-small {
  background: var(--raised); color: var(--navy); border: 1px solid var(--line);
  border-radius: 6px; padding: 6px 10px; min-height: 40px; cursor: pointer;
}
.cp-small:hover { border-color: var(--rose); }
.cp-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px 14px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.cp-include { grid-column: 1 / -1; color: var(--slate); display: flex; align-items: center; gap: 8px; }
.cp-include input { width: 20px; height: 20px; accent-color: var(--navy); }
.cp-form textarea {
  font-size: 16px; /* no Safari zoom */
  padding: 10px; border: 1px solid var(--on-navy-muted); border-radius: 8px; resize: none;
}
.cp-form .share-btn { align-self: end; }
.cp-form .share-btn:disabled { opacity: 0.6; }

/* ---- Send to Serena: four icon buttons, one per box ---- */
.send-group { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.send-caption { font-size: 0.72rem; color: var(--on-navy-muted); letter-spacing: 0.02em; }
.send-icons { display: flex; gap: 6px; }
.send-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--rose);
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.send-icon:hover:not(:disabled) { background: var(--on-navy); }
.send-icon:disabled { opacity: 0.55; cursor: default; }
.send-icon .box-icon { width: 28px; height: 28px; }
/* On rose, the icons' rose accents switch to white so they still show. */
.send-icon .box-icon [stroke="#BBA49F"] { stroke: #FFFFFF; }
.send-icon .box-icon [fill="#BBA49F"] { fill: #FFFFFF; }
.send-icon.sending { opacity: 1; animation: send-pulse 0.9s ease-in-out infinite; }
@keyframes send-pulse { 50% { background: var(--on-navy); } }

/* ---- Long page: ▲ ▼ at the right edge ---- */
.page-nav {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
}
.page-nav .nav-btn { background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 8px rgba(14, 23, 47, 0.15); font-size: 1rem; }
.page-nav .nav-btn:disabled { opacity: 0.3; }
.hv-images .hv-image, #hvImages .hv-image { margin-top: 12px; }

/* The Apple-style share button (square with an up arrow). */
.share-sheet-btn { display: grid; place-items: center; width: 46px; padding: 0; }
.share-sheet-btn svg { width: 24px; height: 24px; }

/* ---- Highlighters ---- */
/* The highlighter layer blends like a real highlighter: what's under it shows through. */
#hlCanvas { mix-blend-mode: multiply; pointer-events: none; }
#inkCanvas { position: absolute; }
.hl-swatch {
  width: 30px;
  height: 36px;
  border-radius: 4px 4px 8px 8px;  /* a chisel-ish highlighter tip */
  border: 2px solid var(--raised);
  box-shadow: 0 0 0 1px var(--line);
  background: var(--c);
  cursor: pointer;
}
.hl-swatch.active { box-shadow: 0 0 0 3px var(--navy); }

/* Narrow screens: the toolbar buttons wrap onto another line instead of squeezing. */
.toolbar-actions { flex-wrap: wrap; align-items: center; }
@media (max-width: 700px) {
  .toolbar-actions { width: 100%; }
  .send-group { order: -1; width: 100%; align-items: flex-start; }
}

/* ---- Ask AI: which AI answers ---- */
.cp-who-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 0; flex-wrap: wrap; }
.cp-seg { display: flex; gap: 4px; background: var(--paper); padding: 4px; border-radius: 8px; border: 1px solid var(--line); }
.cp-seg-btn { background: transparent; border: none; border-radius: 6px; padding: 8px 16px; min-height: 40px; color: var(--navy); cursor: pointer; }
.cp-seg-btn.active { background: var(--navy); color: var(--on-navy); font-weight: 600; }

/* Phones have no sidebar, so no navy strip behind it either. */
@media (max-width: 700px) {
  html:has(body.with-sidebar) { background: #F4F6F8; }
}

/* ---- One size for every button: 44 × 44 rounded squares, icons inside ---- */
:root { --btn: 44px; --btn-radius: 10px; --icon: 24px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ui-icon { width: var(--icon); height: var(--icon); display: block; }

/* Top bar */
.toolbar { flex-wrap: nowrap; gap: 10px; padding-left: 16px; padding-right: 16px; }
.toolbar-actions { flex-wrap: nowrap; gap: 6px; }
.icon-btn, .icon-seg, .send-icon {
  width: var(--btn);
  height: var(--btn);
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: var(--btn-radius);
}
.seg { gap: 2px; padding: 3px; border-radius: 12px; }
.icon-seg { color: var(--on-navy-soft); }
.icon-seg.active { color: var(--navy); }
.icon-btn { color: var(--on-navy-soft); }
.share-sheet-btn { width: var(--btn); height: var(--btn); border-radius: var(--btn-radius); }
.send-icon .box-icon { width: var(--icon); height: var(--icon); }
.send-caption { font-size: 0.68rem; }
.send-group { gap: 1px; }

/* Tool rows: colors, highlighters, widths and tools all the same square */
.subbar { flex-wrap: nowrap; gap: 6px; padding-top: 8px; padding-bottom: 8px; }
.tool-group { gap: 6px; }
.swatch, .hl-swatch, .width-btn, .icon-tool, .convert-btn {
  width: var(--btn);
  height: var(--btn);
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: var(--btn-radius);
}
.swatch, .hl-swatch { border: 3px solid var(--raised); box-shadow: 0 0 0 1px var(--line); }
.swatch.active, .hl-swatch.active { box-shadow: 0 0 0 3px var(--navy); }
.icon-tool { color: var(--navy); }
.icon-tool:disabled { color: var(--on-navy-muted); }
.convert-btn { margin-left: auto; color: var(--on-navy); }
.paper-pick select { height: var(--btn); min-height: 0; border-radius: var(--btn-radius); }
.subbar-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* "Serena" (shorter than "Serena Jobs") fits beside the buttons on every iPad size,
   so the name always shows. If a longer name comes back (docs/wordmark-options.html),
   hiding .logo-text below 1250px wide made room for it. */

/* Phones: rows wrap as needed (there's no room for one row). */
@media (max-width: 700px) {
  .toolbar, .toolbar-actions, .subbar { flex-wrap: wrap; }
  .subbar-hint { white-space: normal; }
}
/* Write tools must fit one row on a smaller iPad on its side: tight, even gaps,
   squares that never squeeze, and a compact Paper menu. */
#writeTools { gap: 4px; padding-left: 12px; padding-right: 12px; }
#writeTools .tool-group { gap: 4px; }
#writeTools button { flex-shrink: 0; }
#writeTools .tool-group + .tool-group, #writeTools .paper-pick { margin-left: 6px; }
.paper-pick select { width: 84px; padding: 0 6px; }
#writeTools { padding-left: 8px; padding-right: 8px; }
#writeTools .tool-group + .tool-group, #writeTools .paper-pick { margin-left: 2px; }
.paper-pick select { width: 74px; }

/* Portrait iPad and smaller: not enough width for single rows, so they wrap. */
@media (max-width: 1100px) {
  .toolbar, .toolbar-actions, .subbar { flex-wrap: wrap; }
}

/* In Write the format buttons only set what Convert to text will use: dimmed, still tappable. */
.format-toggle.muted { opacity: 0.45; }
.format-toggle.muted:hover { opacity: 0.8; }

/* Kevin preferred the original shapes: round ink dots and chisel-tip highlighters,
   kept at the row's 44-point height so everything still lines up. */
.swatch { border-radius: 50%; }
.hl-swatch { width: 34px; border-radius: 5px 5px 12px 12px; }

/* Home-screen app on the iPad: the page must reach the very bottom of the window,
   under the home bar, or iPadOS shows a plain white band there. Use the screen's
   full height (lvh), and keep the content itself clear of the bottom edge. */
html { background-color: #F4F6F8; min-height: 100%; }
body.with-sidebar { height: 100vh; height: 100lvh; }
.sidebar { height: 100%; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.workspace main { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
@media (max-width: 700px) { body.with-sidebar { height: auto; } }
.cp-seg[hidden] { display: none; }
/* Claude | Grok | Free on the left, ChatGPT ↗ and OpenEvidence ↗ on the right, one row
   on every device (Kevin, October 27 and November 3, 2026). The panel is never wider than
   400 points (on phones, the screen's width), which isn't room for all five with names,
   so Claude and Grok show their logos alone (names in title and aria-label), OpenEvidence
   is "OpenEv", and narrower phones tighten the spacing, then drop the ↗ arrows. */
.claude-panel { container-type: inline-size; }
.cp-who-bar { justify-content: space-between; flex-wrap: nowrap; gap: 6px; }
.cp-seg { flex: none; }
.ai-btn { padding: 8px 11px; white-space: nowrap; }
.ai-name { display: none; }
.cp-links { display: flex; gap: 6px; margin-left: auto; flex: none; }
.cp-out { white-space: nowrap; padding: 6px 8px; }
@container (max-width: 380px) {
  .cp-who-bar, .cp-links { gap: 4px; }
  .ai-btn { padding: 8px 9px; font-size: 15px; }
  .cp-out { padding: 6px 6px; font-size: 15px; }
}
@container (max-width: 345px) { .cp-arrow { display: none; } }

/* ---- Note tabs (like browser tabs) ---- */
/* Always shown, always the same height, so switching tabs never moves the page. */
.tab-bar {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 52px;
  flex: none;
  padding: 6px 20px 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.tab-list {
  display: flex;
  gap: 4px;
  min-width: 0;
  flex: 0 1 auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  align-self: stretch;
  align-items: flex-end;
}
.tab-list::-webkit-scrollbar { display: none; }
.tab {
  display: flex;
  align-items: center;
  flex: none;
  max-width: 220px;
  height: 44px;
  background: #E8ECF2;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
}
.tab.active { background: var(--raised); box-shadow: 0 1px 0 var(--raised); }
.tab-main {
  background: none;
  border: none;
  height: 44px;
  padding: 0 4px 0 14px;
  color: var(--slate);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.tab.active .tab-main { color: var(--navy); font-weight: 600; }
.tab.sent .tab-main { color: var(--slate); }
/* A rose dot: this tab has work that hasn't been sent. */
.tab.unsent .tab-main::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--rose); vertical-align: middle; }
.tab-x {
  width: 36px;
  height: 44px;
  background: none;
  border: none;
  color: var(--slate);
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: 0 10px 0 0;
}
.tab-x:hover { color: var(--navy); background: rgba(14, 23, 47, 0.06); }
.tab-new {
  flex: none;
  width: 44px;
  height: 44px;
  margin-bottom: 0;
  align-self: flex-end;
  border: 1px dashed var(--on-navy-muted);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: transparent;
  color: var(--navy);
  font-size: 1.5rem;
  cursor: pointer;
}
.tab-new:hover { background: var(--raised); }
.edit-again { margin-left: auto; align-self: center; height: 40px; min-height: 0; margin-bottom: 4px; background: var(--navy); color: var(--on-navy); border-color: var(--navy); font-weight: 600; }
.edit-again:hover { background: var(--navy-hover); }

/* One fixed-height line: files on the left, "Started …" on the right. */
.note-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  flex: none;
  padding: 0 20px;
}
.note-meta .attach-bar {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0;
  background: none;
  border: none;
  scrollbar-width: none;
}
.note-meta .note-stamp { flex: none; margin-left: auto; padding: 0; height: auto; }
.note-meta .chip { flex: none; }
@media (min-width: 900px) { .note-meta, .tab-bar { padding-left: 40px; padding-right: 40px; } }

/* A sent tab: what was sent fills the writing area; the tools stay where they are, dimmed. */
body.viewing-sent .subbar,
body.viewing-sent .note-meta .attach-bar,
body.viewing-sent .send-group,
body.viewing-sent .format-toggle,
body.viewing-sent #cameraBtn,
body.viewing-sent #attachBtn { opacity: 0.4; pointer-events: none; }
.history-view { margin: 0; }

@media (max-width: 700px) {
  .tab-bar, .note-meta { padding-left: 12px; padding-right: 12px; }
  .tab { max-width: 160px; }
  .tab-main { max-width: 120px; }
}
/* Type, Write and Speak tool rows are exactly the same height, so changing mode
   (or switching to a tab in another mode) doesn't move the page. */
#typeTools, #writeTools, #speakTools { min-height: 61px; }
@media (min-width: 1101px) {
  #typeTools, #writeTools, #speakTools { height: 61px; }
  /* What's being heard stays visible, on the same row as the button. */
  #speakTools .heard { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #speakTools .subbar-hint { flex: 0 1 auto; }
}

/* The time, files and Edit again live on the right of the tab bar now, and the
   text box starts just below the tabs. */
.tab-bar .note-meta {
  /* Never squeezed: the tab strip (which scrolls) gives way, so Edit again can't
     slide over the + button. Files take at most half the bar. */
  flex: 0 0 auto;
  margin-left: auto;
  max-width: 50%;
  min-width: 0;
  height: 44px;
  padding: 0;
  gap: 8px;
  justify-content: flex-end;
  align-self: center;
}
.tab-bar .edit-again { margin: 0; }
.tab-list { flex: 0 1 auto; }
main { padding-top: 0; }
/* Phones: the time is the first thing to give way when tabs need the room. */

/* ---- iPhone: stay clear of the camera notch / Dynamic Island and status bar ---- */
/* The phone rule above set "padding: 8px 12px", which wiped out the safe-area
   top padding. Restate it last, and keep clear of the notch's sides in landscape. */
.toolbar {
  padding-top: max(10px, env(safe-area-inset-top));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
@media (max-width: 700px) {
  .toolbar {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  main { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}



/* Slightly tighter gaps keep the top bar on one row on a smaller iPad turned sideways. */
@media (min-width: 1101px) {
  .toolbar { gap: 6px; }
  .toolbar-actions { gap: 4px; }
}
/* "Edit again" never squeezes onto two lines; on phones the tabs give way instead. */
.edit-again { white-space: nowrap; flex: none; padding: 0 14px; }
@media (min-width: 1101px) {
  .toolbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .logo { gap: 8px; }
}

/* A sent note shows exactly where it was written: same box, same edges, same
   text margins as the editor, handwriting from the very top of the box. */
.history-view { padding: 0; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); }
.hv-meta { display: none; }
.hv-text { padding: 20px; font-size: 1.15rem; line-height: 1.6; margin: 0; }
#hvImages .hv-image, .hv-image { display: block; width: 100%; max-width: none; margin: 0; border: 0; border-radius: 0; }
.hv-text:not(.hidden) + #hvImages .hv-image:first-child { border-top: 1px solid var(--line); }
.hv-files { margin: 0; padding: 12px 20px 16px 40px; }
.hv-files:empty { display: none; }
/* The sent note is tinted lightly, so it reads as finished but doesn't shift anything. */
body.viewing-sent .history-view { background: #FCF9F8; }

/* The small line under the tabs: sent and started on the left, updated on the right.
   Always the same height (even when empty), so the text box never moves. */
.stamp-line {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  height: 26px; flex: none; padding: 0 20px;
  font-size: 0.8rem; color: var(--slate); white-space: nowrap;
}
.stamp-line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.stamp-line .note-stamp { margin: 0 0 0 auto; padding: 0; height: auto; line-height: inherit; font-size: inherit; text-align: right; }
.stamp-line .sent-stamp { color: var(--navy); font-weight: 700; flex: none; }
.stamp-line .sent-stamp:empty { display: none; }
.stamp-line .note-stamp { flex: none; } /* "Updated …" always whole; "Started …" gives way */
@media (max-width: 700px) { .stamp-line .start-stamp { display: none; } }
/* A sent note already has "Sent ✓ …" on the left; "Started …" joins it only where there's room. */
@media (max-width: 1000px) { body.viewing-sent .stamp-line .start-stamp { display: none; } }
@media (min-width: 900px) { .stamp-line { padding: 0 40px; } }
@media (max-width: 700px) { .stamp-line { padding: 0 12px; font-size: 0.75rem; } }

/* Integrations setup: linked calendars */
.int-cal-host { flex: none; color: var(--slate); font-size: 0.85rem; }
.int-cal-status { margin: 4px 0 0; }
.int-cal-help summary { cursor: pointer; color: var(--navy); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.int-cal-help p { margin: 4px 0 8px; }

/* ---- Apps menu ---- */
.apps-wrap { position: relative; flex: none; }
.apps-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(14, 23, 47, 0.25);
  z-index: 25;
}
.apps-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 12px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--navy);
  font-size: 1.05rem;
  text-align: left;
  cursor: pointer;
}
.apps-item:hover, .apps-item:focus-visible { background: var(--blush); }
@media (max-width: 700px) { .apps-menu { right: auto; left: 0; } }

/* With the Web button gone (October 20, 2026), "Serena" fits beside the Apps
   button on every iPad size again, so the name always shows. */

/* =====================================================================
   Rose look (Kevin, October 20, 2026): rose and navy swapped in the "chrome"
   (top bar, sidebar, Ask AI header). Chosen per person and saved on their
   account (skin.js). The writing area stays light in both looks.
   Inside the chrome, the colour variables are redefined, so every rule that
   paints "navy chrome with rose accents" paints "rose chrome with navy accents".
   ===================================================================== */
html[data-skin="rose"] .toolbar,
html[data-skin="rose"] .sidebar,
html[data-skin="rose"] .cp-head {
  --navy: #BBA49F;          /* chrome background */
  --navy-deep: #AA918B;     /* panels on the chrome (button groups) */
  --navy-hover: #C9B7B2;    /* hover, and borders on the chrome */
  --navy-divider: #A58C86;
  --rose: #0E172F;          /* the accent: chosen buttons, send boxes, today */
  --on-navy: #0E172F;       /* text on the chrome */
  --on-navy-soft: #1C2440;
  --on-navy-muted: #3A4462;
}
/* Active buttons on the rose chrome: navy with Paper White. */
html[data-skin="rose"] .toolbar .seg-btn.active,
html[data-skin="rose"] .toolbar .icon-seg.active { color: #F4F6F8; }
html[data-skin="rose"] .send-icon { color: #F4F6F8; }
html[data-skin="rose"] .send-icon .box-icon [stroke="#0E172F"] { stroke: #F4F6F8; }
html[data-skin="rose"] .send-icon .box-icon [stroke="#BBA49F"] { stroke: #BBA49F; }
html[data-skin="rose"] .send-icon .box-icon [fill="#BBA49F"] { fill: #BBA49F; }
html[data-skin="rose"] .send-icon:hover:not(:disabled) { background: #25314F; }
html[data-skin="rose"] .sb-day.today { color: #F4F6F8; }
/* The sailboat: navy sail and hull on rose, the other sail Paper White. */
html[data-skin="rose"] .logo-mark path:nth-child(2),
html[data-skin="rose"] .logo-mark path:nth-child(3) { fill: #0E172F; }
html[data-skin="rose"] .share-sheet-btn svg path { stroke: #1C2440; }
html[data-skin="rose"] .send-caption { color: #1C2440; }
/* Behind the sidebar, to the bottom edge. */
html[data-skin="rose"]:has(body.with-sidebar) { background: linear-gradient(to right, #BBA49F 176px, #F4F6F8 176px); }
@media (max-width: 700px) { html[data-skin="rose"]:has(body.with-sidebar) { background: #F4F6F8; } }
/* The look switch sits below the apps, set apart by a line. */
.apps-item.apps-action { border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 4px; padding-top: 4px; }
/* On rose, the dimmed months need a little more ink to stay readable. */
html[data-skin="rose"] .sb-month:not(.current) { opacity: 0.6; }

/* ---- Integrations panel (shares the Ask AI panel's frame) ---- */
.int-panel { z-index: 18; }
.int-list, .int-setup { flex: 1; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.int-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 4px 8px; border-radius: 10px; }
.int-list .int-row { background: var(--paper); }
.int-icon { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: var(--navy); color: var(--on-navy); }
html[data-skin="rose"] .int-icon { background: var(--rose); color: var(--navy); }
.int-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--navy); font-weight: 600; }
.int-acts { display: flex; gap: 6px; flex: none; }
.int-acts .cp-small { min-height: 40px; }
.int-send { background: var(--navy); color: var(--on-navy); border-color: var(--navy); font-weight: 600; }
.int-send:hover { background: var(--navy-hover); }
.int-mini { width: 40px; padding: 0; }
.int-mini:disabled { opacity: 0.35; }
/* Dragging to reorder: the grip, and the row being carried. */
.int-setup-row { background: var(--paper); }
.int-grip { flex: none; width: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; color: var(--slate); cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.int-sorting, .int-sorting * { cursor: grabbing; -webkit-user-select: none; user-select: none; }
.int-setup-row.dragging { position: relative; z-index: 2; background: #FFFFFF; box-shadow: 0 6px 18px rgba(14,23,47,0.22); }
.int-foot { display: flex; align-items: center; gap: 10px; padding: 10px 14px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.int-hint { flex: 1; margin: 0; color: var(--slate); font-size: 0.9rem; }
#intGear.active { background: var(--blush); border-color: var(--rose); }
.int-sec { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.int-sec:last-child { border-bottom: none; }
.int-sec-title { margin: 6px 0 2px; font-size: 0.95rem; color: var(--slate); font-weight: 600; }
.int-switch-row { cursor: pointer; }
/* Recently closed (setup): the account's trash, with Restore. */
.int-trash { display: flex; flex-direction: column; gap: 4px; }
.int-trash-row { background: var(--paper); }
.int-trash-words { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.int-trash-when { color: var(--slate); font-size: 0.85rem; }
.int-trash-row .cp-small { min-height: 40px; flex: none; }
.int-trash-more { align-self: flex-start; }
.int-switch-row:hover { background: var(--paper); }
/* A switch: a navy pill with a white knob when on. */
.int-switch { appearance: none; -webkit-appearance: none; flex: none; width: 50px; height: 30px; border-radius: 999px; background: var(--line); position: relative; cursor: pointer; transition: background .15s; }
.int-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
.int-switch:checked { background: var(--navy); }
.int-switch:checked::after { left: 23px; }
.int-switch:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.int-input { font-size: 16px; min-height: 44px; padding: 0 12px; border: 1px solid var(--on-navy-muted); border-radius: 8px; width: 100%; }
.int-add { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.int-add .int-send { align-self: flex-start; min-height: 44px; padding: 0 16px; }
.int-look { align-self: flex-start; }

/* ---- Write tools folded away to a short bar (fold button, eraser, undo, redo, paper) ---- */
.fold-btn { position: relative; }
.fold-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--c, #0E172F); box-shadow: 0 0 0 1px var(--line); }
.fold-dot.erasing { background: var(--raised); box-shadow: inset 0 0 0 2px var(--slate); }
.fold-chev { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; transform: rotate(180deg); transition: transform .15s; }
#writeTools.folded .fold-chev { transform: none; }
#writeTools.folded .tool-group[aria-label="Pen color"],
#writeTools.folded .tool-group[aria-label="Highlighter"],
#writeTools.folded .width-btn,
#writeTools.folded #clearBtn,
#writeTools.folded #openMarkupBtn,
#writeTools.folded #removePhotoBtn { display: none; }
#writeTools.folded { flex-wrap: nowrap; }
#writeTools.folded .convert-btn { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .fold-chev { transition: none; } }

/* ---- Calc and the day calendar: two buttons at the end of the tools row ---- */
.quick-tools { display: flex; gap: 4px; margin-left: auto; flex: none; }
.quick-tools .icon-tool.active { background: var(--blush); border-color: var(--rose); }

/* ---- The calculator, under the typed note (Type, with Calc on) ---- */
main.calc-on { flex-direction: column; gap: 10px; }
main.calc-on #editor { min-height: 120px; }
.calc-panel {
  flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); -webkit-user-select: none; user-select: none;
}
.calc-screen { display: flex; flex-direction: column; min-width: 0; gap: 4px; }
.calc-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.calc-fill { flex: 1; }
.calc-small { min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); color: var(--navy); font: inherit; font-size: 0.85rem; cursor: pointer; white-space: nowrap; }
.calc-small:hover { background: var(--blush); }
.calc-tape { flex: 1 1 0; min-height: 60px; overflow-y: auto; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); }
.calc-line-btn { display: flex; justify-content: space-between; gap: 12px; width: 100%; min-height: 36px; padding: 4px 10px; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; text-align: left; cursor: pointer; color: var(--slate); }
.calc-line-btn:hover { background: var(--blush); }
.calc-line.editing .calc-line-btn { background: var(--blush); color: var(--navy); }
.calc-line-e { min-width: 0; overflow-wrap: anywhere; }
.calc-line-r { flex: none; color: var(--navy); font-weight: 600; font-variant-numeric: tabular-nums; }
.calc-empty { padding: 8px 10px; color: var(--placeholder); font-size: 0.9rem; }
.calc-editing { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.85rem; color: var(--slate); }
.calc-expr {
  width: 100%; box-sizing: border-box; resize: none; overflow-y: auto;
  min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: #FFFFFF; color: var(--navy); font: inherit; font-size: 1.4rem; line-height: 1.3; text-align: right;
  font-variant-numeric: tabular-nums; -webkit-user-select: text; user-select: text;
}
.calc-expr:focus { outline: 2px solid var(--rose); outline-offset: 1px; }
.calc-preview { min-height: 1.4em; text-align: right; color: var(--slate); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.calc-preview.err { color: #B3261E; }
.calc-keys { display: grid; grid-template-columns: repeat(6, 52px); grid-auto-rows: 44px; gap: 5px; align-content: end; }
.calc-key { border: 1px solid var(--line); border-radius: 10px; background: var(--raised); color: var(--navy); font: inherit; font-size: 1rem; cursor: pointer; touch-action: manipulation; padding: 0; }
.calc-key:hover { background: #FAFBFC; border-color: var(--rose); }
.calc-key:active { background: var(--blush); }
.calc-key.calc-num { font-size: 1.15rem; font-weight: 600; background: #FFFFFF; }
.calc-key.calc-op { background: var(--blush); font-size: 1.2rem; }
.calc-key.calc-eq { background: var(--navy); color: var(--on-navy); border-color: var(--navy); font-size: 1.25rem; }
.calc-key.calc-add { background: var(--rose); color: var(--navy); border-color: var(--rose); font-weight: 600; }
.calc-key.on { background: var(--rose); color: var(--navy); border-color: var(--rose); }

/* iPhone: big keys docked to the bottom of the screen; the note fills the space above. */
@media (max-width: 700px) {
  .calc-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; grid-template-columns: 1fr; gap: 6px;
    border-radius: 14px 14px 0 0; border-bottom: 0; box-shadow: 0 -4px 16px rgba(14, 23, 47, 0.12);
    padding: 8px 10px max(8px, env(safe-area-inset-bottom)); }
  main.calc-on { padding-bottom: calc(var(--calc-h, 420px) + 12px); }
  main.calc-on #editor { min-height: 0; height: max(130px, calc(100dvh - var(--calc-h, 420px) - 100px)); flex: none; }
  .calc-screen { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 6px; align-items: center; position: relative; }
  .calc-head { display: contents; }
  .calc-fill, .calc-mode, .calc-tonote { display: none; }
  .calc-tape { grid-column: 1; grid-row: 1; flex: none; height: 38px; min-height: 0; }
  .calc-line-btn { min-height: 36px; padding: 2px 10px; }
  .calc-editing { grid-column: 1 / -1; grid-row: 2; }
  .calc-expr { grid-column: 1 / -1; grid-row: 3; min-height: 52px; padding: 6px 10px; font-size: 2rem; line-height: 1.2; }
  /* No row of its own: the running answer sits inside the display, on its left,
     and the tape's trash can sits at the tape's right end. */
  .calc-preview { grid-column: 1 / -1; grid-row: 3; align-self: center; justify-self: start; z-index: 1;
    padding-left: 12px; text-align: left; min-height: 0; pointer-events: none; font-size: 1rem; }
  .calc-cleartape { grid-column: 2; grid-row: 1; width: 38px; height: 38px; min-height: 0; padding: 0; display: grid; place-items: center; }
  .calc-cleartape-word { display: none; }
  .calc-keys.calc-keys-phone { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 54px; gap: 6px; }
  .calc-keys-phone .calc-key { font-size: 1.15rem; border-radius: 12px; }
  .calc-keys-phone .calc-key.calc-num { font-size: 1.6rem; font-weight: 500; }
  .calc-keys-phone .calc-key.calc-op, .calc-keys-phone .calc-key.calc-eq { font-size: 1.6rem; }
}

/* ---- Day calendar page ---- */
.day-panel { z-index: 19; }
.day-nav { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.day-nav .icon-tool { font-size: 1.5rem; line-height: 1; }
.day-status { flex: 1; text-align: right; color: var(--slate); font-size: 0.85rem; }
.day-rows { flex: 1; overflow-y: auto; margin: 0; padding: 0 14px 16px; list-style: none; }
.day-row { display: flex; gap: 10px; min-height: 44px; border-top: 1px dashed var(--line); }
.day-row.hour { border-top: 1px solid #C9D3E3; }
.day-row.busy { background: linear-gradient(90deg, transparent 58px, rgba(187, 164, 159, 0.12) 58px); }
.day-row.now { box-shadow: inset 0 2px 0 var(--rose); }
.day-time { flex: none; width: 48px; padding-top: 4px; text-align: right; color: var(--slate); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.day-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 3px 0; }
.day-event { display: flex; flex-direction: column; padding: 4px 10px; border-radius: 8px; background: var(--navy); color: var(--on-navy); border-left: 4px solid var(--rose); }
.day-event.sent { background: var(--blush); color: var(--navy); border-left-color: var(--slate); }
.day-event-title { font-weight: 600; overflow-wrap: anywhere; }
.day-event-time { font-size: 0.8rem; opacity: 0.85; }
.day-add { display: flex; gap: 6px; align-items: center; }
.day-input { flex: 1; min-width: 0; min-height: 36px; padding: 0 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; font: inherit; font-size: 16px; color: var(--navy); }
.day-input::placeholder { color: transparent; }
.day-row:hover .day-input::placeholder, .day-input:focus::placeholder { color: var(--placeholder); }
.day-input:focus { border-color: var(--rose); background: #FFFFFF; outline: none; }
.day-row.typing .day-input { border-color: var(--line); background: #FFFFFF; }
.day-len { flex: none; min-height: 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); font: inherit; font-size: 16px; }
.day-send { flex: none; min-height: 36px; }

/* ---- iPhone header in three rows (Kevin, October 24, 2026) ----
   Row 1: name, Type/Write/Speak, Integrations, Log out.
   Row 2: the four formats, Attach, Camera, Ask AI.
   Row 3: Send to Serena's boxes and Share.
   The old fourth row of buttons is gone. The two empty pseudo-elements end rows. */
@media (max-width: 700px) {
  .toolbar { flex-wrap: wrap; column-gap: 6px; row-gap: 4px; align-items: center; }
  .toolbar-actions { display: contents; }
  .toolbar .logo { order: 1; }
  .toolbar .seg:not(.format-toggle) { order: 2; }
  #appsBtn { order: 3; margin-left: auto; }
  #logoutBtn { order: 4; }
  .toolbar::before { content: ""; order: 5; flex-basis: 100%; height: 0; }
  .toolbar .format-toggle { order: 6; }
  #attachBtn { order: 7; margin-left: auto; }
  #cameraBtn { order: 8; }
  #claudeBtn { order: 9; }
  .toolbar::after { content: ""; order: 10; flex-basis: 100%; height: 0; }
  .toolbar .send-group { order: 11; flex: 0 1 auto; width: auto; }
  #shareSheetBtn { order: 12; margin-left: auto; align-self: flex-end; }
  /* The white row stays on one line: no hints, and the paper menu only when unfolded. */
  #typeTools .subbar-hint, #speakTools .subbar-hint { display: none; }
  #typeTools, #speakTools, #writeTools.folded { flex-wrap: nowrap; }
  /* Opened pens and tools wrap onto more lines instead of widening the screen. */
  #writeTools:not(.folded) { flex-wrap: wrap; }
  #writeTools.folded .paper-pick { display: none; }
}
@media (max-width: 384px) { .toolbar .logo-text { display: none; } }
/* Side panels (day page, Ask AI, Integrations) open in front of the docked calculator. */
.claude-panel:not(.hidden) { z-index: 40; }
/* iPhone Speak row: the talk button and Clear keep their size; what's heard shrinks. */
@media (max-width: 700px) {
  #speakTools .icon-tool { flex: none; white-space: nowrap; }
  #speakTools .heard { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
}
/* Shorter iPhones (SE, mini): slightly shorter keys so the note keeps some room. */
@media (max-width: 700px) and (max-height: 720px) {
  .calc-keys.calc-keys-phone { grid-auto-rows: 46px; }
  .calc-tape { height: 34px; }
}
/* Day page: all-day items and long blocks across the top of the day. */
.day-allday { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--paper); max-height: 30%; overflow-y: auto; }
.day-top-event { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; padding: 4px 10px; border-radius: 8px; background: var(--blush); color: var(--navy); border-left: 4px solid var(--navy); }
.day-top-event.all-day { border-left-color: var(--rose); }
/* Number keys in navy so they stand out (Kevin, October 24, 2026); = turns rose and
   Add white-with-rose, so neither gets lost among the numbers. */
.calc-key.calc-num { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
.calc-key.calc-num:hover { background: var(--navy-hover); border-color: var(--navy-hover); }
.calc-key.calc-num:active { background: #25314F; }
.calc-key.calc-eq { background: var(--rose); color: var(--navy); border-color: var(--rose); font-weight: 700; }
.calc-key.calc-add { background: #FFFFFF; color: var(--navy); border: 2px solid var(--rose); }

/* The tape's clear: the word on iPad, a trash can on iPhone (see the phone rules). */
.calc-cleartape-icon { display: none; }
@media (max-width: 700px) { .calc-cleartape-icon { display: block; } }

/* ---- Wide screens (iPad on its side, computers): the calculator beside the note ----
   (Kevin, October 24, 2026). The note keeps its full height; the calculator is a
   column on the right, keys at the bottom, and the tape fills the space above them. */
@media (min-width: 1000px) and (orientation: landscape) {
  main.calc-on { flex-direction: row; gap: 12px; }
  main.calc-on #editor { min-height: 0; }
  main.calc-on .calc-panel { width: 372px; display: flex; flex-direction: column; gap: 10px; }
  main.calc-on .calc-screen { flex: 1 1 auto; min-height: 0; }
  main.calc-on .calc-tape { flex: 1 1 0; min-height: 80px; }
  main.calc-on .calc-keys { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* Day page refresh: the arrow turns while the calendars are read. */
#dayRefresh.spinning svg { animation: day-spin 0.9s linear infinite; }
@keyframes day-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #dayRefresh.spinning svg { animation: none; opacity: 0.5; } }

/* ---- Write: the writing view (Kevin, October 24, 2026) ----
   Scrolling up on the paper folds the toolbar, tools row and tabs away (ink.js adds
   body.write-focus); the writing box then fills the screen, clear of the iPhone's
   notch. ▲ ▼ sit at the box's top right so they're always in view. */
:root { --safe-top: env(safe-area-inset-top, 0px); }
.page-nav { top: 10px; bottom: auto; }
body.write-focus .toolbar,
body.write-focus .subbar,
body.write-focus .tab-bar,
body.write-focus .stamp-line { display: none; }
body.write-focus main { padding-top: max(8px, env(safe-area-inset-top)); }
/* Full width always (main is a row; without it the box shrinks to nothing). */
body.write-focus #inkWrap { flex: 1 1 auto; width: 100%; min-width: 0; height: calc(100dvh - max(8px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)) - 8px); min-height: 300px; }
/* iPhone header: two buttons on the right of each row (Kevin, October 24, 2026):
   Integrations + Log out (the app) / Attach + Camera (add to the note) /
   Ask AI + Share (do something with the note, beside Send to Serena). */
@media (max-width: 700px) {
  #claudeBtn { order: 12; margin-left: auto; align-self: flex-end; }
  #shareSheetBtn { order: 13; margin-left: 0; }
}
/* With five formats (Checklist, October 25, 2026) the iPad's top bar is a little too
   wide on an 11-inch iPad on its side: there, its buttons are 4 points narrower
   (same height), so everything, Log out included, fits on one row with the name. */
@media (min-width: 1101px) and (max-width: 1250px) {
  .toolbar .icon-seg, .toolbar .icon-btn, .toolbar .send-icon, .toolbar .share-sheet-btn { width: 40px; min-width: 40px; }
  .toolbar { gap: 5px; }
}

/* ---- Contacts panel (contacts.js) ---- */
.ct-panel { z-index: 19; }
.ct-top { display: flex; gap: 6px; align-items: center; padding: 10px 14px 4px; }
.ct-search { flex: 1; min-width: 0; font-size: 16px; }
#contactsRefresh.spinning svg { animation: day-spin 0.9s linear infinite; }
@media (prefers-reduced-motion: reduce) { #contactsRefresh.spinning svg { animation: none; opacity: 0.5; } }
.ct-status { margin: 0; padding: 0 14px 6px; color: var(--slate); font-size: 0.85rem; }
.ct-list { flex: 1; overflow-y: auto; margin: 0; padding: 0 14px 16px; list-style: none; }
.ct-row { border-bottom: 1px solid var(--line); }
.ct-head { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 52px; padding: 6px 4px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.ct-head:hover { background: var(--paper); }
.ct-name { color: var(--navy); font-weight: 600; }
.ct-sub { color: var(--slate); font-size: 0.85rem; }
.ct-row.open .ct-head { background: var(--blush); }
.ct-card { display: flex; flex-direction: column; gap: 4px; padding: 6px 4px 12px; }
.ct-line { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 4px 0; border-top: 1px dashed var(--line); }
.ct-words { display: flex; flex-direction: column; min-width: 0; }
.ct-label { color: var(--slate); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }
.ct-value { color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.ct-acts { display: flex; gap: 4px; flex: none; }
.ct-link { display: inline-grid; place-items: center; text-decoration: none; }
.ct-all { align-self: flex-start; margin-top: 6px; }
.ct-empty { padding: 12px 4px; color: var(--slate); }
/* Contacts: editing (October 25, 2026) */
.ct-card-foot { display: flex; gap: 6px; margin-top: 6px; }
.ct-card-foot .ct-all { margin-top: 0; }
.ct-edit-note { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 6px 8px; border-radius: 8px; background: var(--blush); color: var(--navy); font-size: 0.85rem; }
.ct-form { display: flex; flex-direction: column; gap: 10px; padding: 8px 2px 16px; }
.ct-form-title { margin: 4px 0; font-size: 1.05rem; color: var(--navy); }
.ct-field { display: flex; flex-direction: column; gap: 2px; }
.ct-group { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ct-group-row { display: flex; gap: 6px; align-items: flex-start; }
.ct-group-row .int-input { flex: 1; min-width: 0; }
.ct-type { flex: none; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); font: inherit; font-size: 16px; max-width: 110px; }
.ct-adr { min-height: 72px; padding: 8px 12px; resize: vertical; font: inherit; font-size: 16px; }
.ct-addline { align-self: flex-start; }
.ct-form-acts { display: flex; gap: 8px; }

/* Unsent work stands out: white on dark navy (Kevin, October 25, 2026: no green in
   Serena). The open one is solid rose with navy words (Kevin, October 26, 2026). */
.tab.unsent { background: var(--navy); border-color: var(--navy); }
.tab.unsent .tab-main, .tab.unsent.active .tab-main { color: #F4F6F8; }
.tab.unsent .tab-main::after { display: none; }
.tab.unsent .tab-x { color: #DDE3EE; }
.tab.unsent .tab-x:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.12); }
.tab.unsent.active { background: var(--rose); border-color: var(--rose); box-shadow: none; }
.tab.unsent.active .tab-main { color: var(--navy); }
.tab.unsent.active .tab-x { color: var(--navy); }
.tab.unsent.active .tab-x:hover { color: var(--navy); background: rgba(14, 23, 47, 0.12); }

/* ---- Reorder a list (reorder.js) ---- */
.ro-sheet { position: fixed; inset: 0; z-index: 50; background: rgba(14, 23, 47, 0.35); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); }
.ro-card { width: min(560px, 100%); max-height: 100%; display: flex; flex-direction: column; background: var(--raised); border-radius: 14px; box-shadow: 0 12px 40px rgba(14, 23, 47, 0.3); overflow: hidden; }
.ro-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ro-title { flex: 1; margin: 0; font-family: var(--font-display, "EB Garamond", Garamond, serif); font-size: 1.3rem; color: var(--navy); }
.ro-hint { margin: 8px 14px 0; }
.ro-scroll { overflow-y: auto; padding: 8px 14px 16px; }
.ro-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ro-sub { margin: 6px 0 0 28px; }
.ro-item { position: relative; }
.ro-row { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 2px 10px 2px 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.ro-grip { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--slate); cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; border-radius: 8px; }
.ro-grip:focus-visible { outline: 2px solid var(--rose); }
.ro-text { flex: 1; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.ro-item.dragging { z-index: 2; }
.ro-item.dragging > .ro-row { background: #FFFFFF; box-shadow: 0 6px 18px rgba(14, 23, 47, 0.22); }
.ro-sorting, .ro-sorting * { cursor: grabbing; -webkit-user-select: none; user-select: none; }
@media (max-width: 700px) { .ro-sheet { padding: 0; } .ro-card { width: 100%; height: 100%; border-radius: 0; } .ro-head { padding-top: max(12px, env(safe-area-inset-top)); } }

/* ---- Big round checkboxes over the note's ☐/☑ (checks.js) ---- */
.check-layer { position: absolute; z-index: 2; pointer-events: none; overflow: hidden; border-radius: 8px; }
.check-inner { position: absolute; inset: 0 auto auto 0; width: 100%; will-change: transform; }
.check-dot { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: none; display: grid; place-items: center; pointer-events: auto; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.check-done { position: absolute; background: rgba(255, 255, 255, 0.58); pointer-events: none; }
/* A link in the note: underlined, opens when tapped (checks.js). */
.note-link { position: absolute; pointer-events: auto; border-bottom: 2px solid var(--rose); -webkit-tap-highlight-color: rgba(187, 164, 159, 0.25); }
.note-link:hover { background: rgba(187, 164, 159, 0.15); }
.history-view a { color: var(--navy); text-decoration-color: var(--rose); text-decoration-thickness: 2px; }
.check-cover { position: absolute; background: var(--raised); pointer-events: none; }
.check-dot svg { width: 28px; height: 28px; overflow: visible; }
.check-dot circle { fill: var(--raised); stroke: var(--navy); stroke-width: 1.8; }
.check-dot path { fill: none; stroke: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.check-dot.ticked circle { fill: var(--navy); }
.check-dot.ticked path { stroke: #F4F6F8; }
.check-dot:hover circle { stroke: var(--rose); stroke-width: 2.4; }
.check-dot:focus-visible { outline: 2px solid var(--rose); outline-offset: -4px; border-radius: 50%; }
.check-layer.locked .check-dot { pointer-events: none; }
.check-mirror { position: absolute; top: 0; left: -9999px; visibility: hidden; pointer-events: none; box-sizing: border-box; border: 0; white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word; }

/* The Claude | Grok switch in Ask AI, with each maker's logo. */
.ai-btn { display: inline-flex; align-items: center; gap: 7px; }
.ai-logo { width: 18px; height: 18px; flex: none; }

/* ---- Highlights (checks.js): ==words== in the note ---- */
.hl-layer { position: absolute; z-index: 1; pointer-events: none; overflow: hidden; border-radius: 8px; mix-blend-mode: multiply; }
.hl-band { position: absolute; border-radius: 3px; }
.check-cover.hl-mark { border-radius: 0; }
.hl-yellow { background: #FFEB6B; }
.hl-pink { background: #FFC6DC; }
.hl-green { background: #BDEBA3; }
.hl-blue { background: #B5DBFF; }
.history-view mark { color: inherit; padding: 0 1px; border-radius: 3px; }

/* Renaming a tab in place (tabs.js). 16px so Safari doesn't zoom. */
.tab-rename { width: 170px; max-width: 46vw; height: 32px; margin: 0 4px 0 8px; padding: 0 8px; border: 1px solid var(--rose); border-radius: 6px; font: inherit; font-size: 16px; color: var(--navy); background: #FFFFFF; }
.tab-rename:focus { outline: 2px solid var(--rose); outline-offset: 0; }

/* Dates in the note (Kevin, October 31, 2026): a dotted rose underline over each date
   (checks.js); a tap opens the date picker (datepick.js). */
.note-date { position: absolute; pointer-events: auto; padding: 0; margin: 0; background: transparent; border: none;
  border-bottom: 2px dotted var(--rose); border-radius: 0; cursor: pointer; -webkit-tap-highlight-color: rgba(187, 164, 159, 0.25); }
.note-date:hover { background: rgba(187, 164, 159, 0.15); }
.check-layer.locked .note-date { pointer-events: none; }
.dp-pop { position: fixed; z-index: 60; width: 324px; box-sizing: border-box; padding: 12px; background: var(--raised);
  border: 1px solid #DDE3EE; border-radius: 12px; box-shadow: 0 8px 24px rgba(14, 23, 47, 0.16); color: var(--navy); font-family: "Source Sans 3", Calibri, system-ui, sans-serif; }
.dp-pop[hidden] { display: none; }
.dp-pop.dp-sheet { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); top: auto; width: auto; }
.dp-quick { display: grid; grid-template-columns: repeat(4, auto); gap: 5px; margin-bottom: 10px; }
.dp-chip { font: inherit; font-size: 14px; color: var(--navy); background: var(--blush); border: 1px solid var(--rose); border-radius: 16px; padding: 5px 4px; white-space: nowrap; cursor: pointer; }
.dp-chip:hover { background: #EFE3E0; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.dp-title { font-family: "EB Garamond", Garamond, serif; font-size: 19px; }
.dp-nav { font: inherit; font-size: 22px; line-height: 1; width: 40px; height: 40px; border: none; background: none; border-radius: 50%; color: var(--navy); cursor: pointer; }
.dp-nav:hover { background: var(--blush); }
.dp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.dp-dow span { font-size: 12px; color: var(--slate); height: 22px; line-height: 22px; }
.dp-day { position: relative; font: inherit; font-size: 15px; height: 38px; width: 100%; padding: 0; border: none; background: none;
  border-radius: 50%; color: var(--navy); cursor: pointer; }
.dp-sheet .dp-day { height: 44px; }
.dp-day:hover { background: var(--blush); }
.dp-day.today { box-shadow: inset 0 0 0 1.5px var(--rose); }
.dp-day.picked { background: var(--rose); color: var(--navy); font-weight: 600; }
.dp-dot { position: absolute; left: calc(50% - 2px); bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--slate); }
.dp-day.picked .dp-dot { background: var(--navy); }

/* Find in the note (find.js, Kevin, November 1, 2026): a magnifier at the end of the
   line under the tabs, and a slim bar floating over the top of the note box. */
.find-open { flex: none; position: relative; width: 30px; height: 26px; margin-left: 6px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--slate); display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.find-open::before { content: ""; position: absolute; inset: -9px -7px; } /* a 44-point tap area */
.find-open svg { width: 18px; height: 18px; }
.find-open:hover, .find-open.active { color: var(--navy); background: var(--blush); }
.find-open[hidden] { display: none; }
.find-bar { position: absolute; z-index: 3; display: flex; align-items: center; gap: 2px; box-sizing: border-box; padding: 4px 4px 4px 10px;
  background: var(--raised); border: 1px solid var(--rose); border-radius: 10px; box-shadow: 0 6px 18px rgba(14, 23, 47, 0.14); }
.find-bar[hidden] { display: none; }
.find-field { width: 190px; min-width: 0; flex: 1; height: 34px; border: 0; background: transparent; color: var(--ink);
  font-family: "Source Sans 3", Calibri, system-ui, sans-serif; font-size: 16px; outline: none; -webkit-appearance: none; appearance: none; }
.find-field::-webkit-search-cancel-button { display: none; }
.find-count { flex: none; min-width: 52px; padding: 0 4px; font-size: 0.85rem; color: var(--slate); text-align: right; white-space: nowrap; }
.find-count.none { color: #A04A3C; }
.find-btn { flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--navy);
  display: grid; place-items: center; cursor: pointer; touch-action: manipulation; }
.find-btn svg { width: 18px; height: 18px; }
.find-btn:hover:not(:disabled) { background: var(--blush); }
.find-btn:disabled { color: #A9B3C4; cursor: default; }
.find-layer { position: absolute; z-index: 1; pointer-events: none; overflow: hidden; border-radius: 8px; mix-blend-mode: multiply; }
.find-layer[hidden] { display: none; }
.find-hit { position: absolute; border-radius: 3px; background: #F1DEDA; }
.find-hit.current { background: #E6C9C2; box-shadow: 0 0 0 2px var(--rose); }
.find-bar { flex-direction: column; align-items: stretch; }
.find-row { display: flex; align-items: center; gap: 2px; }
.find-row[hidden] { display: none; }
.find-replace { border-top: 1px solid #DDE3EE; margin-top: 4px; padding-top: 4px; }
.find-btn.active { background: var(--blush); }
.find-text-btn { flex: none; height: 34px; padding: 0 12px; margin-left: 4px; border: 1px solid var(--rose); border-radius: 8px; background: var(--raised);
  color: var(--navy); font-family: "Source Sans 3", Calibri, system-ui, sans-serif; font-size: 15px; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.find-text-btn:hover:not(:disabled) { background: var(--blush); }
.find-text-btn:disabled { color: #A9B3C4; border-color: #DDE3EE; cursor: default; }
/* Clear, at the right of the month row (Kevin, November 1, 2026). */
.dp-month { display: flex; align-items: center; gap: 2px; }
.dp-month .dp-title { min-width: 112px; text-align: center; }
.dp-clear { font: inherit; font-size: 14px; color: var(--navy); background: var(--raised); border: 1px solid var(--rose); border-radius: 16px; padding: 5px 14px; cursor: pointer; }
.dp-clear:hover:not(:disabled) { background: var(--blush); }
.dp-clear:disabled { color: #A9B3C4; border-color: #DDE3EE; cursor: default; }

/* Copy blocks (checks.js, Kevin, November 1, 2026): lines between ``` lines sit in a
   light box with a Copy button on the top line. */
.copy-box { position: absolute; background: #EEF1F6; border-radius: 6px; }
.copy-cover { background: #EEF1F6; }
.copy-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px 0 8px; border: 1px solid var(--rose); border-radius: 15px;
  background: var(--raised); color: var(--navy); font-family: "Source Sans 3", Calibri, system-ui, sans-serif; font-size: 14px; font-weight: 600;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.copy-btn svg { width: 16px; height: 16px; }
.copy-btn:hover { background: var(--blush); }
.check-layer .copy-btn { position: absolute; transform: translate(-100%, -50%); pointer-events: auto; }
.check-layer .copy-btn::before { content: ""; position: absolute; inset: -7px -4px; } /* a 44-point tap area */
.copy-block { position: relative; margin: 6px -8px; padding: 8px 8px 8px; padding-top: 40px; background: #EEF1F6; border-radius: 6px; }
.copy-block .copy-btn { position: absolute; top: 5px; right: 6px; }

/* Tables (tables.js, Kevin, November 8, 2026): a ```csv block covered by a grid of its
   cells in the note (a tap edits it), a table on a sent note, and the table editor. */
.tb-grid { position: absolute; display: block; padding: 0; margin: 0; border: 0; background: #EEF1F6; font: inherit; color: var(--ink);
  text-align: left; cursor: pointer; pointer-events: auto; overflow: hidden; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tb-grid:hover .tb-row { background: #F8F9FB; }
.tb-grid:focus-visible { outline: 2px solid var(--rose); outline-offset: -2px; }
.tb-row { position: absolute; left: 0; right: 0; background: #FFFFFF; border-bottom: 1px solid var(--line); }
.tb-row.tb-headrow { background: #E3E8F0; font-weight: 600; color: var(--navy); }
.tb-c { position: absolute; top: 0; padding: 0 7px; box-sizing: border-box; height: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 1px solid var(--line); }
.tb-c:first-child { border-left: 0; }
.tb-num { text-align: right; font-variant-numeric: tabular-nums; }
.hv-table-wrap { overflow-x: auto; }
.hv-table { border-collapse: collapse; background: #FFFFFF; font-size: 0.95em; }
.hv-table th, .hv-table td { border: 1px solid var(--line); padding: 4px 9px; text-align: left; white-space: nowrap; }
.hv-table th { background: #E3E8F0; color: var(--navy); font-weight: 600; }
.hv-table td.tb-num { text-align: right; }
.tb-card { width: min(980px, 100%); height: min(720px, 100%); }
.tb-tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.tb-tool { min-height: 36px; }
.tb-tool:disabled { opacity: 0.4; cursor: default; }
.tb-scroll { flex: 1; overflow: auto; padding: 10px 14px; -webkit-overflow-scrolling: touch; }
.tb-table { border-collapse: collapse; }
.tb-table th, .tb-table td { padding: 0; border: 1px solid var(--line); background: #FFFFFF; }
.tb-table th { background: #E3E8F0; }
.tb-table .tb-on { background: var(--blush); }
.tb-table th.tb-on { background: #E9DCD8; }
.tb-cell { display: block; width: 9.5em; min-width: 0; height: 40px; padding: 0 8px; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); }
.tb-headrow .tb-cell { font-weight: 600; color: var(--navy); }
.tb-cell.tb-num { text-align: right; font-variant-numeric: tabular-nums; }
.tb-cell:focus { outline: 2px solid var(--rose); outline-offset: -2px; position: relative; z-index: 1; }
.tb-total td { height: 36px; padding: 0 8px; border: 0; border-top: 2px solid var(--navy); background: transparent; font-weight: 600; text-align: right; color: var(--navy); font-variant-numeric: tabular-nums; }
.tb-hint { margin: 0 14px 12px; color: var(--slate); font-size: 0.85rem; }
@media (max-width: 700px) { .tb-card { height: 100%; } .tb-cell { width: 7.5em; } }

/* Undo and redo in the Type tools (undo.js, Kevin, November 1, 2026). On a phone there's
   Undo only (Kevin's choice; shaking the iPhone still offers Redo), the buttons are 32
   wide, and if they still don't fit the row slides sideways rather than squeezing. */
@media (max-width: 700px) {
  #typeTools { gap: 3px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #typeTools::-webkit-scrollbar { display: none; }
  #typeTools .icon-tool { flex: none; width: 32px; }
  #typeTools .quick-tools { flex: none; gap: 3px; }
  #typeRedoBtn { display: none; }
}

/* Moving tabs (tabs.js, Kevin, November 1, 2026): hold (or drag with a mouse) and slide. */
.tab { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tab-list.moving .tab:not(.dragging) { transition: transform 0.15s ease; }
.tab.dragging { position: relative; z-index: 5; box-shadow: 0 6px 16px rgba(14, 23, 47, 0.22); opacity: 0.96; cursor: grabbing; }

/* Headings (checks.js, Kevin, November 2, 2026): "# " lines drawn bold at the note's own
   size over the typed line; larger in the sent view (and the emailed PDF). */
.note-heading { position: absolute; pointer-events: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word;
  font-weight: 700; color: var(--navy); letter-spacing: -0.005em; }
.note-heading.note-h3 { color: var(--slate); }
.hv-h { font-weight: 700; color: var(--navy); line-height: 1.3; margin: 10px 0 4px; }
.hv-h1 { font-family: "EB Garamond", Garamond, serif; font-size: 1.6rem; font-weight: 600; }
.hv-h2 { font-family: "EB Garamond", Garamond, serif; font-size: 1.35rem; font-weight: 600; }
.hv-h3 { font-size: 1.15rem; color: var(--slate); }

/* A page of Serena's own in a large frame over the note (integrations.js, Kevin,
   November 2, 2026): the Things matrix, closed with its own ✕. */
.page-frame { position: fixed; inset: 0; z-index: 90; }
.page-frame-shade { position: absolute; inset: 0; background: rgba(14, 23, 47, 0.38); }
.page-frame iframe { position: absolute; top: max(12px, env(safe-area-inset-top)); bottom: max(12px, env(safe-area-inset-bottom));
  left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
  width: calc(100% - 2 * max(12px, env(safe-area-inset-left))); height: calc(100% - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
  border: 0; border-radius: 14px; background: #F4F6F8; box-shadow: 0 16px 48px rgba(14, 23, 47, 0.35); }
@media (max-width: 700px) {
  .page-frame-shade { background: #0E172F; }
  .page-frame iframe { top: env(safe-area-inset-top); left: 0; right: 0; bottom: 0; width: 100%; height: calc(100% - env(safe-area-inset-top)); border-radius: 0; }
}

/* Someone else's website in the frame (Kevin, November 3, 2026): a navy bar on top with
   its name, Open in Safari and ✕; the page sits below it. */
.page-frame-bar { position: absolute; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
  height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 16px; background: #0E172F; color: #F4F6F8; border-radius: 14px 14px 0 0; }
.page-frame-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.page-frame-hint { flex: 1; color: #A9B3C4; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.page-frame-btn { font: inherit; font-size: 0.9rem; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid #25314F; background: none; color: #F4F6F8; cursor: pointer; flex: none; }
.page-frame-btn:hover { background: #25314F; }
.page-frame-x { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 0; }
.page-frame-x svg { width: 22px; height: 22px; }
.page-frame.web iframe { top: calc(max(12px, env(safe-area-inset-top)) + 48px); height: calc(100% - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)) - 48px);
  border-radius: 0 0 14px 14px; background: #FFFFFF; }
@media (max-width: 700px) {
  .page-frame-bar { top: env(safe-area-inset-top); left: 0; right: 0; border-radius: 0; }
  .page-frame-hint { display: none; }
  .page-frame.web iframe { top: calc(env(safe-area-inset-top) + 48px); height: calc(100% - env(safe-area-inset-top) - 48px); border-radius: 0; }
}

/* Info-only calendar items (shown as Free, not Busy), grey like the bot's day PDF (Kevin, November 3, 2026). */
.day-event.info { background: #EEF1F6; color: #6B768C; border-left-color: #A9B3C4; font-style: italic; }
.day-top-event.info { background: #F4F6F8; color: #6B768C; border-left-color: #A9B3C4; font-style: italic; }

/* One-tap Call, Message and Teams on each contact in the list (Kevin, November 3, 2026). */
.ct-top { display: flex; align-items: center; gap: 6px; }
.ct-top .ct-head { flex: 1; min-width: 0; }
.ct-quick { display: flex; gap: 6px; flex: none; padding-right: 4px; }
.ct-qbtn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--rose); background: #FFFFFF; color: var(--navy); text-decoration: none; }
.ct-qbtn:hover { background: var(--blush); }
.ct-qbtn svg { width: 20px; height: 20px; }
.ct-row.open .ct-top { background: var(--blush); }

/* Find in all tabs (Kevin, November 3, 2026): the tabs that match, listed under the bar. */
.find-btn.find-every.active { background: var(--blush); }
.find-tabs { max-height: min(50vh, 360px); overflow-y: auto; border-top: 1px solid var(--line); margin-top: 4px; padding: 4px 0; width: 340px; max-width: 100%; }
.find-tabs[hidden] { display: none; }
.find-tab { display: block; width: 100%; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; border-radius: 8px; padding: 8px 10px; min-height: 44px; cursor: pointer; }
.find-tab:hover { background: var(--blush); }
.find-tab.here .find-tab-name { color: var(--navy); }
.find-tab-name { display: block; font-weight: 600; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-tab-count { font-weight: 400; color: var(--slate); font-size: 0.85rem; }
.find-tab-snip { display: block; font-size: 0.85rem; color: var(--slate); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.find-tab-snip mark { background: var(--blush); color: var(--ink); border-radius: 2px; }
.find-tabs-none { margin: 6px 10px; color: var(--slate); font-size: 0.9rem; }
@media (max-width: 700px) { .find-tabs { width: auto; } }

/* Spoken punctuation help (Kevin, November 4, 2026): the button in the Speak row shows or
   hides it, floating under the row so the row keeps its height. */
#speakTools { position: relative; }
#speakTools #punctBtn { flex: none; order: -1; }
#punctBtn[aria-pressed="true"] { background: var(--blush); border-color: var(--rose); }
.punct-help { position: absolute; left: 12px; right: 12px; top: calc(100% + 4px); z-index: 30; padding: 10px 14px; border-radius: 10px;
  background: #FFFFFF; border: 1px solid var(--rose); box-shadow: 0 6px 18px rgba(14, 23, 47, 0.15); color: var(--slate); font-size: 0.95rem; line-height: 1.4; }
.punct-help b { color: var(--navy); font-weight: 600; }

/* ---- Matching corners with Serena Matrix (Kevin, November 8, 2026) ----
   The sidebar has no edge line, so above the bar's bottom edge it reads as part of the bar;
   its clock starts just below the bar (--bar-h, measured by sidebar.js), the date under it
   in rose, then the months, in the same places as on the Matrix. With the bar on one row
   it's 60 tall like the Matrix's: "Send to Serena" sits beside its buttons on two lines
   instead of above them. */
.send-br { display: none; }
.sidebar { border-right: 0; padding-top: calc(var(--bar-h, 60px) + 12px); }
@media (min-width: 1101px) {
  .toolbar { padding-top: max(5px, env(safe-area-inset-top)); padding-bottom: 5px; } /* 5 + the 50-tall button groups + 5 */
  .send-group { flex-direction: row; align-items: center; gap: 8px; }
  .send-caption { text-align: right; line-height: 1.15; }
  .send-br { display: inline; }
}
/* An iPad on its side (1180 wide): the caption beside the buttons needs a little room,
   taken from the gaps between the bar's groups. */
@media (min-width: 1101px) and (max-width: 1250px) {
  .toolbar { column-gap: 8px; }
  .send-group { gap: 5px; }
}
/* Table beside the List button, on phones too (Kevin, November 8, 2026). */

/* One List button for every kind of list, with ▾ beside it for the kind (app.js, Kevin,
   November 8, 2026), and the menu that opens under it. */
.format-toggle { position: relative; }
.toolbar .list-more { width: 22px; min-width: 0; padding: 0; display: grid; place-items: center; color: var(--on-navy-soft); }
.toolbar .list-more svg { width: 12px; height: 24px; }
.toolbar .list-more[aria-expanded="true"] { background: var(--navy-hover); }
.list-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 230px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  background: var(--raised); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(14, 23, 47, 0.25); }
.list-menu.hidden { display: none; }
.list-item { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; min-height: 48px; padding: 4px 10px;
  border: 0; border-radius: 8px; background: transparent; color: var(--navy); font: inherit; text-align: left; cursor: pointer; }
.list-item svg { grid-row: 1 / 3; width: 24px; height: 24px; }
.list-item span { font-weight: 600; }
.list-item small { color: var(--slate); font-size: 0.85rem; letter-spacing: 0.04em; }
.list-item:hover { background: var(--blush); }
.list-item[aria-checked="true"] { background: #F1E8E5; box-shadow: inset 3px 0 0 var(--rose); }
html[data-skin="rose"] .list-menu { --navy: #0E172F; --rose: #BBA49F; }

/* Large screens (1400 wide and up, where the Matrix has the sidebar too): the sailboat and
   "Serena" start where "Serena Matrix" does, 20 past the sidebar (Kevin, November 8, 2026;
   moving them above the clock was tried the same day and dropped). */
@media (min-width: 1400px) {
  body.with-sidebar .toolbar .logo { margin-left: 8px; }
}