/* My Apps — the shared look. Edit it here, in CodeBase/Shared, never in an app's public/shared/ copy.
   Every app loads it straight after its own styles.css (My Homepage, with its photo backgrounds, keeps its own look),
   so these rules finish what each app's stylesheet starts and keep all of My Apps looking like one family,
   after apple.com and Apple's Human Interface Guidelines:
   • apple.com's colours: the #f5f5f7 page, #1d1d1f text, #0071e3 for buttons and links (stronger contrast than iOS blue on white)
   • San Francisco throughout (Text for reading, Display for titles), with Apple's tracking
   • the translucent bar at the top, as on apple.com, with a fine hairline under it
   • capsule buttons everywhere a button stands on its own; buttons and the ? at least 44 points on the iPhone
   • notices (offline, a newer version, backups) as a calm, centred line, like apple.com's ribbon
   • the same segmented controls, windows, sign-in card and toast in every app
   • gentle motion (and none when the device asks for Reduce Motion)
   Colours here only change the shared tokens (--bg, --ink, --accent…); each app's own colours (its icon colour, the
   calendar's G:/M: lines, flight classes) are untouched. Printing keeps each app's own print colours. */

/* ── Colours ─────────────────────────────────────────────── */
:root {
  --bg: #f5f5f7;                        /* apple.com's page grey */
  --surface: #ffffff;
  --ink: #1d1d1f;                       /* apple.com's text */
  --line: #d2d2d7;                      /* apple.com's hairlines */
  --accent: #0071e3;                    /* apple.com's button and link blue (4.7:1 on white) */
  --bar: rgba(251, 251, 253, .8);       /* apple.com's translucent bar */
  --ma-ribbon: #ffffff;
  --ma-focus: rgba(0, 125, 250, .6);    /* apple.com's focus ring */
  --ma-card-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 20px rgba(0, 0, 0, .05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --surface: #1c1c1e; --ink: #f5f5f7; --line: #38383a;
    --accent: #0a84ff;                  /* stays iOS's dark-mode blue: white on it is easier to read than on apple.com's #2997ff */
    --bar: rgba(22, 22, 23, .8);        /* apple.com's dark bar */
    --ma-ribbon: #1c1c1e;
    --ma-card-shadow: none;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --surface: #1c1c1e; --ink: #f5f5f7; --line: #38383a;
  --accent: #0a84ff; --bar: rgba(22, 22, 23, .8); --ma-ribbon: #1c1c1e; --ma-card-shadow: none;
}

/* ── Type: San Francisco, Text for reading and Display for titles ── */
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
}
h1, h2, .app-title, .hero h2, dialog h2, .signin-card h1, .help-hero-name {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.app-title { letter-spacing: -.022em; }
dialog h2 { letter-spacing: -.018em; }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }
a { transition: color .2s ease; }

/* ── The bar at the top: translucent, with a hairline under it, as on apple.com ── */
.bar {
  background: var(--bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: var(--hair, .5px) solid color-mix(in srgb, var(--line) 80%, transparent);
}
.title-icon { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .1); }

