/* Lenses (workers/web/src/lens): the row of lens links, the route drawing, the shop plan, the
   working line, the API lens, the timeline and the phone screen. PixelKit, charcoal theme, with
   the tokens of src/css.ts: square corners, no shadows, no gradients. Series colours are marks
   (a small square), never text. A line is drawn only where something moves. */

/* Rows of plain links with a dot between them. A dot stays with the link before it (.nb), so a
   wrapped row never starts with a dot. */
.nb{display:inline-block;white-space:nowrap}
.lenses,.tl-filter,.shop-steps{font:500 13px var(--mono);color:var(--faint)}
.lenses a,.tl-filter a,.shop-steps a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:6px}
.lenses a:hover,.tl-filter a:hover,.shop-steps a:hover{color:var(--ink)}
.lenses a[aria-current],.tl-filter a[aria-current]{color:var(--ink);text-decoration-color:var(--ink);text-decoration-thickness:2px}
.lenses .nb>span,.tl-filter .nb>span,.shop-steps .nb>span{white-space:pre}

/* The row of lens links on a page of one thing: the current one underlined in ink. */
.lenses{margin:-8px 0 24px}

/* What a lens explains only when asked. */

/* Маршрут: the drawing keeps its own size and scrolls sideways in its frame; the page does not. */
.lens-scroll{overflow-x:auto;max-width:100%;margin:0 0 20px;padding:12px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--hair)}
svg.route{display:block}
.rt-head{font:500 12px var(--mono);fill:var(--faint)}
.rt-edge line{stroke:var(--rule);stroke-width:1.5}
.rt-socket{fill:var(--muted)}
.rt-qty rect{fill:var(--paper)}
.rt-qty text{font:500 12px var(--mono);fill:var(--ink)}
.rt-box{fill:var(--card);stroke:var(--rule);stroke-width:1}
.rt-box.on{stroke:var(--ink);stroke-width:2}
.rt-node a{cursor:pointer}
.rt-node a:hover .rt-box{stroke:var(--ink)}
.rt-node a:focus-visible{outline:none}
.rt-node a:focus-visible .rt-box{stroke:var(--blue);stroke-width:2}
.rt-label{font:500 12px var(--mono);fill:var(--ink)}
.rt-sub{font:11px var(--mono);fill:var(--faint)}
.rt-mark.coral{fill:var(--coral)}.rt-mark.blue{fill:var(--blue)}.rt-mark.mint{fill:var(--mint)}.rt-mark.violet{fill:var(--violet)}.rt-mark.faint{fill:var(--faint)}

/* Sprites: 24 px or a whole multiple, hard pixels. */
.spr{flex:none;display:block;image-rendering:pixelated}
.spr-defs{position:absolute}

