/* The phone app's palette, so the two read as one product. */
:root {
  --base: #12100d;
  --surface: #1d1a16;
  --raised: #2a251f;
  --hairline: rgba(255,255,255,.08);
  --text: rgba(255,255,255,.95);
  --text2: rgba(255,255,255,.62);
  --text3: rgba(255,255,255,.47);
  --accent: #f0a64a;
  --accent2: #e2703a;
  --accent-text: #c2531f;
  --radius: 18px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--base); color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(900px 420px at 12% -8%, rgba(240,166,74,.13), transparent 70%);
}
.bar { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--hairline); position: relative; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; }
.brand img { border-radius: 8px; }
.bar-actions { display: flex; align-items: center; gap: 10px; }
main { max-width: 1100px; margin: 0 auto; padding: 20px; position: relative; }
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.spacer { flex: 1; }
.search { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; min-width: 0; }
/* The search field may shrink; a rigid 260px floor pushed the whole library past the width of a
   phone once a second action sat beside it. */
#newDoc { white-space: nowrap; }
@media (max-width: 560px) {
  #newDoc { flex: 1 1 100%; }
}
.search input { flex: 1; background: var(--surface); color: var(--text);
  border: 1px solid var(--hairline); border-radius: 999px; padding: 10px 16px; font-size: 15px; }
.search input::placeholder { color: var(--text3); }
button { font: inherit; cursor: pointer; border: 0; }
.pill { background: var(--raised); color: var(--text); border-radius: 999px; padding: 9px 16px; }
.pill.primary { background: linear-gradient(135deg, var(--accent-text), #9c4a16); color: #fff; }
.pill:disabled, .ghost:disabled { opacity: .45; cursor: default; }
.ghost { background: transparent; color: var(--text2); padding: 9px 12px; border-radius: 10px; }
.ghost:hover:not(:disabled) { background: var(--surface); color: var(--text); }
.muted { color: var(--text3); font-size: 13px; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.card { display: flex; align-items: center; gap: 14px; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius); padding: 14px 16px;
  cursor: pointer; text-align: left; width: 100%; color: inherit; }
.card:hover { background: var(--raised); }
.card .thumb { width: 46px; height: 60px; border-radius: 6px; background: #fff;
  flex: none; object-fit: cover; }
.card .meta { color: var(--text3); font-size: 13px; }
.empty { color: var(--text2); text-align: center; padding: 60px 20px; }
.pages { display: grid; gap: 18px; justify-items: center; }
.page { position: relative; background: #fff; border-radius: 8px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.page canvas { display: block; max-width: 100%; height: auto; }
.page-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; opacity: 0;
  transition: opacity .15s; }
.page:hover .page-tools { opacity: 1; }
.page-tools button { background: rgba(18,16,13,.82); color: #fff; border-radius: 8px;
  padding: 6px 9px; font-size: 13px; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: var(--raised); border: 1px solid var(--hairline); color: var(--text);
  padding: 10px 18px; border-radius: 999px; }
@media (max-width: 600px) { main { padding: 14px; } }
/* The name stays. It was hidden on phones back when the actions shared the row with it and the two
   collided; the actions have a row of their own now, and an app people reach by URL rather than by
   tapping an icon should say what it is. */

/* Annotation toolbar and overlay */
.inkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px;
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 14px; }
.inkbar-label { color: var(--text3); font-size: 13px; }
.tool { background: var(--raised); color: var(--text); border-radius: 999px; padding: 7px 13px;
  font-size: 14px; }
.tool[aria-pressed="true"] { background: linear-gradient(135deg, var(--accent-text), #9c4a16);
  color: #fff; }
.inkbar input[type="color"] { width: 34px; height: 28px; padding: 0; border: 0; background: none; }
.inkbar input[type="range"] { width: 110px; }
.page { position: relative; }
.ink { position: absolute; inset: 0; width: 100%; height: 100%; }
.ink { touch-action: none; }
.page.armed .ink { cursor: crosshair; }
dialog { background: var(--surface); color: var(--text); border: 1px solid var(--hairline);
  border-radius: 18px; padding: 20px; }
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog h3 { margin: 0 0 12px; }
#signCanvas { background: #fff; border-radius: 10px; touch-action: none; display: block; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

/* Document actions */
.more { position: relative; }
.more summary { list-style: none; cursor: pointer; font-size: 20px; line-height: 1;
  padding: 6px 12px; border-radius: 10px; }
.more summary::-webkit-details-marker { display: none; }
.more[open] summary { background: var(--surface); }
.menu { position: absolute; right: 0; top: 110%; z-index: 5; min-width: 180px;
  background: var(--raised); border: 1px solid var(--hairline); border-radius: 14px;
  padding: 6px; display: grid; gap: 2px; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.menu button { background: transparent; color: var(--text); text-align: left; padding: 10px 12px;
  border-radius: 9px; font-size: 14px; }
.menu button:hover { background: var(--surface); }

/* On a phone the menu spans the page instead of hanging off its toggle. Anchored flush-right to a
   toggle that the wrapped toolbar had pushed near the left edge, its left edge sat at -71px and
   the labels read "age images)" and "t (RTF)". Making `.more` static lets the menu resolve against
   the header, which spans the screen, so it can never leave it. */
@media (max-width: 560px) {
  .more { position: static; }
  .menu { left: 12px; right: 12px; min-width: 0; top: calc(100% + 6px); }
}
.menu button.danger, .pill.danger { color: #ff7a7d; }
.pill.danger { background: rgba(255,95,99,.16); }
dialog input[type="text"] { width: 100%; box-sizing: border-box; background: var(--base);
  color: var(--text); border: 1px solid var(--hairline); border-radius: 10px; padding: 10px 12px;
  font-size: 16px; }
dialog { max-width: min(92vw, 720px); }
/* Mobile: the status text wrapped over the logo, and the row had no wrap rule. */
@media (max-width: 600px) {
  .bar { flex-wrap: wrap; gap: 8px; }
  .bar-actions { width: 100%; justify-content: space-between; }
  .muted#who { font-size: 12px; }
  .inkbar input[type="range"] { width: 80px; }
}

.tool.danger[aria-pressed="true"] { background: #2a0f0f; color: #ff7a7d; }
.ink .handle { cursor: nwse-resize; }

.menu hr { border: 0; border-top: 1px solid var(--hairline); margin: 4px 0; }
.pick-list { display: grid; gap: 6px; max-height: 50vh; overflow: auto; min-width: 320px; }
.pick-list button { text-align: left; background: var(--raised); color: var(--text);
  padding: 10px 12px; border-radius: 10px; }
.page-check { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px;
  accent-color: var(--accent-deep); cursor: pointer; }
.page.picked { outline: 3px solid var(--accent); outline-offset: -3px; }
.progress { color: var(--text3); font-size: 13px; }

.inv-totals { background: var(--surface); border: 1px solid var(--hairline); border-radius: 18px;
  padding: 16px; margin-bottom: 16px; }
.inv-totals .row { display: flex; justify-content: space-between; padding: 4px 0; }
.inv-totals .row.grand { font-weight: 700; border-bottom: 1px solid var(--hairline);
  margin-bottom: 6px; padding-bottom: 8px; }
.inv-totals .cat { color: var(--text2); }
#invPeriod { background: var(--surface); color: var(--text); border: 1px solid var(--hairline);
  border-radius: 999px; padding: 8px 14px; font-size: 14px; }
.inv-card .meta { color: var(--text3); font-size: 13px; }
.inv-amount { font-variant-numeric: tabular-nums; }