/* The screens of the journey, the review, the payment, the package, the preview and the administration: their own rules,
 * named by the classes of their templates and drawn with the tokens of app.css. Every page loads this file after app.css.
 * .j1 wraps every journey screen (journey-frame.ts); .op wraps the administration's screens (routes/admin.ts). */

/* Tables on a working screen are rules and alignment: the caption is a quiet label and the header row has no band. */
:is(.j1,.op) caption{background:none;padding:12px 16px 4px;font-size:14px;color:var(--ink-60)}
:is(.j1,.op) thead th{background:none;font-size:14px;color:var(--ink-60);border-block-end-color:var(--line)}
:is(.j1,.op) .table-scroll{background:var(--paper)}

/* A working screen's title names the screen; it is not a landing page's headline (app rules: 18-32px, 24px on a phone). */
body:has(.j1,.op) main h1{font-size:clamp(24px,2.4vw,32px);line-height:1.4}

/* Figures in a table line up digit by digit at the cell's end. */
:is(.j1,.op) :is(td,th).num{text-align:end;font-variant-numeric:tabular-nums}

/* A group of choices inside a form: a ruled box in the screen's line colour, its legend in the text face. */
.j1 fieldset{border:1px solid var(--line);border-radius:var(--r-ctl);padding:12px 20px 16px;margin:0 0 16px;min-inline-size:0}
.j1 legend{padding-inline:6px;font-weight:600;font-size:1rem;color:var(--ink)}

/* Sections of one screen are spaced as sections, and a section's own actions keep clear of the next heading. */
.j1 .j1-stage>section+section{margin-block-start:40px}
.j1 .j1-stage>section>form>.form-actions:last-child{margin-block-end:8px}

/* Below 640px the process map is a list of processes, each with what it takes in and hands on under their labels. */
@media (max-width:640px){
  .j1 .j2-map-table,.j1 .j2-map-table tbody,.j1 .j2-map-table tr,.j1 .j2-map-table th,.j1 .j2-map-table td{display:block;inline-size:100%}
  .j1 .j2-map-table thead{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
  .j1 .j2-map-table tr{padding-block:12px;border-block-end:1px solid var(--line)}
  .j1 .j2-map-table th,.j1 .j2-map-table td{border:0;padding:4px 16px}
  .j1 .j2-map-table th[scope=row]{font-size:16px}
  .j1 .j2-map-table td[data-label]::before{content:attr(data-label);display:block;font-size:13px;color:var(--ink-60);margin-block-end:2px}
}

/* Paired fields (Arabic and its English twin) keep their inputs on one line when only one of the two carries a hint. */
.j1 .twin{align-items:end}

/* A row of actions holds the deferral beside the main action, not under it. */
.j1 .j1-row>.j2-later-form{margin:0}

/* The preview's choice of documents (routes/preview.ts): a ruled box of plain rows, each a box, its code and its title. */
.glance-choice{border:1px solid var(--line);border-radius:var(--r-ctl);padding:12px 20px 16px;margin:0 0 16px;background:var(--paper);min-inline-size:0}
.glance-choice legend{padding-inline:6px;font-weight:600;color:var(--ink)}
.glance-choice ul{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:8px}
.glance-choice li label{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.glance-choice code{font-size:14px;color:var(--ink-60)}

/* A job's state says good, waiting or failed by its colour as well as its words. */
.state{display:inline-flex;align-items:flex-start;gap:6px;font-weight:600}
.state .icon{margin-block-start:.2em}
/* a short state stays on one line; a failure that explains itself breaks inside its cell */
.state-ok,.state-wait{white-space:nowrap}
.state .icon{flex:none}
.state-ok{color:var(--success)}
.state-wait{color:var(--ink-60)}
.state-bad{color:var(--error)}

/* A package's file: the archive's name beside its icon, under the download and its description. */
.j1 .download-list .field-help{display:inline-flex;align-items:center;gap:6px}

/* The logo's file field: its button drawn as the screen's secondary button, not the browser's grey one. */
.j1 input[type=file]::file-selector-button{font:inherit;font-weight:600;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-btn);padding:6px 14px;margin-inline-end:12px;cursor:pointer}
.j1 input[type=file]::file-selector-button:hover{border-color:var(--ink);background:var(--raised)}

/* The administration: one left edge, an address kept on one line, and the actions of an account as labelled rows. */
.op{display:grid;gap:24px}
.op>p{margin:0}
.op td.address{white-space:nowrap}
.op td time{white-space:nowrap}
/* Between the phone's rows and a wide screen the table keeps its columns and an address may break, so the page never scrolls sideways. */
@media (max-width:1100px){.op td.address{white-space:normal;overflow-wrap:anywhere}.op td time{white-space:normal}}
.op .row-actions{display:grid;gap:12px;min-inline-size:260px}
.op .row-actions form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin:0}
.op .row-actions label:not(.visually-hidden){inline-size:100%;font-size:14px;color:var(--ink-60);margin:0}
.op .row-actions input,.op .row-actions select{flex:1 1 160px;min-inline-size:0;min-block-size:44px;inline-size:auto}
.op .row-actions button{min-block-size:44px;flex:none}
.op .row-actions p{margin:0}

/* Below 640px a table of the administration is a list of rows, each field under its own label; the page never scrolls sideways. */
@media (max-width:640px){
  .op table,.op tbody,.op tr,.op td{display:block;inline-size:100%}
  .op thead{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
  .op tr{padding-block:12px;border-block-end:1px solid var(--line)}
  .op td{border:0;padding:4px 16px}
  .op td[data-label]::before{content:attr(data-label);display:block;font-size:13px;color:var(--ink-60)}
  .op td.address{white-space:normal;overflow-wrap:anywhere}
  .op .row-actions{min-inline-size:0}
  .op .table-scroll{overflow:visible}
}