/* office.css — Office v1 (full-screen takeover, step 2 shell).
   Functional first (a7): no scene art. The room reads as a desk — a dark wood top
   with one cream sheet on it — and the drawers are folder tabs along the sheet's
   top edge. House identity throughout: moss ink on cream, monospace, ink-bordered,
   solid borders only (B58: no dashed or dotted borders anywhere). */

#office {
  position: relative; min-height: 100vh;
  /* the desk top: warm wood, a faint grain of long horizontal bands */
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #4a3826, #3a2b1d);
}
#officeInner {
  position: relative; max-width: 480px; margin: 0 auto; min-height: 100vh;
  padding: 10px 14px calc(76px + env(safe-area-inset-bottom));   /* clear of the home button */
  display: flex; flex-direction: column; gap: 10px;
}
#officeBar { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 0; }
#officeBar .sb-title {
  font-size: 12px; font-weight: 800; letter-spacing: 3px; color: #f6f2e0;
  text-shadow: 0 1px 0 rgba(20, 14, 8, .8);
}

/* ---- the folder tabs: inactive tabs sit behind the sheet, the open one joins it ---- */
.of-tabs {
  display: flex; gap: 3px; padding: 0 6px; margin-bottom: -2px;   /* overlap the sheet's top border */
  position: relative; z-index: 1;
}
.of-tab {
  flex: 1 1 0; min-width: 0; padding: 9px 2px 8px;
  border: 2px solid var(--ink); border-bottom: none; border-radius: 9px 9px 0 0;
  background: var(--chip); color: var(--muted);
  font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.of-tab.on {
  background: var(--card); color: var(--ink);
  padding-bottom: 10px;            /* 2px taller: covers the sheet's border under it */
  cursor: default;
}
.of-tab:not(.on):active { transform: translateY(1px); }

/* ---- the sheet ---- */
.of-sheet {
  position: relative; background: var(--card); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 0 0 14px 14px;
  padding: 16px 14px 18px; box-shadow: 0 10px 26px rgba(12, 8, 4, .5);
}
.of-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 2px; color: var(--muted); }
.of-title { font-size: 20px; font-weight: 800; letter-spacing: .3px; margin: 2px 0 6px; }

