/* The organise layer: the command palette and the filter bar.
   One stylesheet for both, because both are the same idea wearing two shapes: a way to reach a thing fast
   without leaving the calendar. Every colour comes from tokens.css, so light and dark are already answered
   and nothing here is defined only inside a media query.

   The palette is deliberately not a code editor palette. It is a sheet of paper laid high on the linen
   ground: the app's own paper, its own hairlines, no glass, no blur, and no shadow, because the house rule
   allows two shadows in this app and neither of them is this. Its structure is a three column ledger line,
   what it is, what it does, and the key that does it without the palette. */

/* ========================================================================
   1. The sheet
   ======================================================================== */

dialog.pal {
  border: 1px solid var(--rule);
  padding: 0;
  margin: min(9vh, 84px) auto auto;
  width: min(680px, calc(100vw - 24px));
  max-height: min(72vh, 620px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-radius: var(--r-lg);
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  opacity: 1;
  transform: none;
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}
dialog.pal::backdrop { background: rgba(37, 34, 28, .3); background: var(--veil); }
@starting-style {
  dialog.pal[open] { opacity: 0; transform: translateY(-10px); }
}
dialog.pal.is-closing { opacity: 0; transform: translateY(-6px); }

/* ========================================================================
   2. The head: an eyebrow that names the room, then the one line you type in
   ======================================================================== */

/* Flex rather than a grid, because the back button and the resolved date both come and go and a hidden
   grid item hands its track to whatever is next, which walks the close button into the middle of the row. */
.pal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 12px 12px 20px;
  border-bottom: 1px solid var(--rule);
}
.pal-back {
  flex: none;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: transform 120ms var(--ease);
}
.pal-back .ic { width: 18px; height: 18px; }
.pal-back:active { transform: scale(.97); }
.pal-back[hidden] { display: none; }
.pal-head-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pal-mode {
  margin: 0;
  color: var(--accent-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The input is the largest interface type in the sheet and the only thing on its line, so it reads as the
   place to start without a magnifier drawn beside it. */
.pal-input {
  width: 100%;
  border: 0; padding: 0; margin: 0;
  background: transparent;
  font: 500 20px/1.3 var(--f-ui);
  letter-spacing: -.01em;
  color: var(--ink);
}
.pal-input:focus { outline: none; }
.pal-input::placeholder { color: var(--ghost); font-weight: 400; }
/* What the words in the box resolved to, in the display face, so a typed date confirms itself before
   Enter is pressed. */
.pal-hint {
  flex: none;
  font: 700 12.5px/1.2 var(--f-display);
  letter-spacing: -.01em;
  color: var(--accent-strong);
  white-space: nowrap;
  max-width: 30ch; overflow: hidden; text-overflow: ellipsis;
}
.pal-hint:empty { display: none; }
.pal-close {
  flex: none;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: transform 120ms var(--ease);
}
.pal-close .ic { width: 16px; height: 16px; }
.pal-close:active { transform: scale(.97); }

/* ========================================================================
   3. The list
   ======================================================================== */

.pal-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-2) transparent;
}
.pal-group {
  display: flex; align-items: baseline;
  padding: 16px 20px 4px;
}
.pal-group:first-child { padding-top: 8px; }
.pal-none {
  padding: 24px 20px;
  font: 400 14px/1.5 var(--f-ui);
  color: var(--muted);
}

/* The row is the ledger line: mark, meaning, key, and the door to more. */
.pal-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 8px 20px;
  cursor: pointer;
}
.pal-ic { display: flex; color: var(--muted); }
.pal-ic .ic { width: 18px; height: 18px; }
.pal-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* Three type roles inside one row: the display face for the name, the interface face for what it does, and
   the key cap in a third weight and size again. */
.pal-label {
  font: 700 15px/1.25 var(--f-display);
  letter-spacing: -.01em;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pal-desc {
  font: 400 12.5px/1.35 var(--f-ui);
  letter-spacing: 0;
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pal-desc:empty { display: none; }
.pal-mark { background: var(--accent-soft); color: var(--accent-strong); border-radius: var(--r-sm); padding: 0 2px; }

.pal-keys { display: flex; align-items: center; gap: 4px; }
.pal-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-sm);
  background: var(--linen-2);
  font: 700 11px/1 var(--f-ui);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
/* A row with no key of its own still holds the column, because the gap is the point: it says this one only
   exists in here. */
.pal-nokey {
  display: block; width: 5px; height: 5px; margin: 0 9px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
}
.pal-more {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
  color: var(--ghost);
}
.pal-more .ic { width: 14px; height: 14px; }
.pal-more.is-void { visibility: hidden; }

/* The selected row is the powder blue fill with dark ink on it, never light text on the pale slab. */
.pal-row.is-on { background: var(--accent); }
.pal-row.is-on .pal-label { color: var(--accent-ink); }
.pal-row.is-on .pal-desc { color: var(--accent-ink-2); }
.pal-row.is-on .pal-ic { color: var(--accent-ink); }
.pal-row.is-on .pal-more { color: var(--accent-ink-2); }
.pal-row.is-on .pal-kbd {
  background: color-mix(in srgb, var(--accent-ink) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent-ink) 28%, transparent);
  color: var(--accent-ink);
}
.pal-row.is-on .pal-nokey { border-color: color-mix(in srgb, var(--accent-ink) 35%, transparent); }
.pal-row.is-on .pal-mark {
  background: color-mix(in srgb, var(--accent-ink) 16%, transparent);
  color: var(--accent-ink);
}

