/* Theme: colours, type and shared controls, in the spirit of Apple's
   interfaces — a near-white canvas, quiet greys and one blue accent.
   Every stylesheet of the app uses these names; the login page sets its
   own values for the same names in login.css. */
:root {
  color-scheme: light;
  --bg: #fbfbfd;
  --surface: #fff;
  --sidebar-bg: #f5f5f7;
  --fill: #f2f2f7;
  --fill-strong: #e8e8ed;
  --label: #1d1d1f;
  --label-2: #424245;
  --label-3: #6e6e73;
  --label-4: #8e8e93;
  --label-5: #aeaeb2;       /* placeholders and the faintest notes */
  --label-inverse: #fff;    /* text and icons on accent or dark fills */
  --separator: #e5e5ea;
  --separator-soft: #ededf0;
  --separator-strong: #d2d2d7;
  --fill-hover: rgb(0 0 0 / 4%);
  --focus-ring: rgb(0 113 227 / 22%);
  --accent: #0071e3;
  --accent-hover: #0062c4;
  --accent-soft: #e8f1fc;
  --orange: #c45a00;
  --orange-soft: #fff4e5;   /* notices: a letter that is ready, a backup reminder */
  --orange-soft-hover: #ffedd5;
  --orange-line: #f5d9b0;
  --orange-label: #7a4100;
  --star: #f5a623;          /* important records */
  --success: #1b7f3b;       /* public records */
  --success-soft: #e7f6ec;
  --danger: #d70015;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 18px;
  --radius-xl: 22px;
  --shadow-card: 0 0 0 1px rgb(0 0 0 / 4%), 0 2px 10px rgb(0 0 0 / 4%);
  --shadow-raised: 0 0 0 1px rgb(0 0 0 / 4%), 0 10px 40px rgb(0 0 0 / 7%);
  --shadow-pop: 0 0 0 1px rgb(0 0 0 / 5%), 0 18px 50px rgb(0 0 0 / 14%);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --sidebar-w: clamp(248px, 15vw, 288px);
  --header-h: 56px;
  --footer-h: 44px;      /* the site footer when it closes the workbench screen */
  --ai-side-w: clamp(380px, 30vw, 460px);
  /* Page layers, lowest first. Menus inside the header, the sidebar, the AI
     panel and dialogs keep small local numbers (2-10, 35, 40, 80): their
     parent already forms its own layer. */
  --z-ai-home: 20;      /* the AI panel docked on the workbench */
  --z-header: 25;       /* the sticky page header */
  --z-sheet: 26;        /* reader and editor sheets */
  --z-nav: 30;          /* sidebar and the phone tab bar */
  --z-popover: 30;      /* pop-overs in the page, e.g. quick filters */
  --z-sheet-phone: 45;  /* on phones sheets also cover the tab bar */
  --z-ai-panel: 59;
  --z-ai-avatar: 60;    /* the AI's face stays above its own panel */
  --z-toast: 90;
}

/* A background picked in settings (appearance.js sets --bg on the root):
   the sidebar follows it, a shade darker. */
html[data-custom-bg] { --sidebar-bg: color-mix(in srgb, var(--bg), #000 3.5%); }

body {
  background: var(--bg);
  color: var(--label);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Buttons: a blue capsule for the main action, a quiet one beside it. */
.primary,
.secondary {
  border-radius: 980px;
  font-weight: 500;
  transition: background-color .15s ease, color .15s ease;
}
.primary,
.site-header .primary { border: 1px solid transparent; background: var(--accent); color: var(--label-inverse); }
.primary:hover:not(:disabled),
.site-header .primary:hover:not(:disabled) { background: var(--accent-hover); }
.site-header .primary { border-radius: 980px; }
.site-header .new-entry { min-height: 32px; padding: 5px 14px 5px 11px; font-size: 13px; line-height: 1.3; }
.site-header .new-entry-label { font-size: 13px; }
.secondary { border: 1px solid var(--separator); background: var(--surface); color: var(--label); }
.secondary:hover:not(:disabled) { background: var(--fill); }
.danger { border-radius: 980px; background: var(--danger); }

/* Dialogs: rounded sheets on a soft, blurred backdrop. */
dialog {
  border: 0;
  border-radius: var(--radius-l);
  background: var(--surface);
  color: var(--label);
  box-shadow: var(--shadow-pop);
  /* A sheet scrolls up and down only, and its scrolling never moves the
     page behind it (iPhone otherwise lets a sheet be dragged sideways). */
  overflow-x: hidden;
  overscroll-behavior: contain;
}
dialog::backdrop { background: rgb(0 0 0 / 28%); backdrop-filter: blur(6px); }
dialog .dialog-heading h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; }

#toast { border-radius: 980px; background: rgb(29 29 31 / 92%); backdrop-filter: blur(12px); }

.backup-warning {
  border: 0;
  border-radius: var(--radius-m);
  background: var(--orange-soft);
  color: var(--orange-label);
}
.site-header .new-entry > span[aria-hidden] { font-size: 16px; line-height: 1; }