.of-section { padding: 12px 0 10px; border-top: 1.5px solid var(--line); }
.of-section:first-of-type { border-top: 2px solid var(--ink); margin-top: 8px; }
.of-section-title { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.of-empty { margin-top: 4px; font-size: 12.5px; color: var(--muted); }

.of-what { margin: 8px 0 14px; font-size: 13px; line-height: 1.55; }

/* ================= Accounts drawer (step 3, §3.2) ================= */
.oa-ids { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

/* an identity card: a closed folder until tapped; one open at a time */
.oa-id { border: 2px solid var(--ink); border-radius: 12px; background: var(--card); overflow: hidden; }
.oa-id.open { box-shadow: 0 3px 0 var(--ink); }
.oa-id-head {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px;
  border: none; background: var(--chip); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.oa-id.open .oa-id-head { background: var(--card); border-bottom: 1.5px solid var(--line); }
.oa-id-left { flex: 1; min-width: 0; }
.oa-id-name { font-size: 14px; font-weight: 800; letter-spacing: .3px; }
.oa-id-email { font-size: 11.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oa-id-email.none { color: var(--muted); font-style: italic; }
.oa-id-count { font-size: 11px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.oa-chev { font-size: 12px; color: var(--muted); width: 10px; }

.oa-id-body { padding: 4px 12px 12px; }
.oa-addr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px 0 4px; }
.oa-addr-line { font-size: 11.5px; color: var(--muted); flex: 1 1 100%; overflow-wrap: anywhere; }
.oa-link {
  border: none; background: none; padding: 2px 0; font: inherit; font-size: 11.5px; font-weight: 800;
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}

/* a category: heading, its "why", then its accounts */
.oa-cat { padding: 10px 0 8px; border-top: 1.5px solid var(--line); }
.oa-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oa-cat-name { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.oa-cat-edit {
  width: 28px; height: 28px; border: 1.5px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--muted); font-size: 13px; cursor: pointer;
}
.oa-cat-why { font-size: 11px; color: var(--muted); margin: 2px 0 6px; line-height: 1.45; }
.oa-cat-hint { font-size: 11.5px; color: var(--muted); font-style: italic; margin: 4px 0 6px; }

.oa-acct {
  display: block; width: 100%; margin: 6px 0 0; padding: 8px 10px; text-align: left;
  border: 1.5px solid var(--ink); border-radius: 9px; background: var(--card); color: var(--ink);
  font: inherit; cursor: pointer;
}
.oa-acct:active { transform: translateY(1px); }
.oa-acct-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.oa-acct-name { font-size: 13px; font-weight: 800; }
.oa-kind {
  font-size: 9.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; border: 1.5px solid var(--line); color: var(--muted);
}
.oa-kind.k-card, .oa-kind.k-loan { border-color: var(--terra); color: var(--terra); }
.oa-last4 { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .5px; }
.oa-acct-sub { font-size: 11px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
/* recovery not on the Recovery inbox — amber, on purpose or not (§3.2) */
.oa-recovery {
  display: inline-block; margin-top: 4px; font-size: 10.5px; font-weight: 800;
  padding: 1px 7px; border-radius: 999px; background: #f6e3b4; color: #7a5410; border: 1.5px solid #d9b25a;
}

.oa-add {
  margin-top: 7px; padding: 6px 11px; border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--chip); color: var(--ink); font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer;
}
.oa-foot { padding-top: 10px; border-top: 1.5px solid var(--line); }

.oa-fold { margin-top: 10px; border-top: 1.5px solid var(--line); padding-top: 8px; }
.oa-fold-title { font-size: 11px; font-weight: 800; color: var(--muted); cursor: pointer; }
.oa-fold-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0 0 12px; }
.oa-fold-name { font-size: 12px; color: var(--muted); }

/* ---- the edit sheets (house lg-* scaffold; these are the Office's extras) ---- */
.oa-veil { z-index: 70; }
.oa-veil textarea.lg-note { display: block; width: 100%; min-height: 64px; }   /* standalone, not in an lg-field row */
.oa-kinds { flex: 1; }
.oa-kinds .fchip { padding: 6px 10px; font-size: 11.5px; }
.oa-warn { font-size: 11.5px; font-weight: 700; color: #8a5a10; margin: -2px 0 8px 84px; }
.oa-warn:empty { display: none; }
.lg-note + .oa-warn { margin-left: 0; margin-top: 6px; }
.oa-debt { margin-top: 4px; }
.oa-debt[hidden], .oa-debt .lg-field[hidden] { display: none; }
.oa-err { margin: 6px 0 0; }
.oa-none { font-size: 12px; color: var(--muted); font-style: italic; padding: 2px 0 6px; }
.oa-addalias { display: flex; gap: 6px; margin-top: 8px; }
.oa-addbtn {
  padding: 0 14px; border: 2px solid var(--ink); border-radius: 9px; background: var(--chip);
  color: var(--ink); font: inherit; font-size: 13px; font-weight: 800;
}
.oa-softnote { margin-top: 14px; }
.oa-ghost {
  display: block; width: 100%; padding: 11px; border: 1.5px solid var(--line); border-radius: 11px;
  background: var(--card); color: var(--muted); font: inherit; font-size: 13px; font-weight: 800;
}

/* inside an Office sheet, [hidden] always wins over a row's own display (lg-field is flex) */
.oa-veil [hidden] { display: none !important; }

/* ================= Bills drawer (step 4, §3.3) ================= */
.ob-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 4px; }
.ob-group .fchip { padding: 6px 10px; font-size: 11.5px; }
.ob-new { margin-top: 0; }
.ob-empty { margin: 14px 0 4px; }

.ob-groupbox { padding-top: 12px; }
.ob-gtitle {
  font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  padding-bottom: 4px; border-bottom: 2px solid var(--ink);
}

/* one bill: what + when on the left, amount + stamp on the right */
.ob-bill {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 2px;
  border-bottom: 1.5px solid var(--line); cursor: pointer;
}
.ob-bill:active { background: var(--chip); }
.ob-main { flex: 1; min-width: 0; }
.ob-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ob-name { font-size: 13.5px; font-weight: 800; }
.ob-tag {
  font-size: 9.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; border: 1.5px solid var(--line); color: var(--muted);
}
.ob-tag.min { border-color: var(--terra); color: var(--terra); }
.ob-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
/* a5: unpaid past its date turns red */
.ob-late { font-size: 11.5px; font-weight: 800; color: var(--alert); margin-top: 2px; }
.ob-bill.late .ob-name { color: var(--alert); }

.ob-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ob-amt { font-size: 13.5px; font-weight: 800; white-space: nowrap; }
/* the Paid stamp: an inked rubber stamp */
.ob-stamp {
  padding: 5px 12px; border: 2px solid var(--accent); border-radius: 7px; background: var(--card);
  color: var(--accent); font: inherit; font-size: 11.5px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; transform: rotate(-3deg); cursor: pointer;
}
.ob-bill.late .ob-stamp { border-color: var(--alert); color: var(--alert); }
.ob-stamp:active { transform: rotate(-3deg) scale(.94); }

.ob-cadence { flex: 1; }
.ob-cadence .fchip, .ob-status .fchip { padding: 6px 10px; font-size: 11.5px; }
.ob-hist .lg-rmain { flex: 1; }
.ob-skipped { color: var(--muted); font-style: italic; }

/* ================= Debts drawer (step 5, §3.4) ================= */
.od-total {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 10px;
  margin: 8px 0 4px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 12px; background: var(--chip);
}
.od-total-label { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.od-total-amt { font-size: 22px; font-weight: 800; text-align: right; }
.od-total-asof { grid-column: 1 / -1; font-size: 11px; color: var(--muted); }

.od-card { margin-top: 10px; padding: 11px 12px 12px; border: 1.5px solid var(--ink); border-radius: 12px; }
.od-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; font-weight: 800; }
.od-bal { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 2px; }
.od-bal-amt { font-size: 20px; font-weight: 800; color: var(--terra); }
.od-bal-asof { font-size: 11px; color: var(--muted); }

/* utilisation: a plain bar; green under 30%, terra to 70%, red past it */
.od-util { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; }
.od-bar { flex: 1; height: 8px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--card); overflow: hidden; }
.od-fill { height: 100%; background: var(--accent); }
.od-fill.mid { background: var(--terra); }
.od-fill.high { background: var(--alert); }
.od-util-txt { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }

.od-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0 4px; }
.od-fact { padding: 5px 7px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--card); }
.od-fact-l { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.od-fact-v { font-size: 12.5px; font-weight: 800; }
.od-update { margin-top: 9px; }

.od-blank { margin-top: 16px; }
.od-blank-row { padding-left: 0; }

.od-hist .lg-rmain { flex: 1; }
.od-delta { font-size: 11px; font-weight: 800; color: var(--muted); }
.od-delta.up { color: var(--alert); }      /* owing more */
.od-delta.down { color: var(--accent); }   /* owing less */
.ob-offer-no { margin-top: 8px; }

/* ================= Receipts drawer (step 6, §3.5) ================= */
.or-month { display: flex; align-items: center; gap: 6px; }
.or-step {
  width: 30px; height: 30px; border: 2px solid var(--ink); border-radius: 8px; background: var(--chip);
  color: var(--ink); font: inherit; font-size: 15px; font-weight: 800; line-height: 1; cursor: pointer;
}
.or-mlabel { min-width: 74px; text-align: center; font-size: 13px; font-weight: 800; }
.or-ids { margin: 8px 0 6px; }
.or-ids .fchip { padding: 5px 9px; font-size: 11px; }
.or-cat { width: 100%; padding: 8px 10px; font: inherit; font-size: 13px; border: 1.5px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); }
.or-sum { margin: 10px 0 2px; padding-bottom: 4px; border-bottom: 2px solid var(--ink); font-size: 11.5px; font-weight: 800; letter-spacing: .5px; }

