/* Book the studio: the fields are the only new part of this section. Loaded by
   digiio-studio.html only; nothing here is used by another page. */

/* The ledger, the numeral and the package rows are the packages block above,
   doing a second job. */
.bk { display: flex; flex-direction: column; gap: var(--block-gap); --bk-key: 104px; }
.bk__form { display: flex; flex-direction: column; container-type: inline-size; }
.bk__col { display: flex; flex-direction: column; gap: var(--block-step); }
/* Clears the sticky nav, so it is written as the nav's own height plus a gutter. */
.bk__led { position: sticky; top: calc(var(--nav-h) + var(--gutter)); }
/* Not chosen yet: the numeral is a ghost, so the warm ramp stays for the choice. */
.bk__num, .bk__num.ramp { background-image: none; -webkit-text-fill-color: var(--ghost); color: var(--ghost); }

.fgroup { border: 0; padding: 0; margin: 0; min-width: 0; }
/* Fields in a group sit one row pad apart. Groups are separated by that row pad
   plus the column's block step, so each break reads as roughly twice a row gap
   at every width. No top pad, so the first field lines up with the ledger. */
.fields { display: flex; flex-direction: column; gap: var(--row-pad); padding: 0 0 var(--row-pad); }
.field {
  display: grid; grid-template-columns: var(--bk-key) minmax(0, 1fr); column-gap: 24px; align-items: center;
  color: var(--ink);
}
html.js .field .in { color: var(--ghost-row); transition: color .5s; }
/* The date format hint is the input's own text, not a placeholder, so it is held
   at the same legible role as every other resting label in the section. */
html.js .field .in--date { color: var(--ink-meta); }
html.js .field.is-on .in, html.js .field:focus-within .in { color: var(--ink); }
.field__k {
  font-family: var(--mono); font-size: var(--type-meta); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-meta); /* #9A9DA4 on #17181A = 6.9:1, legible before the form is touched */
}
.field:focus-within .field__k, .bk__pkgs:has(.pkg--pick:focus-within) .bk__legend { color: var(--accent-hi); } /* #F0663A on #17181A = 6.4:1 */
.field__in { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }

/* The fields carry no rules of their own: the editable area is a tinted box. */
.in {
  width: 100%; min-width: 0; background: var(--tint); border: 0; border-radius: 4px;
  padding: 11px 12px; margin: 0;
  font-family: inherit; font-size: var(--type-card); font-weight: 500; letter-spacing: -.015em;
  color: var(--ink); color-scheme: dark; transition: background-color .3s;
}
.in:hover, .in:focus { background: var(--tint-2); }
.in::placeholder { color: var(--ink-meta); font-weight: 400; opacity: 1; }
.in--date { font-size: var(--type-body); }
.in--n { width: 7ch; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.in--n::-webkit-outer-spin-button, .in--n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.seg { display: flex; }
.seg__b {
  font-family: var(--mono); font-size: var(--type-micro); letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap;
  background: transparent; border: 1px solid var(--rule); color: var(--ink-meta);
  padding: 8px 12px; min-height: 34px; cursor: pointer; transition: color .2s;
}
.seg__b + .seg__b { margin-left: -1px; }
/* The active button owns all four of its borders, so it sits above its neighbour. */
.seg__b.is-on { position: relative; z-index: 1; }
/* A focus ring outranks that, or the inactive button's ring is clipped by the
   active button sitting over it. */
.seg__b:focus-visible { position: relative; z-index: 2; }
.seg__b:first-child { border-radius: 4px 0 0 4px; }
.seg__b:last-child { border-radius: 0 4px 4px 0; }
.seg__b:hover { color: var(--ink); }
.seg__b.is-on { color: var(--ink); background: var(--tint); border-color: color-mix(in oklab, var(--accent-hi), transparent 45%); }

/* The two date boxes take the whole field track rather than the space the mode
   buttons leave, which was too little for dd/mm/yyyy and the calendar button. */
.dates { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; flex: 1 1 100%; min-width: 0; }
/* The date grid opens on its own row, under both boxes. Its styles are in
   calendar.css; these two rules are only its place in this field. */
.dates .cal-panel { justify-self: start; margin-top: 0; }
.dates__to { font-family: var(--mono); font-size: var(--type-micro); letter-spacing: .08em; color: var(--ink-meta); }
/* The people stepper. Named for this form: the process tiles own .step. */
.bk__step {
  width: var(--tap); height: var(--tap); flex: none; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--rule); color: var(--ink);
  font-family: var(--font); font-size: 19px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: border-color .2s;
}
.bk__step:hover { border-color: var(--accent-hi); }

/* A radio row must be readable before it is chosen, so the ghost state of .pkg is
   overridden here; the choice is carried by the dot, the title and the numeral. */
.bk__pkgs { border: 0; padding: 0; margin: 0; }
.bk__legend { padding: 0 0 var(--label-gap); }
.pkg--pick { cursor: pointer; }
html.js .pkg--pick { color: var(--ink-2); } /* #C7C9CE on #17181A = 12.4:1 */
.pkg__dot {
  width: 11px; height: 11px; flex: none; border-radius: 999px; align-self: center;
  border: 1px solid var(--ghost-row); transition: background-color .3s;
}
.pkg--pick:has(:checked) .pkg__dot {
  background: var(--warm-3); border-color: var(--warm-3);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--warm-2), transparent 62%);
}
html.js .pkg--pick:has(:checked), .pkg--pick:focus-within { color: var(--ink); }
.pkg--pick:focus-within .pkg__dot { border-color: var(--accent-hi); }

.bk__send { display: flex; justify-content: flex-end; align-items: baseline; gap: 20px; padding-top: var(--row-pad); }
/* Every field is needed, so a send that cannot go marks what is missing on the
   labels, in the same accent focus uses. */
.bk__msg { color: var(--accent-hi); } /* #F0663A on #17181A = 6.4:1 */
.field.is-miss .field__k, .bk__pkgs.is-miss .bk__legend { color: var(--accent-hi); }
button.fwd { border: 0; padding: 0; cursor: pointer; font-family: inherit; }
/* Sending, and sent: the send holds the state so the form keeps its layout. */
button.fwd[aria-disabled="true"] { cursor: default; }
/* Every label the send can show shares one grid cell, so the button keeps the
   width of its longest label in every state and the message beside it stays put. */
.bk__say { display: inline-grid; justify-items: end; }
.bk__say > span { grid-area: 1 / 1; visibility: hidden; }
[data-state="idle"] > .bk__say > [data-say="idle"],
[data-state="sending"] > .bk__say > [data-say="sending"],
[data-state="sent"] > .bk__say > [data-say="sent"] { visibility: visible; }
.bk__form.is-sent .bk__msg { color: var(--ink); }
/* Bait for crawlers that fill every input. Out of flow, out of the tab order. */
.bk__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@container (max-width: 960px) {
  /* Two date fields plus their calendar buttons no longer fit the field's second
     track, so they stack and the separator leads the second line. */
  .dates { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
@container (max-width: 704px) {
  .field { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .bk__led { position: static; }
}
@media print { .field, .pkg--pick { break-inside: avoid; } .bk__step, .seg { display: none; } }