/* creators.css - the Creators module's own styles (app/creators.js). The rest
   is the console's kit: system.css tokens, board.css's .lfd-page, .lfd-tabs,
   .lfd-table and .lfb- panels, staff.html's .btn, .fchip, .tag, .err, label
   and input. Every class here is .cr- prefixed and every colour is a token,
   so light, dark and every skin work without a rule here. */

.cr-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the kit inside this view: paragraphs sit on the panel's own gap, and every
   control is a 34px target on a desktop (44px on a phone, below) */
#v-creators .lfb-panel p{margin:0}
#v-creators .btn,#v-creators .fchip{min-height:34px}
#v-creators .lfb-stamp{overflow-wrap:anywhere}
/* a write under way: the page dims until the answer is back */
#crpage[aria-busy="true"]{opacity:.7;transition:opacity .15s ease}
@media (prefers-reduced-motion:reduce){#crpage[aria-busy="true"]{transition:none}}

/* a figure that rests on something not known yet wears a small word in front
   ("at least", "at most", "about"), and a label cost its word after ("estimate",
   "typed"); a figure that is a phrase ("no cost yet") is set smaller than a
   number; a part of an order not read yet is quiet words, never $0 */
.cr-mark{font:500 11px/1.3 var(--mono);letter-spacing:.04em;color:var(--ink3);white-space:nowrap}
.cr-fig{display:inline-block;max-width:100%}
.cr-words{font-size:15px;line-height:1.3}
.cr-none{color:var(--ink3)}

/* the six figures. The kit lays them in one row; here the page's own width
   decides (the tasks rail may share the window): six across when each has
   room, else three, else two (a phone gets two either way, below). A long
   figure wraps inside its cell and never runs past it. */
#crpage{container-type:inline-size}
#v-creators .lfb-foot .lfb-v,#v-creators .lfb-foot .lfb-muted{overflow-wrap:anywhere}
@container (max-width:1040px){#v-creators .lfb-foot{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
@container (max-width:560px){#v-creators .lfb-foot{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}

.cr-empty{font-size:13px;line-height:1.5;color:var(--ink2);overflow-wrap:anywhere}
.cr-danger,.btn.ghost.cr-danger{color:var(--crit)}
.cr-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
/* a tick box and its words in a row of actions: the console's label is an
   upper-case field heading and its inputs are full width, so both are undone */
.cr-actions label{display:inline-flex;align-items:center;gap:8px;min-height:34px;margin:0;cursor:pointer;
  font-size:13.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink)}
.cr-actions input[type="checkbox"]{width:18px;height:18px;min-height:0;margin:0;padding:0;flex:0 0 auto;accent-color:var(--accent)}

/* ------------------------------------------------------------- tables */
/* a table scrolls sideways inside its panel, never the page */
.cr-scroll{position:relative;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.cr-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* words read from the left; only figures (.n) keep the kit's right edge */
.cr-scroll .lfd-table th:not(.n),.cr-scroll .lfd-table td:not(.n){text-align:left}
.cr-scroll .lfd-table th,.cr-scroll .lfd-table td{vertical-align:middle}
/* a word after a figure keeps its distance from it */
.cr-scroll .lfd-table th.n + th:not(.n),.cr-scroll .lfd-table td.n + td:not(.n){padding-left:22px}
.cr-scroll .tag{margin:0 0 0 8px}
.lfd-table tr.cr-off td,.cr-off .cr-url{color:var(--ink3)}

/* a column heading stays on one line: the table scrolls, the heading doesn't stack */
.cr-scroll .lfd-table th{white-space:nowrap}

/* a label's cost typed in its order's row: a narrow field and its button
   side by side under the figure, and the sentence under both when the
   amount doesn't read */
.cr-label{display:grid;grid-template-columns:92px auto;justify-content:end;align-items:center;gap:6px;margin:4px 0 0}
.cr-label input{min-height:34px;margin:0;padding:6px 8px;text-align:right;font-variant-numeric:tabular-nums}
.cr-label .btn{justify-self:start}
.cr-label .err{grid-column:1 / -1;width:230px;margin:0;font-family:var(--ui);text-align:left;white-space:normal}
.cr-label [aria-invalid="true"]{border-color:var(--crit)}

/* a name that opens its creator: the words are plain text and the button is
   laid over them, empty, named by aria-labelledby */
.cr-open{position:relative;display:inline-flex;align-items:center;min-height:34px;border-radius:var(--r);
  color:var(--ink);font-family:var(--ui);font-size:13.5px;font-weight:600;letter-spacing:0;
  text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.cr-open:hover{text-decoration-color:var(--accent)}
.cr-open > button,.cr-hits > span > button{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;
  border:0;border-radius:inherit;background:transparent;cursor:pointer;touch-action:manipulation}
.cr-open > button:focus-visible,.cr-hits > span > button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ------------------------------------------------------------- the link row */
.cr-link{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cr-link + .cr-link{border-top:1px solid var(--line);padding-top:10px}
.cr-link > b{font:600 13.5px/1.3 var(--mono);color:var(--ink);overflow-wrap:anywhere}
.cr-link .tag{margin:0}
.cr-url{flex:1 1 260px;font:500 12.5px/1.45 var(--mono);color:var(--ink);overflow-wrap:anywhere;word-break:break-word;
  -webkit-user-select:all;user-select:all}
.cr-link .btn{flex:0 0 auto}

/* ------------------------------------------------------------- forms */
.cr-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;align-items:start}
.cr-form > div{display:flex;flex-direction:column;min-width:0}
.cr-form > .cr-actions{flex-direction:row}
.cr-wide{grid-column:1 / -1}
.cr-form label{margin:0 0 5px}
.cr-form .cr-actions label{margin:0}
.cr-form input,.cr-form select,.cr-form textarea{margin:0}
.cr-form select{width:100%;min-height:42px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);color:var(--ink);font:inherit;font-size:16px}
.cr-form textarea{min-height:88px}
.cr-form p{margin:0}
.cr-form .cr-empty{white-space:pre-wrap}
.cr-form .err{margin:0}
.cr-form [aria-invalid="true"]{border-color:var(--crit)}

/* the store's order number, with the button that pulls its items beside it */
.cr-form > .cr-pull{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:8px 10px}
.cr-pull > div{display:flex;flex-direction:column;flex:1 1 220px;min-width:0;max-width:340px}
.cr-pull > .btn{flex:0 0 auto}

/* the items of a send: item / sku / qty / unit cost / remove */
.cr-lines{display:flex;flex-direction:column;gap:8px}
.cr-lines > div{display:grid;grid-template-columns:minmax(0,1fr) 120px 84px 130px 84px;gap:8px 10px;align-items:end}
.cr-lines > div > div{display:flex;flex-direction:column;min-width:0}
/* on a wide screen the first row's headings head the columns */
@media (min-width:761px){
  .cr-lines > div + div label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}

/* customer cards found by the search: a name, with its button laid over it */
.cr-hits{display:flex;flex-wrap:wrap;gap:6px}
.cr-hits:empty{display:none}
.cr-hits > span{position:relative;display:inline-flex;align-items:center;min-height:34px;padding:6px 11px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);font-size:13px;overflow-wrap:anywhere}
.cr-hits > span:hover{background:var(--surface2)}

/* ------------------------------------------------------------- sends */
.cr-send{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-top:1px solid var(--line)}
.cr-send:first-child{border-top:0;padding-top:0}
.cr-send > b{font:600 13.5px/1.3 var(--ui);color:var(--ink)}
.cr-send > b span{font:500 12px/1.3 var(--mono);color:var(--ink3);margin-left:8px;overflow-wrap:anywhere}
.cr-send ul{list-style:none;margin:0;padding:0;font-size:13px;line-height:1.55;color:var(--ink2);font-variant-numeric:tabular-nums}
.cr-send li{overflow-wrap:anywhere}

/* ------------------------------------------------------------- the how-to */
.cr-howto{margin:0;padding-left:22px;font-size:13px;line-height:1.55;color:var(--ink2);max-width:80ch}
.cr-howto li + li{margin-top:4px}

/* ------------------------------------------------------------- phone */
@media (max-width:760px){
  #v-creators .lfb-foot{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  #v-creators .btn,#v-creators .fchip,.cr-actions label,.cr-open,.cr-hits > span,.cr-label input{min-height:44px}
  .cr-form{grid-template-columns:minmax(0,1fr)}
  .cr-form select{min-height:44px}
  .cr-lines > div{grid-template-columns:repeat(3,minmax(0,1fr));padding-bottom:8px;border-bottom:1px solid var(--line)}
  .cr-lines > div > div:first-child,.cr-lines > div > .btn{grid-column:1 / -1}
  .cr-lines > div > span{display:none}
  .cr-link .btn{flex:1 1 auto}
  .cr-pull > div{max-width:none}
  .cr-pull > .btn{flex:1 1 auto}
}