.or-row {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 2px; text-align: left;
  border: none; border-bottom: 1.5px solid var(--line); background: none; color: var(--ink); font: inherit; cursor: pointer;
}
.or-row:active { background: var(--chip); }
.or-thumb {
  flex: 0 0 44px; height: 54px; border: 1.5px solid var(--ink); border-radius: 6px; overflow: hidden;
  background: var(--chip); display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.or-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.or-thumb.none { border-color: var(--line); }
.or-main { flex: 1; min-width: 0; }
.or-vendor { font-size: 13.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the sheet's photo area */
.or-photo { margin-bottom: 10px; }
.or-addphoto {
  display: block; width: 100%; padding: 16px; border: 2px solid var(--line); border-radius: 11px;
  background: var(--chip); color: var(--ink); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
}
.or-preview {
  display: block; max-width: 100%; max-height: 240px; margin: 0 auto; border: 2px solid var(--ink);
  border-radius: 8px; cursor: zoom-in;
}
.or-photo-acts { display: flex; justify-content: center; gap: 18px; margin-top: 6px; }
.or-remove { color: var(--alert); }
.or-delete { margin-top: 14px; }
.or-delete.armed { border-color: var(--alert); color: var(--alert); background: #fbeeea; }

/* full-screen photo */
.or-viewer {
  position: fixed; inset: 0; z-index: 90; background: rgba(10, 8, 6, .92);
  display: flex; align-items: center; justify-content: center; padding: 14px; cursor: zoom-out;
}
.or-viewer img { max-width: 100%; max-height: 100%; border-radius: 6px; }