
/* Form Q-1 (WP07). Page styles only; the shared form frame is pages.css. */
.page-shell[data-page='create'] .page-form fieldset[disabled] input,.page-shell[data-page='create'] .page-form fieldset[disabled] textarea,.page-shell[data-page='create'] .page-form fieldset[disabled] select{opacity:1;color:#142219;background:#e3d2a9;border-style:dashed}
/* The form's headings and labels (each step's title, the STEP line, the field names and the last step's review names) are
   in the display face like its keys (Jersey 20, the owner's choice of 26 Oct 2026, option B): at .84 of the size each had
   in the body face, as the keys are (pages.css), on the line box and margin each had, so the rows keep their heights.
   What is typed into the fields stays in the body face at the form's size; the confirmation line is a sentence and keeps
   the body face. */
.page-shell[data-page='create'] .page-form legend{margin-bottom:.357em;font:400 .882em/1.4286 var(--t-font-display);letter-spacing:.02em}
.create-step-tag{margin:0 0 4px;font:400 .714em/1.4286 var(--t-font-display);color:#5b4a2c}
.page-shell[data-page='create'] .page-form label:not(.create-confirm){font-family:var(--t-font-display);font-size:.84em;line-height:1.4286}
.page-shell[data-page='create'] .page-form label:not(.create-confirm) :is(input,select,textarea){font-family:var(--t-font-body);font-size:calc(1em / .84);line-height:1.2}
.create-hint{margin:-6px 0 12px;font-size:.85em;line-height:1.15;color:#48452f}
.create-none{margin:0 0 10px;padding:4px 8px;border-left:4px solid #7b6240;background:#e3d2a9;color:#2a2618}
.create-readonly{margin:0 0 12px;padding:6px 10px;border-left:4px solid #2f8f55;background:#e3f1df;color:#123b20}
.create-flags{margin:-4px 0 12px;display:grid;gap:4px}.create-flags:empty{display:none}
.create-flag{margin:0;padding:4px 8px;font-size:.9em;line-height:1.15;border-left:4px solid #b7791f;background:#f6e3b8;color:#5a3a06}
.create-flag[data-kind='block']{border-left-color:#c42018;background:#f8d9c6;color:#7a1610}
.create-review{display:grid;grid-template-columns:minmax(110px,max-content) minmax(0,1fr) max-content;gap:4px 10px;margin:0 0 14px;align-items:baseline}
.create-review dt{font:400 .84em/1.4286 var(--t-font-display)}.create-review dd{margin:0;overflow-wrap:anywhere;white-space:pre-line}
.create-review .create-missing{color:#a3150f;font-weight:bold}
.create-review button.page-button{min-height:32px;padding:2px 10px;font-size:.85em}
.create-confirm{display:flex!important;gap:10px;align-items:flex-start;margin:6px 0 12px}
.page-shell[data-page='create'] .create-confirm input[type='checkbox']{appearance:none;-webkit-appearance:none;flex:0 0 20px;width:20px!important;height:20px;margin:2px 0 0;padding:0;border:2px solid #142219;background:#f7ead0;display:inline-grid;place-content:center;cursor:pointer}
.page-shell[data-page='create'] .create-confirm input[type='checkbox']::before{content:'';width:12px;height:12px;background:#142219;clip-path:polygon(14% 52%,0 66%,38% 100%,100% 22%,86% 8%,38% 72%);transform:scale(0)}
.page-shell[data-page='create'] .create-confirm input[type='checkbox']:checked::before{transform:scale(1)}
.page-shell[data-page='create'] .create-confirm input[type='checkbox']:focus-visible{outline:2px solid #c45a0c;outline-offset:2px}
.page-shell[data-page='create'] .create-confirm input[type='checkbox'][aria-invalid='true']{border-color:#c42018;box-shadow:0 0 0 2px #f8d9c6}
.page-shell[data-page='create'] .page-form .form-actions .page-button{min-height:44px;padding:8px 14px}
.page-shell[data-page='create'] .page-form .page-button.primary{color:#140d06}
.create-status{box-sizing:border-box;width:min(760px,calc(100% - 32px));margin:20px auto 0;padding:18px 20px;border:3px solid #916539;background:#07110c;color:#ecd8b5}
.create-status[data-tone='good']{border-color:#2f8f55}.create-status[data-tone='bad']{border-color:#c42018}.create-status[data-tone='wait']{border-color:#d08a2a}
.create-status h2{margin:0 0 8px;font:600 22px/1.3 var(--t-font-display, "QUIT Display", monospace);color:#fb600c}
.create-status[data-tone='good'] h2{color:#4fe08b}.create-status[data-tone='bad'] h2{color:#ff7a5c}
.create-status p{margin:0 0 10px}.create-status ul{margin:0 0 10px;padding-left:20px}
.create-status .form-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.create-status .page-button{min-height:44px}
.create-status a.page-button{color:#ebd6b4}.create-status a.page-button.primary{color:#140d06}
.create-forms{width:min(760px,calc(100% - 32px));padding:0}.create-forms ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.create-forms li{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;border-bottom:1px solid #254634;padding:6px 0}
.page-shell[data-page='create'] .page-toolbar{width:min(760px,calc(100% - 32px));padding:12px 0}
.page-shell[data-page='create'] [data-region='form.status'][data-state]{transition:none}
.page-shell[data-page='create'] [data-region='form.status'][data-state='draft']{color:#6f6a57!important}
.page-shell[data-page='create'] [data-region='form.status'][data-state='good']{color:#0e7f38!important}
.page-shell[data-page='create'] [data-region='form.status'][data-state='wait']{color:#a3560c!important}
.page-shell[data-page='create'] [data-region='form.status'][data-state='bad']{color:#b3170f!important}
.page-shell[data-page='create'] [data-region='coin.floor']{background:#06170d;box-shadow:0 0 0 .35cqw #06170d,0 0 0 .5cqw #19a35a;z-index:6}
.page-shell[data-page='create'] .create-preview-line{overflow:visible!important;max-height:none!important;border:2px solid #111d13;border-radius:6px;padding:.35em .5em}
.page-shell[data-page='create'] .create-preview-line::after{content:'';position:absolute;left:14%;bottom:-.55em;width:.9em;height:.6em;background:#f2dfb7;clip-path:polygon(0 0,100% 0,0 100%);border-left:2px solid #111d13}
.create-preview-line__text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;overflow-wrap:anywhere}
.page-shell[data-page='create'] .create-preview-pilot[data-silhouette]{filter:brightness(0) drop-shadow(0 0 .25cqw #ffcc68);opacity:.7}
.create-preview-caption{display:flex;align-items:center;justify-content:center;text-align:center;background:#06170dd9;color:#f2dfb7;border:2px solid #19a35a;font:600 clamp(12px,1cqw,20px)/1.1 var(--t-font-display, "QUIT Display", monospace);padding:.2em .4em;white-space:nowrap;pointer-events:none}
.page-shell[data-page='create'] .lp-plate__input[readonly]{cursor:pointer}
.page-shell[data-page='create'] .lp-plate__input::placeholder{color:#3c3a2c;opacity:.85}
/* The phone clipboard's ANY OTHER JOB line uses the whole dashed box, so the words are never cut. */
.page-shell[data-page='create'] [data-frame^='p'] input.lp-plate__input[data-region='form.other-job']{left:21%!important;width:58%!important;text-align:center}
/* The shared banner's tag at the page's 12 px text floor on phones (rows N02, P09). lp.css line 494 sets 11 px there; that
   is WP02's file (audit/requests/WP07-to-WP02.md). This rule loads on Form Q-1 only and can go once lp.css reads 12px. */
@media(max-width:899px){.lp-banner .lp-banner__tag{font-size:12px}}
@media(max-width:899px){.page-shell[data-page='create'] .page-toolbar{flex-direction:column;align-items:stretch}.create-review{grid-template-columns:1fr max-content}.create-review dt{grid-column:1/-1;margin-top:6px}.create-status h2{font-size:19px}}