/* ── Buttons: capsules, apple.com's blue for the main one, a soft grey for the rest ── */
button { transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, opacity .2s ease, filter .2s ease; }
button.primary { background: var(--accent); color: #fff; }
button.primary:hover { filter: none; background: color-mix(in srgb, var(--accent) 92%, #fff); }
button.primary:active { opacity: 1; background: color-mix(in srgb, var(--accent) 88%, #000); }
.bar .tools > button:not(.icon),
.banner button:not(.icon),
.help-actions button, .help-foot button, .card-actions button, .qe-actions button,
.signin-card button, #signin-btn { border-radius: 980px; }
.bar .tools > button:not(.icon) { padding-left: 16px; padding-right: 16px; }
button.icon { border-radius: 50%; }
:focus-visible { outline: 3px solid var(--ma-focus); outline-offset: 2px; }
.row:focus-visible, .seg button:focus-visible { outline-offset: -2px; }

/* ── Search fields: the rounded field from macOS and iOS ── */
.bar input[type="search"], #search { border-radius: 10px; }

/* ── Segmented controls (Appearance, the tabs under the title) ──
   Wrapped in :where(), so these are only defaults: an app that styles its own selected segment keeps it
   (Our Calendar's ← → on the iPhone are solid blue when chosen). */
:where(.seg) { border-radius: 9px; padding: 2px; background: rgba(118, 118, 128, .12); }
:where(.seg) button { border-radius: 7px; transition: background-color .2s ease, box-shadow .2s ease, color .2s ease; }
:where(.seg) button.on {
  background: var(--knob, var(--surface));
  box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04), 0 0 0 .5px rgba(0, 0, 0, .04);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :where(.seg) { background: rgba(118, 118, 128, .24); } }
:root[data-theme="dark"] :where(.seg) { background: rgba(118, 118, 128, .24); }

/* ── Notices under the bar: one calm, centred line, like apple.com's ribbon ── */
.banner {
  justify-content: center; text-align: center; gap: 8px 14px;
  padding: 10px 20px; font-size: .86rem; line-height: 1.4;
  background: color-mix(in srgb, #ff9f0a 12%, var(--ma-ribbon));        /* a backup is overdue: a warm note */
  border-bottom: var(--hair, .5px) solid color-mix(in srgb, var(--line) 80%, transparent);
}
.banner span { flex: 0 1 auto; min-width: 0; }
.banner.update { background: color-mix(in srgb, var(--accent) 10%, var(--ma-ribbon)); }
.banner.offline, #demo-banner { background: var(--ma-ribbon); color: var(--muted); }
#demo-banner.update { background: var(--ma-ribbon); }
.banner button:not(.icon) { padding: 4px 14px; font-size: .84rem; }

/* ── Windows ── */
dialog { border-radius: 18px; }
dialog::backdrop {
  background: rgba(0, 0, 0, .36);
  -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%);
}
dialog[open] { animation: ma-rise .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes ma-rise { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.dialog-head {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}

/* ── Grouped lists: rounded white groups on the grey page, as in Settings ── */
.group { border-radius: 12px; }

/* ── Sign in: apple.com's simple centred card ── */
#signin .signin-card, .signin-card {
  border-radius: 28px; box-shadow: var(--ma-card-shadow);
  background: var(--surface);
}
#signin .signin-card h1, .signin-card h1 { font-weight: 600; letter-spacing: -.02em; }
#signin .signin-card button, .signin-card .primary { border-radius: 980px; padding: 12px 18px; font-weight: 500; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .signin-card { box-shadow: 0 0 0 .5px rgba(255, 255, 255, .12); }
}
:root[data-theme="dark"] .signin-card { box-shadow: 0 0 0 .5px rgba(255, 255, 255, .12); }

/* ── The toast at the bottom ── */
.toast {
  background: color-mix(in srgb, var(--raised, var(--surface)) 86%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 10px 34px rgba(0, 0, 0, .16);
}

/* ── iPhone: touch targets of at least 44 points in the bar (Human Interface Guidelines) ── */
@media (pointer: coarse) and (max-width: 760px) {
  .bar .tools > button, .bar .tools .search input, .bar #search { min-height: 40px; }
  .bar .tools > button.icon { width: 40px; height: 40px; }
  .bar .tools > button.icon::after { content: ""; position: absolute; inset: -2px; }
  .bar .tools > button.icon { position: relative; }
}

/* ── Lists with a status at the right (Our Apartment, Our Dog): on the iPhone the status goes under the name,
   as in Reminders, so a name never wraps into a narrow column beside "Overdue by 4 days" ── */
@media (max-width: 760px) {
  .row-wrap .row:has(> .rs) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 1px; align-items: center; }
  .row-wrap .row:has(> .rs) > :first-child { grid-row: span 2; }
  .row-wrap .row > .rs { grid-column: 2; max-width: none; text-align: left; font-size: .8rem; }
  .row-wrap .row .rt { flex-wrap: wrap; row-gap: 2px; }
}

/* ── Motion: none when the device asks for Reduce Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── Printing: no translucency or window shadows on paper ── */
@media print {
  .bar { -webkit-backdrop-filter: none; backdrop-filter: none; }
  dialog[open] { animation: none; }
}