.period-row { flex: none; display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; background: var(--ground); border-bottom: 1px solid var(--hairline); overscroll-behavior-x: contain; }
.period-row::-webkit-scrollbar { display: none; }
.period-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius-sm, 6px); font: 500 13px var(--sans); white-space: nowrap; cursor: pointer; }
.period-chip:hover { border-color: var(--edge); }
.period-chip:focus-visible, .period-day:focus-visible, .period-pop button:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
.period-chip[aria-pressed="true"], .period-chip[aria-expanded="true"] { color: var(--emerald); font-weight: 600; background: var(--emerald-tint); border-color: var(--emerald-border); box-shadow: inset 0 -2px 0 var(--emerald); }
.period-total { display: inline-block; min-width: 13ch; color: var(--muted); font: 500 12px var(--mono); text-align: left; }
.period-chip[aria-pressed="true"] .period-total { color: var(--emerald); }
.period-total.is-negative { color: var(--amber); }
.period-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.period-choices .period-chip { height: 36px; padding: 0 16px; border-radius: var(--radius-pill, 999px); font-size: 14px; box-shadow: none; }
.period-choices .period-chip[aria-pressed="true"] { box-shadow: none; }
.period-pop[hidden] { display: none; }
.period-pop { position: fixed; z-index: 40; display: flex; flex-direction: column; gap: 12px; width: max-content; max-width: calc(100vw - 16px); padding: 14px;
  color: var(--ink); background: var(--raised); border: 1px solid var(--hairline); border-radius: var(--radius-md, 10px); box-shadow: var(--shadow-2); }
.period-pop-head { display: flex; align-items: center; gap: 8px; }
.period-pop-head .period-pop-title { flex: 1; min-width: 0; color: var(--ink); font: 500 13px var(--mono); }
.period-step { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: var(--ink-2); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-sm, 6px); font: 500 16px var(--sans); cursor: pointer; }
.period-step:disabled { color: var(--disabled); cursor: default; }
.period-months { display: flex; gap: 20px; }
.period-month { display: flex; flex-direction: column; gap: 6px; }
.period-month-name { color: var(--ink); font: 600 13px var(--sans); text-align: center; }
.period-grid { display: grid; grid-template-columns: repeat(7, 36px); gap: 2px 0; }
.period-dow { display: grid; place-items: center; height: 22px; color: var(--muted); font: 600 10px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.period-day { position: relative; display: grid; place-items: center; height: 34px; padding: 0; color: var(--ink); background: transparent; border: 0; border-radius: 0; font: 400 13px var(--mono); cursor: pointer; }
.period-day:hover:not(:disabled):not(.is-start):not(.is-end) { background: var(--selected); }
.period-day.is-in { background: var(--emerald-tint); }
.period-day.is-start, .period-day.is-end { color: var(--on-emerald); background: var(--emerald); font-weight: 600; }
.period-day.is-start { border-radius: var(--radius-sm, 6px) 0 0 var(--radius-sm, 6px); }
.period-day.is-end { border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0; }
.period-day.is-start.is-end { border-radius: var(--radius-sm, 6px); }
.period-day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; background: var(--emerald); border-radius: 50%; }
.period-day.is-start.is-today::after, .period-day.is-end.is-today::after { background: var(--on-emerald); }
.period-day:disabled { color: var(--disabled); cursor: not-allowed; opacity: .55; }
.period-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.period-quick button { height: 30px; padding: 0 12px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-pill, 999px); font: 500 12.5px var(--sans); cursor: pointer; }
.period-pop-hint { margin: 0; color: var(--muted); font: 400 12px var(--sans); }
.period-pop-foot { display: flex; justify-content: flex-end; gap: 8px; }
/* What you made (design v11 DkProfit): the big card repeats the dates and the figure; the file maker sits in the desk. */
body[data-page="profit"] .made-card { margin: 0 0 16px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md, 10px); box-shadow: var(--shadow-1); }
body[data-page="profit"] .made-dates { min-height: 20px; margin: 0; color: var(--quiet); font: 400 14px var(--sans); }
body[data-page="profit"] .made-card .profit-headline { margin: 4px 0 2px; font: 600 34px/1.15 var(--mono); }
body[data-page="profit"] .made-card .made-what { margin: 0 0 6px; }
body[data-page="profit"] .file-dates { min-height: 20px; margin: 0; color: var(--ink); font: 500 14px var(--mono); }
body[data-page="profit"] .file-kinds .button { justify-content: flex-start; width: 100%; }
/* Beside Make the file the nine-column channel ledger keeps readable channel names and scrolls inside its frame instead. */
@media (min-width: 900px) {
  body[data-page="profit"] #channel-section table { min-width: 860px; }
  body[data-page="profit"] #channel-rows td:first-child, body[data-page="profit"] #channel-foot td:first-child { min-width: 9em; }
}
body[data-page="profit"] #export-outcome[data-tone="error"] { color: var(--red); }
body[data-page="profit"] #export-outcome[data-tone="committed"] { color: var(--emerald); }
/* Between a phone and a wide desk the shared desk floats over the work; here it would cover the channel table, so it sits below. */
@media (min-width: 900px) and (max-width: 1359px) {
  body[data-page="profit"] .app-body:has(> .context-desk:not([hidden])) { display: block; overflow-y: auto; }
  body[data-page="profit"] .app-body > main { overflow: visible; }
  body[data-page="profit"] .app-body > .context-desk:not([hidden]) { position: static; width: auto; border-left: 0; border-top: 1px solid var(--hairline); }
}
@media (max-width: 899px) {
  body[data-page="profit"] .made-card .profit-headline { font-size: 28px; }
  .period-row { min-height: 46px; padding: 0 12px; }
  .period-pop { left: 8px !important; right: 8px; width: auto; }
  .period-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .period-months { justify-content: center; }
  .period-month { flex: 1; }
}