/* ================================================================
   Fields
   One way to fill things in, everywhere:
   1. Fact rows   — forms read as label · value lines, no boxes.
   2. Composers   — a list's add-form is its next row, in its columns.
   3. Cells       — table values are text; editing shows an underline.
   A box is kept only where text is long (notes) or a search is typed.
   ================================================================ */

:root {
  --f-focus: #2563eb;
  --f-focus-soft: rgba(37, 99, 235, .14);
  --f-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3C/svg%3E");
  --f-chev-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e3e3e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3C/svg%3E");
}

/* No browser bevels, no spinners, anywhere. */
.finance-page :is(input, select, textarea) { border-style: solid; border-width: 1px; font-family: var(--font-app); }
.finance-page input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.finance-page input[type="number"]::-webkit-outer-spin-button,
.finance-page input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.finance-page input::placeholder, .finance-page textarea::placeholder { color: #b8b8b8; }
.finance-page select { appearance: none; -webkit-appearance: none; padding-right: 22px !important; background-image: var(--f-chev); background-repeat: no-repeat; background-position: right 4px center; background-size: 14px; }
.finance-page select:hover { background-image: var(--f-chev-dark); }

/* Long text and searches keep a quiet box. */
.finance-page.finance-page textarea,
.finance-page.finance-page .fin-addr-input {
  min-height: 36px; padding: 9px 11px; border: 1px solid var(--ds-border); border-radius: 8px;
  background: #ffffff; color: var(--ds-ink); font-size: 13px; line-height: 1.5; box-shadow: none;
}
.finance-page.finance-page :is(textarea, .fin-addr-input):hover { border-color: #d0d0d0; }
.finance-page.finance-page :is(textarea, .fin-addr-input):focus { border-color: var(--f-focus); box-shadow: 0 0 0 3px var(--f-focus-soft); outline: 0; }

/* ================================================================
   1. Fact rows
   ================================================================ */
.finance-page.finance-page :is(.fin-input-grid, .fin-proj-assumptions, .fin-card-split) {
  column-gap: 32px; row-gap: 0; overflow: hidden;
}
/* A grid inside a group that is already padded (a sheet's fact groups) gets
   no padding of its own, or its rows are indented twice and labels squeezed. */
.finance-page.finance-page :is(.fin-input-grid, .fin-proj-assumptions, .fin-card-split):not(.fin-input-group .fin-input-grid):not(.fin-job-term .fin-input-grid):not(.fin-job-card .fin-input-grid):not(.fs-group .fin-input-grid) {
  padding: 2px 16px;
}
/* A long hint or value in a field ends in "…" rather than being cut mid-word. */
.finance-page.finance-page :is(.fin-input-grid, .fin-proj-assumptions, .fin-card-split) > label > input { text-overflow: ellipsis; }
.finance-page.finance-page .fin-proj-assumptions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.finance-page.finance-page :is(.fin-input-grid, .fin-proj-assumptions, .fin-card-split) > label,
.finance-page.finance-page .fin-edu-line-field > label,
.finance-page.finance-page .inv-field {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(104px, 44%); align-items: center; gap: 0 10px;
  min-height: 42px; margin: 0 0 -1px; padding: 0; border-bottom: 1px solid var(--ds-line-soft);
  color: var(--ds-ink-3); font-size: 12.5px; font-weight: 400; line-height: 1.3; letter-spacing: 0; text-transform: none;
}
.finance-page.finance-page :is(.fin-input-grid, .fin-proj-assumptions, .fin-card-split) > label > :is(input, select),
.finance-page.finance-page .fin-edu-line-field > label > :is(input, select),
.finance-page.finance-page .inv-field > :is(input, select),
.finance-page.finance-page .inv-field .inv-input-wrap { grid-column: 3; }
.finance-page.finance-page .fin-edu-input-unit { position: static; grid-column: 2; color: var(--ds-ink-4); font-size: 11.5px; }
.finance-page.finance-page .fin-edu-input-unit:empty { display: none; }

.finance-page.finance-page :is(.fin-input-grid, .fin-proj-assumptions, .fin-card-split) > label > :is(input, select),
.finance-page.finance-page .fin-edu-line-field > label > :is(input, select),
.finance-page.finance-page .inv-field :is(input, select) {
  width: 100%; height: 30px; min-height: 30px; padding: 0 8px; margin: 0;
  border: 1px solid transparent; border-radius: 6px; background-color: transparent; box-shadow: none;
  color: var(--ds-ink); font-size: 13px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums;
  transition: background-color .12s, box-shadow .12s;
}
.finance-page.finance-page :is(.fin-input-grid, .fin-proj-assumptions, .fin-card-split) > label:hover > :is(input, select),
.finance-page.finance-page .fin-edu-line-field > label:hover > :is(input, select),
.finance-page.finance-page .inv-field:hover :is(input, select) { background-color: transparent; box-shadow: inset 0 -1px 0 #d4d4d4; border-radius: 0; }
.finance-page.finance-page :is(.fin-input-grid, .fin-proj-assumptions, .fin-card-split) > label > :is(input, select):focus,
.finance-page.finance-page .fin-edu-line-field > label > :is(input, select):focus,
.finance-page.finance-page .inv-field :is(input, select):focus {
  border-color: transparent; background-color: transparent; box-shadow: inset 0 -2px 0 var(--f-focus); border-radius: 0; outline: 0;
}
.finance-page.finance-page :is(.fin-input-grid, .fin-proj-assumptions, .fin-card-split) > label > select,
.finance-page.finance-page .inv-field select { text-align: right; text-align-last: right; }
.finance-page.finance-page :is(.fin-input-grid, .fin-proj-assumptions) > label > input[type="date"] { text-align: right; }
.finance-page.finance-page :is(.fin-input-grid, .fin-proj-assumptions) > label > input[type="date"]::-webkit-calendar-picker-indicator { opacity: .35; cursor: pointer; }
.finance-page.finance-page :is(.fin-input-grid, .fin-proj-assumptions) > label:hover > input[type="date"]::-webkit-calendar-picker-indicator { opacity: .8; }

/* Investments: a value with its unit after it. */
.finance-page.finance-page .inv-field > span { margin: 0; color: var(--ds-ink-3); font-size: 12.5px; font-weight: 400; }
.finance-page.finance-page .inv-field .inv-input-wrap { border: 0; border-radius: 6px; background: transparent; box-shadow: none; }
.finance-page.finance-page .inv-field .inv-input-wrap:focus-within { box-shadow: none; }
.finance-page.finance-page .inv-field .inv-input-wrap b { padding: 0 0 0 4px; color: var(--ds-ink-4); font-size: 11.5px; font-weight: 500; }
.finance-page.finance-page .inv-field.is-wide { grid-template-columns: 1fr; padding: 8px 0 12px; }
.finance-page.finance-page .inv-field.is-wide > span { margin-bottom: 6px; }
/* A note in a fact list: its own row, the writing starting under its name and
   wrapping across the whole width rather than squeezed into the value column. */
.finance-page.finance-page.finance-page .fin-input-grid > label.is-note { grid-template-columns: minmax(0, 1fr); align-items: start; row-gap: 2px; padding: 12px 0 6px; }
.finance-page.finance-page.finance-page .fin-input-grid > label.is-note > textarea {
  grid-column: 1; display: block; width: 100%; min-height: 0; margin: 0; padding: 3px 0 6px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: 0; resize: none; overflow: hidden;
  color: var(--ds-ink); font: inherit; font-size: 13px; font-weight: 400; line-height: 1.5; text-align: left;
}
.finance-page.finance-page.finance-page .fin-input-grid > label.is-note:hover > textarea:not(:focus) { box-shadow: inset 0 -1px 0 #d4d4d4; }
html[data-appearance="paper"] .finance-page.finance-page.finance-page .fin-input-grid > label.is-note:hover > textarea:not(:focus) { box-shadow: inset 0 -1px 0 #d4d4cf; }
html[data-appearance="night"] .finance-page.finance-page.finance-page .fin-input-grid > label.is-note:hover > textarea:not(:focus) { box-shadow: inset 0 -1px 0 #4f4f4f; }
.finance-page.finance-page.finance-page .fin-input-grid > label.is-note > textarea:focus { box-shadow: inset 0 -2px 0 var(--f-focus); }

/* Group titles over fact rows. */
.finance-page.finance-page .fin-input-group { padding: 12px 16px 2px; overflow: hidden; }
.finance-page.finance-page .fin-input-group-title { margin: 0 0 4px; color: var(--ds-ink); font-size: 13px; font-weight: 600; }

/* ================================================================
   2. Composer rows
   ================================================================ */
.ds-composer {
  display: grid; align-items: center; gap: 0; min-height: 46px; padding: 0 14px;
  border-top: 1px solid var(--ds-line); background: #ffffff;
}
.ds-composer:focus-within { background: #fbfcff; box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .18); }
.ds-composer-plus {
  width: 24px; height: 24px; display: grid; place-items: center; border: 1px dashed #cfcfcf; border-radius: 7px; color: var(--ds-ink-4);
}
.ds-composer-plus .mo-ic { width: 12px; height: 12px; }
.ds-composer:focus-within .ds-composer-plus { border-style: solid; border-color: var(--f-focus); color: var(--f-focus); }
.finance-page.finance-page .ds-composer :is(input, select) {
  width: 100%; height: 30px; min-height: 30px; margin: 0; padding: 0 10px;
  border: 0; border-left: 1px solid var(--ds-line-soft); border-radius: 0; background-color: transparent; box-shadow: none;
  color: var(--ds-ink); font-size: 13px;
}
.finance-page.finance-page .ds-composer :is(input, select):first-of-type { border-left: 0; }
.finance-page.finance-page .ds-composer :is(input, select):focus { box-shadow: inset 0 -2px 0 var(--f-focus); outline: 0; }
.finance-page.finance-page .ds-composer .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ds-composer .ds-composer-go { margin-left: 8px; }
.ds-composer kbd {
  margin-left: 8px; padding: 0 5px; border: 1px solid var(--ds-border); border-radius: 4px; background: #ffffff;
  color: var(--ds-ink-4); font: 500 10.5px/16px var(--font-app);
}

/* ================================================================
   3. Cells
   ================================================================ */
.finance-page.finance-page.finance-page .fin-table td :is(input, select):not([type="checkbox"]):not([type="radio"]) {
  height: 30px; min-height: 30px; padding: 0 6px; border: 0; border-radius: 0;
  background-color: transparent; box-shadow: none; color: var(--ds-ink); font-size: 13px;
}
.finance-page.finance-page.finance-page .fin-table tr:hover td :is(input, select):not([type="checkbox"]):not([type="radio"]) {
  border: 0; background-color: transparent;
}
.finance-page.finance-page.finance-page .fin-table td select { background-image: none; }
.finance-page.finance-page.finance-page .fin-table tr:hover td select { background-image: var(--f-chev); }
.finance-page.finance-page.finance-page .fin-table td select:hover { background-image: var(--f-chev-dark); }
.finance-page.finance-page.finance-page .fin-table td :is(input, select):not([type="checkbox"]):not([type="radio"]):focus {
  background-color: #ffffff; box-shadow: inset 0 -2px 0 var(--f-focus); outline: 0;
}
.finance-page.finance-page.finance-page .fin-table td :is(input, select):invalid,
.finance-page.finance-page.finance-page .fin-table td select:has(option[value=""]:checked) { color: #b8b8b8; }

/* A date as words; the picker opens from the cell. */
.ds-date { position: relative; display: flex; align-items: center; height: 30px; padding: 0 6px; cursor: pointer; }
.ds-date > span { color: var(--ds-ink); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds-date > span.is-empty { color: #b8b8b8; }
.finance-page.finance-page.finance-page .ds-date > input[type="date"] {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; cursor: pointer;
}
.ds-date:focus-within { box-shadow: inset 0 -2px 0 var(--f-focus); background: #ffffff; }

/* Income: the same cells. */
.in-row:hover .in-cell .fin-cell-input { border-color: transparent !important; background: transparent !important; }
.in-cell .fin-cell-input:focus { border-color: transparent !important; box-shadow: inset 0 -2px 0 var(--f-focus) !important; border-radius: 0 !important; }
.in-cell.is-pick .fin-cell-input { border-color: transparent !important; box-shadow: inset 0 -2px 0 var(--ds-teal) !important; border-radius: 0 !important; }

/* Rows inside a group card are not boxed a second time. */
.finance-page.finance-page :is(.fin-input-group, .fin-job-card, .fin-job-term, .fin-edu-outlook-assumptions, .fin-workspace-card) .fin-input-grid {
  padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.finance-page.finance-page .fin-input-group .fin-addr-field + .fin-input-grid,
.finance-page.finance-page .fin-input-group .fin-input-grid:first-child { margin-top: 0; }

/* Narrow cards hold one column of fact rows. */
.finance-page.finance-page :is(.fin-job-card, .fin-job-term) .fin-input-grid { grid-template-columns: minmax(0, 1fr); }
.finance-page.finance-page :is(.fin-job-card, .fin-job-term) .fin-input-grid > label { grid-template-columns: minmax(0, 1fr) auto minmax(110px, 52%); }

/* Date faces: the words sit over the native field, which keeps the picker. */
.finance-page .has-date-face { position: relative; }
.finance-page.finance-page.finance-page .has-date-face > input[type="date"] { color: transparent; }
.finance-page.finance-page.finance-page .has-date-face > input[type="date"]::-webkit-datetime-edit { color: transparent; }
.finance-page.finance-page.finance-page .has-date-face > input[type="date"]:focus,
.finance-page.finance-page.finance-page .has-date-face > input[type="date"]:focus::-webkit-datetime-edit { color: var(--ds-ink); }
.ds-date-face {
  grid-column: 3; grid-row: 1; justify-self: end; align-self: center; margin-right: 30px; pointer-events: none;
  color: var(--ds-ink); font-size: 13px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ds-date-face.is-empty { color: #b8b8b8; font-weight: 400; }
.has-date-face > input[type="date"]:focus + .ds-date-face { visibility: hidden; }
/* Outside fact rows (e.g. inside other layouts) the face floats over the field. */
.finance-page :not(label).has-date-face > .ds-date-face { position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin-right: 28px; }
.finance-page.finance-page label.has-date-face > input[type="date"] { grid-row: 1; }

/* Fact-row labels: one line, "…" when long (tidyFactLabels in finance.js).
   A unit written into the label sits after the value. Hover draws a hairline
   under the value and focus an underline: never a box. */
.finance-page.finance-page .f-label { grid-column: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.finance-page.finance-page.finance-page.finance-page label.has-suffix.has-suffix.has-suffix { grid-template-columns: minmax(0, 1fr) minmax(96px, 40%) 14px; }
.finance-page.finance-page.finance-page.finance-page label.has-suffix.has-suffix.has-suffix > :is(input, select) { grid-column: 2; }
.finance-page.finance-page.finance-page.finance-page label.has-suffix.has-suffix.has-suffix > .f-suffix { position: static; grid-column: 3; grid-row: 1; transform: none; color: var(--ds-ink-4); font-size: 12.5px; }
/* The record sheet uses the same date words. */
.rs-sheet .has-date-face { position: relative; }
.rs-sheet.rs-sheet .has-date-face > input[type="date"],
.rs-sheet.rs-sheet .has-date-face > input[type="date"]::-webkit-datetime-edit { color: transparent; }
.rs-sheet.rs-sheet .has-date-face > input[type="date"]:focus,
.rs-sheet.rs-sheet .has-date-face > input[type="date"]:focus::-webkit-datetime-edit { color: var(--ds-ink); }
.rs-sheet label.has-date-face > .ds-date-face { grid-column: 2; grid-row: 1; margin-right: 26px; }
.rs-sheet label.has-date-face > input[type="date"] { grid-row: 1; grid-column: 2; }
/* Dialogs show dates as words too: the words sit over the field's value. */
.modal-overlay .has-date-face { position: relative; }
.modal-overlay.modal-overlay .has-date-face > input[type="date"],
.modal-overlay.modal-overlay .has-date-face > input[type="date"]::-webkit-datetime-edit { color: transparent; }
.modal-overlay.modal-overlay .has-date-face > input[type="date"]:focus,
.modal-overlay.modal-overlay .has-date-face > input[type="date"]:focus::-webkit-datetime-edit { color: var(--ds-ink); }
.modal-overlay .modal-field.has-date-face > .ds-date-face { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); margin: 0; }