/* Цех: the plan. Cells follow the route in reading order; a narrow screen gets one column. */
.shop-time{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px;margin:0 0 4px;max-width:980px}
.shop-time .field{flex:0 0 auto;width:200px}
.shop-range{flex:1 1 260px;min-width:180px;min-height:44px;padding:0;border:0;accent-color:var(--ink)}
.shop-steps{flex:1 1 100%;margin:0}
.shop-steps>.faint,.shop-steps .nb>.faint{display:inline-flex;align-items:center;min-height:44px}
.shop-day{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin:0 0 14px;font:500 14px var(--mono)}
.shop-focus{margin:0 0 14px;padding:10px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--hair);max-width:980px}
.shop-plan{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));border-top:1px solid var(--rule);border-left:1px solid var(--hair)}
.shop-cell{min-width:0;padding:14px 14px 18px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.shop-cell.on{outline:2px solid var(--ink);outline-offset:-2px}
.shop-cell h2{font:700 14px/1.35 var(--mono);margin:0 0 4px;overflow-wrap:anywhere}
.shop-cell h2 .mono{white-space:normal}
.shop-cell h3,.shop-apart h3{margin:14px 0 4px;font:500 12px var(--mono);color:var(--faint)}
.shop-cell>p{margin:8px 0 0;font-size:13px}
.shop-line{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin:0 0 14px;max-width:980px;font-size:14px}
.shop-state{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin:6px 0 0;font-size:13px}
.shop-queue{font:500 12px var(--mono);color:var(--faint)}
.shop-why{margin:2px 0 0;font-size:13px}
.shop-why summary{display:inline-flex;align-items:center;min-height:32px;cursor:pointer;font:500 12px var(--mono);color:var(--faint);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:5px;list-style:none}
.shop-why summary::-webkit-details-marker{display:none}
.shop-why summary:hover{color:var(--ink)}
.shop-why p{margin:2px 0 6px;color:var(--muted)}
.shop-list{list-style:none;margin:0;padding:0}
.shop-row{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:start;padding:6px 0;font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.shop-row.on{outline:2px solid var(--ink);outline-offset:3px}
.shop-row .mono{white-space:normal}
.shop-row .sub{display:block;font-size:13px;color:var(--faint)}
.shop-row .st{white-space:normal}
.shop-list .more{padding:6px 0 0 34px;font:500 12px var(--mono);color:var(--faint)}
.shop-apart{max-width:520px}

/* Рядок: the offer of the working line, in the command box and on its own page. */
#cmd-line{padding:14px 16px 4px;max-height:62vh;overflow-y:auto}
/* The box is a list of search hits; the offer inside it is prose, a list of writes and a table. */
dialog.cmd:has(#cmd-line:not([hidden])){width:min(880px,94vw)}
.cmd .line-offer li{display:list-item;min-height:0;padding:2px 0;cursor:auto}
.cmd .line-offer ol{max-height:none;overflow:visible;padding:0 0 0 22px;list-style:decimal}
.cmd .line-offer .line-found{padding:0;list-style:none}
.cmd .line-offer .line-found li{display:grid;padding:0}
.cmd .line-offer input[type=hidden]{display:none}
.line-form{display:grid;gap:14px;max-width:680px;margin:0 0 28px}
.line-form .btn{justify-self:start}
.line-offer{max-width:860px;margin:0 0 16px}
.line-head{margin:0 0 10px}
.line-fields{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:5px 20px;margin:0 0 12px;font-size:14px}
.line-fields>div{display:contents}
.line-fields dt{font:500 12px/1.6 var(--mono);color:var(--muted)}
.line-fields dd{margin:0;min-width:0;overflow-wrap:anywhere}
.line-dry>p{display:flex;gap:10px;align-items:baseline;margin:0 0 6px;font-size:14px}
.line-writes{margin:0 0 10px;padding-left:22px;font-size:14px;color:var(--muted)}
.line-lines{font-size:13px}
.cmd .line-lines th{background:var(--card)}
.line-run{display:flex;gap:14px;align-items:center;margin:14px 0 6px}
.line-found{list-style:none;margin:0;padding:0}
.line-found li{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;align-items:center;min-height:44px}
.line-found .k{font:500 12px var(--mono);color:var(--faint)}
.line-hint{margin:0;padding:8px 16px 12px;border-top:1px solid var(--hair);font:500 12px var(--mono);color:var(--faint)}

/* API: the call and the JSON it answered. */
.api-read .prov{margin-bottom:12px}
.api-copy{display:flex;gap:14px;align-items:center;margin:0 0 10px}
.api-json{max-height:420px;overflow:auto;padding:12px;border:1px solid var(--hair);background:var(--card);white-space:pre;overflow-wrap:normal}

/* Історія компанії: filters as plain links, then months as sections and days as steps on one rule. */
.tl-filter{max-width:980px;margin:0 0 2px}
.pl{max-width:900px}
.pl-name{display:flex;align-items:center;gap:12px;margin:8px 0 6px;font:700 18px/1.3 var(--sans)}
.pl-day{display:flex;flex-wrap:wrap;gap:6px 22px;margin:6px 0 4px;font:500 13px var(--mono)}
.pl-day>span{display:inline-flex;align-items:baseline;gap:8px}
.pl-list{list-style:none;margin:0;padding:0}
.tl-day .pl-row{display:grid;grid-template-columns:48px 124px minmax(0,1fr) 64px;gap:4px 12px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--hair);color:var(--ink)}
.pl-time{color:var(--faint);font-size:12px}
.pl-what{overflow-wrap:anywhere}
.pl-who{color:var(--muted)}
.pl-min{text-align:right;font-size:12px;color:var(--muted)}
.pl-places,.pl-people{list-style:none;margin:0 0 20px;padding:0;border-top:1px solid var(--rule)}
.pl-places li,.pl-people li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;align-items:center;min-height:48px;padding:6px 0;border-bottom:1px solid var(--hair)}
.pl-places li{grid-template-columns:minmax(0,1fr)}
.pl-people .sub{display:block;font-size:13px;color:var(--faint)}
@media (max-width:640px){.tl-day .pl-row{grid-template-columns:48px minmax(0,1fr) 56px}.tl-day .pl-row .st{grid-column:2}.tl-day .pl-row .pl-what{grid-column:1/-1}}
.tl-month{max-width:860px;margin:32px 0 0}
.tl-month h2 .faint{margin-left:10px;font-size:12px;font-weight:500}
.tl{list-style:none;margin:0 0 0 3px;padding:0;border-left:1px solid var(--rule)}
.tl-day{position:relative;padding:0 0 16px 22px}
.tl-day::before{content:"";position:absolute;left:-4px;top:17px;width:7px;height:7px;background:var(--ink)}
.tl-day h3{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;margin:0;font:500 13px var(--mono);color:var(--ink)}
.tl-day h3 time{display:inline-flex;align-items:center;min-height:44px}
.tl-shop{display:inline-flex;align-items:center;min-height:44px;color:var(--faint)}
.tl-shop:hover{color:var(--ink)}
.tl-day ul{list-style:none;margin:0;padding:0}
.tl-day li{padding:4px 0;font-size:14px;color:var(--muted)}
.tl-day li a{text-decoration-color:var(--hair)}

/* Телефон комірника: one column, targets of 56 px, the code field first. */
body.m{font-size:17px}
.m-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:6px 16px;border-bottom:1px solid var(--hair);font:500 13px var(--mono)}
.m-bar .brand{order:0;flex:1 1 auto;padding:0}
.m-bar a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted)}
.m-main{max-width:520px;margin:0 auto;padding:16px 16px 72px}
.m-main h1{display:flex;align-items:center;gap:14px;margin:0 0 6px;font-size:21px}
.m-main h2{margin:24px 0 8px;font-size:15px;color:var(--muted)}
.m-main .flash{margin-bottom:16px}
.m-find{display:grid;gap:10px;margin:0 0 20px}
.m-find input{min-height:60px;font:500 22px var(--mono)}
.m-row{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.m-main .btn{min-height:56px;padding:12px 20px;font-size:16px}
.m-row .btn{flex:1 1 140px}
.m-video{width:100%;max-height:46vh;background:#000}
.m-places{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.m-places li{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;border-bottom:1px solid var(--hair)}
.m-places a{display:flex;flex:1 1 auto;align-items:center;gap:10px;min-height:56px;text-decoration:none}
.m-acts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0 8px}
.m-acts a[aria-current]{border:2px solid var(--ink)}
.m-form{display:grid;gap:18px;margin:8px 0 24px}
.m-field{display:grid;gap:6px;min-width:0;margin:0;padding:0;border:0}
.m-field legend{padding:0;margin:0 0 4px;font:500 13px var(--mono);color:var(--muted)}
.m-field input,.m-field select{min-height:56px;font-size:20px}
.m-pick{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:56px;border-bottom:1px solid var(--hair);font:inherit;font-size:17px;color:var(--ink);cursor:pointer}
.m-pick input{width:22px;height:22px;min-height:0;accent-color:var(--ink)}
.m-go{width:100%}
.m-tap{display:grid;gap:12px;margin:0 0 12px}
.m-tap .btn{width:100%}
.m-open{display:grid;gap:8px;padding:10px 0;border-bottom:1px solid var(--hair)}
.m-open p{margin:0;font-size:15px}
.m-sub{display:block;margin-top:2px;font:500 12px var(--mono);color:var(--faint)}
.m-orders a.btn[data-op]{display:block}
.m-orders{list-style:none;display:grid;gap:10px;margin:0;padding:0}
.m-orders .btn{width:100%;justify-content:flex-start;white-space:normal;text-align:left}

@media (max-width:960px){
  .lenses{margin-top:0}
  .line-fields{grid-template-columns:1fr;gap:0 0}
  .line-fields dd{margin:0 0 8px}
}