/* The two things opened from anywhere, New and Search, on the language set
   out in home.css: the same six sizes of type, steps of four, corners of 16,
   8 and 4, and rows told by a bare icon and their words. Loaded after it.

   On a wide screen each is a second leaf of the rail: the same indigo, joined
   to the rail's edge for the whole height of the window, sliding out from
   behind it. The rail stays lit and only the page dims. On a tablet each is
   a panel in the middle; on a phone New is a sheet from the foot and Search
   takes the whole screen, as the keyboard takes half of it.

   New lists what can be made by what it is (Sales, Purchases, Parties,
   Stock, Team), under the names the rail uses. Search lists what was found
   under the kind of thing it is, can be kept to one kind, and before
   anything is typed offers the places most worth a look. */

:root { --indigo-leaf: #22256e; }
.newpop kbd, .palette kbd, .pal-esc { display: inline-grid; place-items: center; height: 20px; min-width: 24px; padding: 0 4px; border: 0; border-radius: 4px; font: 500 var(--t-small) / 1 var(--sans); color: var(--muted); background: var(--paper); box-shadow: none; }

/* ---------- New ---------- */
dialog.sheet:has(> .newpop) { background: var(--surface); }
.newpop { font-size: var(--t-body); }
.pop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 0 24px; }
.pop-head h2 { font-size: var(--t-head); font-weight: 600; letter-spacing: -0.01em; }
.pop-head .close { width: 32px; height: 32px; border-radius: var(--r-ctl); background: none; box-shadow: none; color: var(--muted); transition: background-color 150ms; }
.pop-head .close:hover { background: rgba(22, 23, 26, 0.05); color: var(--ink); }
.np-cols { display: grid; gap: 0 16px; padding: 4px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
.np-col { display: grid; align-content: start; min-width: 0; }
.np-h { display: flex; align-items: center; gap: 8px; margin: 12px 12px 4px; font-size: var(--t-small); font-weight: 500; line-height: 1.4; color: var(--muted); }
/* the Tally mark beside a group whose things go into the Tally books: the mark alone, no words */
.np-mark { display: inline-grid; color: var(--tally); }
.np-list { display: grid; }
.np-row { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 44px; padding: 8px 12px; border: 0; border-radius: var(--r-ctl); background: none; cursor: pointer; text-align: left; font-weight: 500; color: var(--ink); transition: background-color 150ms; }
.np-row:hover { background: rgba(22, 23, 26, 0.05); }
.np-row:active { background: rgba(22, 23, 26, 0.08); }
.np-row > svg { flex: none; color: var(--muted); }
.np-row > span { flex: 1; min-width: 0; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-row > small { flex: none; font-size: var(--t-small); font-weight: 400; color: var(--muted); }
/* the foot of the leaf (what is likely made next, and the keys) belongs to the wide screen, where there is the height for it */
.np-foot { display: none; }
/* a phone or a tablet has no keys to press; a finger gets more of the close button */
@media (max-width: 999px) {
  .newpop kbd { display: none; }
  .pop-head .close { position: relative; }
  .pop-head .close::after { content: ""; position: absolute; inset: -8px; }
}
/* on a phone the things of one kind sit two to a line; from a tablet up the kinds sit in two columns */
@media (max-width: 699px) { .np-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .np-row > span { white-space: normal; } }
@media (min-width: 700px) {
  .np-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .np-row { min-height: 40px; }
}
@media (min-width: 640px) and (max-width: 999px) { dialog.sheet:has(> .newpop) { max-width: 640px; } }

/* ---------- Search ---------- */
dialog.palette { margin: 12vh auto auto; width: calc(100% - 32px); max-width: 640px; border-radius: var(--r-lg); box-shadow: 0 24px 64px rgba(22, 23, 26, 0.28), 0 0 0 1px var(--line); font-size: var(--t-body); color: var(--ink); }
dialog.palette[open] { display: flex; flex-direction: column; }
.pal-top { flex: none; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 24px; border-bottom: 1px solid var(--hair); }
.pal-top > svg { flex: none; color: var(--muted); }
.palette .pal-top input { flex: 1; width: auto; min-width: 0; height: 56px; padding: 0; border: 0; outline: 0; background: none; font-size: var(--t-head); color: inherit; }
.pal-esc { flex: none; height: 24px; padding: 0 8px; cursor: pointer; }
.pal-esc:hover { color: var(--ink); }
.pal-esc .m { display: none; }
/* what search is kept to: one row of words, the one in hand marked */
.pal-scopes { flex: none; display: flex; gap: 4px; padding: 8px 16px 0; overflow-x: auto; scrollbar-width: none; }
.pal-scopes::-webkit-scrollbar { display: none; }
.pal-scopes button { position: relative; flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: none; cursor: pointer; font-size: var(--t-body); color: var(--muted); transition: background-color 150ms, color 150ms; }
.pal-scopes button:hover { background: rgba(22, 23, 26, 0.05); color: var(--ink); }
.pal-scopes button[aria-pressed="true"] { background: rgba(22, 23, 26, 0.08); color: var(--ink); font-weight: 500; }
.palette-list { flex: 1 1 auto; min-height: 0; max-height: min(60vh, 480px); overflow-y: auto; overscroll-behavior: contain; padding: 8px 12px; scroll-padding: 8px; }
.pal-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 12px 4px; font-size: var(--t-small); font-weight: 500; line-height: 1.4; color: var(--muted); }
.pal-h:first-child { padding-top: 4px; }
.pal-h span { display: inline-flex; align-items: center; gap: 8px; }
.pal-h i { display: inline-grid; color: var(--tally); }
.pal-h small { font-size: var(--t-small); font-weight: 400; }
.palette-list button { gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: var(--r-ctl); font-size: var(--t-body); color: var(--ink); }
.palette-list button > svg { flex: none; color: var(--muted); }
.palette-list button > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the figure that says why a place is worth a look */
.palette-list button > small { flex: none; margin: 0; font-size: var(--t-small); color: var(--muted); }
.palette-list mark { background: none; color: inherit; font-weight: 600; }
.palette-list button[aria-selected="true"] { background: rgba(22, 23, 26, 0.06); }
.palette-list button[aria-selected="true"] > svg { color: var(--ink); }
.pal-note { padding: 8px 12px; font-size: var(--t-small); line-height: 1.4; color: var(--muted); }
.pal-foot { flex: none; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px 24px; border-top: 1px solid var(--hair); font-size: var(--t-small); color: var(--muted); }
.pal-foot span { display: inline-flex; align-items: center; gap: 4px; }
@media (min-width: 700px) {
  /* the row in hand says which key opens it */
  .palette-list button[aria-selected="true"]::after { content: "Enter"; flex: none; display: inline-grid; place-items: center; height: 20px; padding: 0 4px; border-radius: 4px; font: 500 var(--t-small) / 1 var(--sans); color: var(--muted); background: var(--surface); }
}
@media (max-width: 699px) {
  dialog.palette { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; box-shadow: none; }
  .pal-top { padding: env(safe-area-inset-top, 0px) 8px 0 16px; }
  /* (16px in the box, so an iPhone does not zoom the page when it is tapped) */
  .palette .pal-top input { font-size: 16px; }
  .pal-esc { height: 44px; padding: 0 8px; background: none; font-size: var(--t-body); color: var(--ink); }
  .pal-esc .k { display: none; }
  .pal-esc .m { display: inline; }
  .pal-scopes { gap: 0; padding: 8px 8px 0; }
  .pal-scopes button { padding: 0 10px; }
  .pal-scopes button::after { content: ""; position: absolute; inset: -6px 0; }
  .palette-list { max-height: none; padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .palette-list button { min-height: 44px; }
  .pal-foot { display: none; }
}

/* ---------- on a wide screen: both are leaves of the rail ---------- */
@media (min-width: 1000px) {
  dialog.sheet:has(> .newpop), dialog.palette { inset: 0 auto 0 248px; width: 480px; max-width: calc(100vw - 272px); height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0 var(--r-lg) var(--r-lg) 0; background: var(--indigo-leaf); color: var(--on-indigo); box-shadow: 24px 0 64px rgba(22, 23, 26, 0.24); }
  dialog.sheet:has(> .newpop)::backdrop, dialog.palette::backdrop { background: linear-gradient(90deg, transparent 248px, rgba(22, 23, 26, 0.24) 248px); }
  .newpop :focus-visible, .palette :focus-visible { outline-color: #fff; }
  .newpop kbd, .palette kbd, .palette .pal-esc { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.76); }

  /* New fills the leaf as the rail fills its own column: what can be made at the head, what comes next at the foot */
  .newpop { display: flex; flex-direction: column; min-height: 100dvh; }
  .newpop .np-foot { display: block; margin-top: auto; }
  .newpop .np-more { padding-top: 4px; border-top: 1px solid var(--on-indigo-line); }
  .newpop .np-more .np-cols { padding-bottom: 4px; }
  .newpop .np-more > .np-cols:first-child:not(:last-child) { grid-template-columns: minmax(0, 1fr); }
  .newpop .np-more .np-cols:last-child { padding-bottom: 16px; }
  .newpop .np-row > small, .newpop .pal-foot { color: var(--on-indigo-dim); }
  .newpop .pal-foot { border-top-color: var(--on-indigo-line); }
  .newpop .pop-head { padding-top: 24px; }
  .newpop .pop-head .close { color: var(--on-indigo-dim); }
  .newpop .pop-head .close:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
  .newpop .np-cols { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); padding: 8px 12px 16px; }
  .newpop .np-h, .palette .pal-h { color: rgba(255, 255, 255, 0.6); }
  .newpop .np-mark, .palette .pal-h i { color: var(--tally-on-dark); }
  .newpop .np-row { color: var(--on-indigo); }
  .newpop .np-row:hover { background: rgba(255, 255, 255, 0.08); }
  .newpop .np-row:active { background: rgba(255, 255, 255, 0.12); }
  .newpop .np-row > svg { color: rgba(255, 255, 255, 0.6); transition: color 150ms; }
  .newpop .np-row:hover > svg { color: #fff; }
  /* the button that opened it shows the way back: its plus is a cross while New is open */
  body:has(#sheet[open] > .newpop) .side-new svg { transform: rotate(45deg); }

  /* the box to type in, as a field of the leaf */
  .palette .pal-top { margin: 24px 16px 0; padding: 0 8px 0 12px; border: 0; border-radius: var(--r-ctl); background: rgba(255, 255, 255, 0.08); }
  .palette .pal-top > svg { color: rgba(255, 255, 255, 0.6); }
  .palette .pal-top input { height: 44px; caret-color: var(--accent); }
  .palette .pal-top input::placeholder { color: rgba(255, 255, 255, 0.62); }
  .palette .pal-esc:hover { color: #fff; }
  .palette .pal-scopes { padding: 12px 16px 0; }
  .palette .pal-scopes button { color: var(--on-indigo-dim); }
  .palette .pal-scopes button:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
  .palette .pal-scopes button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.14); color: #fff; }
  .palette .palette-list { max-height: none; padding: 12px; }
  .palette .palette-list button { color: var(--on-indigo); }
  .palette .palette-list button > svg { color: rgba(255, 255, 255, 0.6); }
  .palette .palette-list button > small, .palette .pal-note, .palette .pal-foot { color: var(--on-indigo-dim); }
  .palette .palette-list button[aria-selected="true"] { background: rgba(255, 255, 255, 0.1); }
  .palette .palette-list button[aria-selected="true"] > svg { color: #fff; }
  .palette .palette-list button[aria-selected="true"]::after { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.76); }
  .palette .pal-foot { border-top-color: var(--on-indigo-line); }
  /* the box in the rail that opened it is lit while Search is open */
  body:has(#palette[open]) .rail-search { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
}
/* in a short window the head of the leaf keeps the room */
@media (min-width: 1000px) and (max-height: 759px) { .newpop .np-more { display: none; } }
/* (the drafts join the two lists at the foot only where the window is tall enough to hold all three without a scroll) */
@media (min-width: 1000px) and (max-height: 899px) { .newpop .np-more > .np-cols:first-child:not(:last-child) { display: none; } }
@media (min-width: 1700px) {
  dialog.sheet:has(> .newpop), dialog.palette { left: 264px; max-width: calc(100vw - 288px); }
  dialog.sheet:has(> .newpop)::backdrop, dialog.palette::backdrop { background: linear-gradient(90deg, transparent 264px, rgba(22, 23, 26, 0.24) 264px); }
}
@keyframes leaf-out { from { opacity: 0; transform: translateX(-32px); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: none; clip-path: inset(0 -96px 0 0); } }
@keyframes leaf-dim { from { opacity: 0; } }
@keyframes leaf-row { from { opacity: 0; transform: translateX(-12px); } }
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  dialog.sheet[open]:has(> .newpop), dialog.palette[open] { animation: leaf-out 320ms var(--spring); }
  dialog.sheet[open]:has(> .newpop)::backdrop, dialog.palette[open]::backdrop { animation: leaf-dim 200ms ease-out; }
  dialog.sheet[open] > .newpop .pop-head, dialog.sheet[open] > .newpop > .np-cols > .np-col, dialog.palette[open] > * { animation: leaf-row 360ms var(--spring) both; animation-delay: 40ms; }
  dialog.sheet[open] > .newpop > .np-cols > .np-col + .np-col, dialog.palette[open] > .palette-list { animation-delay: 80ms; }
  dialog.palette[open] > .pal-foot, dialog.sheet[open] > .newpop .np-foot { animation: leaf-row 360ms var(--spring) both; animation-delay: 120ms; }
  /* leaving, a leaf slides back behind the rail and the page lights up with it (where the browser can keep a closed dialog on screen while it does) */
  dialog.sheet:has(> .newpop), dialog.palette { transition: transform 180ms ease-in, opacity 180ms ease-in, display 180ms allow-discrete, overlay 180ms allow-discrete; }
  dialog.sheet:not([open]):has(> .newpop), dialog.palette:not([open]) { transform: translateX(-32px); opacity: 0; }
  dialog.sheet:has(> .newpop)::backdrop, dialog.palette::backdrop { transition: opacity 180ms ease-in, display 180ms allow-discrete, overlay 180ms allow-discrete; }
  dialog.sheet:not([open]):has(> .newpop)::backdrop, dialog.palette:not([open])::backdrop { opacity: 0; }
  .side-new svg { transition: transform 280ms var(--spring); }
}