/* ========================================================================
   4. The foot: the same lesson as the key column, for the palette itself
   ======================================================================== */

.pal-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 12px 20px;
  border-top: 1px solid var(--rule);
  background: var(--linen);
}
.pal-legend {
  display: inline-flex; align-items: center; gap: 5px;
  font: 400 11.5px/1.2 var(--f-ui);
  color: var(--muted);
}
.pal-legend .pal-kbd { height: 18px; min-width: 18px; padding: 0 5px; font-size: 10px; }

/* ========================================================================
   5. Where a date jump lands
   ======================================================================== */

/* A jump to the sixteenth has to land the eye on the sixteenth, not merely on September. The day keeps a
   ring for a moment and then gives it back. An outline, not a shadow, because the two shadows this app
   allows are the drag and the drawer. */
.cal-day.pal-landed {
  outline: 2px solid var(--accent-strong);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}

/* ========================================================================
   6. The filter bar
   ======================================================================== */

/* Two rows. The first says what is being looked at right now and can undo any part of it in one click.
   The second, which stays shut until it is asked for, is every facet at once, because a filter that hides
   its own options behind five menus costs more clicks than it saves. */
.fbar {
  display: flex; flex-direction: column;
  border-bottom: 1px solid var(--rule);
  background: var(--linen);
}
.fbar-line {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 12px;
  padding: 12px 16px;
}
.fbar-eyebrow { margin: 0; }
.fbar-toggle { gap: 6px; }
.fbar-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 11px/1 var(--f-ui);
}
.fbar-active { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.fbar-tally {
  margin-left: auto;
  font: 700 12.5px/1 var(--f-display);
  letter-spacing: -.01em;
  color: var(--muted);
  white-space: nowrap;
}

.fchip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  font: 500 12.5px/1 var(--f-ui);
  color: var(--ink-2);
  transition: transform 120ms var(--ease);
}
.fchip:active { transform: scale(.97); }
.fchip .ic { width: 12px; height: 12px; }
.fchip.is-on {
  background: var(--accent);
  border-color: var(--accent-deep);
  color: var(--accent-ink);
  font-weight: 700;
}
.fchip-drop { background: var(--accent); border-color: var(--accent-deep); color: var(--accent-ink); font-weight: 700; }
.fchip-drop .ic { color: var(--accent-ink-2); }

.fbar-panel {
  display: flex; flex-wrap: wrap;
  gap: 16px 28px;
  padding: 4px 16px 16px;
  border-top: 1px solid var(--rule);
}
.fgroup { display: flex; flex-direction: column; gap: 8px; }
.fgroup-name { margin: 0; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; }

.fsave { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.fsave-label { font: 500 13px/1.2 var(--f-ui); color: var(--ink-2); align-self: center; }
.fsave-input { height: 30px; width: 180px; font-size: 13px; }

.fsaved { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.fsaved-i {
  display: inline-flex; align-items: center;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  overflow: hidden;
}
/* A saved view is a name a person chose, so it takes the display face and the other chips do not. */
.fsaved-go {
  height: 26px; padding: 0 4px 0 10px;
  font: 700 12.5px/1 var(--f-display);
  letter-spacing: -.01em;
  color: var(--ink);
}
.fsaved-x { width: 22px; height: 26px; display: flex; align-items: center; justify-content: center; color: var(--ghost); }
.fsaved-x .ic { width: 11px; height: 11px; }
.fsaved-i.is-on { background: var(--accent); border-color: var(--accent-deep); }
.fsaved-i.is-on .fsaved-go { color: var(--accent-ink); }
.fsaved-i.is-on .fsaved-x { color: var(--accent-ink-2); }

/* ========================================================================
   7. States: hover, focus, and a pointer that is not a mouse
   ======================================================================== */

@media (hover: hover) and (pointer: fine) {
  .pal-close:hover, .pal-back:hover { background: var(--linen-2); color: var(--ink); }
  .pal-row:hover .pal-more { color: var(--muted); }
  .pal-row.is-on:hover .pal-more { color: var(--accent-ink); }
  .fchip:hover { border-color: var(--rule-2); background: var(--linen-2); }
  .fchip.is-on:hover, .fchip-drop:hover { background: var(--accent-deep); }
  .fsaved-i:hover { border-color: var(--rule-2); }
  .fsaved-x:hover { color: var(--bad); }
}

.pal-close:focus-visible,
.pal-back:focus-visible,
.fchip:focus-visible,
.fsaved-go:focus-visible,
.fsaved-x:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}
/* The list is driven from the input, which holds focus the whole time, so the selected row carries the
   focus ring on the input's behalf. */
.pal-input:focus-visible { outline: none; }

@media (max-width: 639.98px) {
  dialog.pal { margin-top: 6vh; max-height: min(84vh, 640px); width: calc(100vw - 16px); }
  .pal-head { padding-left: 16px; }
  .pal-hint { display: none; }
  .pal-input { font-size: 17px; }
  .pal-row { grid-template-columns: 20px minmax(0, 1fr) auto; padding-left: 16px; padding-right: 12px; }
  .pal-more { display: none; }
  .pal-foot { gap: 4px 12px; padding: 8px 16px; }
  .pal-legend:nth-child(3) { display: none; }
  .fbar-tally { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  dialog.pal { transform: none; transition: opacity 160ms var(--ease); }
  @starting-style { dialog.pal[open] { transform: none; } }
  dialog.pal.is-closing { transform: none; }
  .pal-close:active, .pal-back:active, .fchip:active { transform: none; }
}