/* Scribe — the "Your classes" picker (lib/class-picker.js).
 *
 * Loaded after styles.css and drawn only from its tokens, light or dark, so the field reads as one of the page's inputs, the tokens as
 * the chips they replaced and the list as a sibling of the account menu.
 * Every rule hangs off .class-picker, which is also where the specificity to
 * beat the page's own button and input rules comes from. Everything here is
 * created by class-picker.js. */

.class-picker { position: relative; width: 100%; min-width: 0; }

/* ---- The field ---------------------------------------------------------- */

/* A box the height of an input. The right padding keeps tokens off the chevron. */
.class-picker .class-picker-field { position: relative; display: flex; align-items: center; min-height: 40px; padding: 8px 32px 8px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); transition: border-color .15s; }
.class-picker .class-picker-field:hover, .class-picker.open .class-picker-field { border-color: var(--line-strong); }
/* The button covers the whole box, so a click anywhere in it opens the list,
   and its ring sits where an input's would: 4px outside the border. */
.class-picker .class-picker-toggle { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12px; text-align: left; }
.class-picker .class-picker-toggle:hover:not(:disabled) { background: transparent; }
.class-picker .class-picker-toggle:focus-visible { outline-offset: 5px; }
.class-picker .class-picker-toggle::after { content: "▾"; margin-left: auto; }
.class-picker.open .class-picker-toggle::after { transform: rotate(180deg); }
.class-picker .class-picker-placeholder { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The picked classes, on top of the button. Only their × buttons take the
   pointer; a click on the rest falls through and opens the list. */
.class-picker .class-picker-tokens { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.class-picker .class-picker-token { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 1px 2px 1px 8px; border: 1px solid var(--accent-line); border-radius: 5px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 550; line-height: 18px; }
.class-picker .class-picker-token > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.class-picker .class-picker-remove { display: grid; place-items: center; flex-shrink: 0; width: 18px; height: 18px; padding: 0 0 1px; border: 0; border-radius: 4px; background: transparent; color: var(--accent); font-size: 14px; line-height: 1; pointer-events: auto; }
.class-picker .class-picker-remove:hover:not(:disabled) { background: var(--accent-wash); }
.class-picker .class-picker-remove:focus-visible { outline-offset: 1px; }

/* ---- The list ----------------------------------------------------------- */

/* The account menu's panel, as wide as the field; class-picker.js adds
   .above when there is only room over it. It is what the person is working
   in while it's open, so it sits over the first-run tour's ring and card
   (30, tour.css), and still under the toast (50). */
.class-picker .class-picker-popover { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; display: grid; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 6px 24px var(--shadow); }
.class-picker.above .class-picker-popover { top: auto; bottom: calc(100% + 6px); }
.class-picker .class-picker-search { display: block; width: 100%; padding: 8px 10px; margin-bottom: 2px; }
/* Focus lives here the whole time the list is open; a ring on the border
   rather than 4px out keeps it inside the panel. */
.class-picker .class-picker-search:focus-visible { outline-offset: -1px; }

/* class-picker.js caps the height to fit the window, 300px at most. */
.class-picker .class-picker-list { max-height: 300px; margin: 0; padding: 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.class-picker .class-picker-option { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
/* The row under the keyboard (or the pointer) gets the page's own focus
   colour as a ring inside it: the faint fill alone is too close to the
   panel to see. */
.class-picker .class-picker-option.active { background: var(--hover); box-shadow: inset 0 0 0 2px var(--accent); }
.class-picker .class-picker-check { grid-row: span 2; display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--panel); color: var(--on-accent); font-size: 11px; line-height: 1; }
.class-picker .class-picker-option[aria-selected="true"] .class-picker-check { border-color: var(--accent-fill); background: var(--accent-fill); }
.class-picker .class-picker-option[aria-selected="true"] .class-picker-check::after { content: "✓"; }
.class-picker .class-picker-name { font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.class-picker .class-picker-level { font-size: 11px; line-height: 1.35; color: var(--muted); }
.class-picker .class-picker-empty { margin: 0; padding: 14px 8px; color: var(--muted); font-size: 12px; text-align: center; }
/* Empty, the live region is clipped out of sight but stays in the
   accessibility tree, so "No classes match" is read out when it arrives.
   Out of the grid's flow, too, so it adds no gap. */
.class-picker .class-picker-empty:empty { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }

.class-picker .class-picker-foot { display: flex; align-items: center; gap: 8px; margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--line); }
.class-picker .class-picker-foot button { font-size: 11px; padding: 6px 12px; }
.class-picker .class-picker-clear, .class-picker .class-picker-clear:hover:not(:disabled) { border-color: transparent; color: var(--muted); }
.class-picker .class-picker-clear { background: transparent; }
.class-picker .class-picker-done { margin-left: auto; }

/* setDisabled(true): a quieter field that still reads clearly. The tokens
   keep full-strength text on a grey chip, and the ×s dim with every other
   disabled button (styles.css). */
.class-picker.disabled .class-picker-field, .class-picker.disabled .class-picker-field:hover { border-color: var(--line); background: var(--bg); }
.class-picker.disabled .class-picker-token { border-color: var(--line); background: var(--neutral-soft); color: var(--text); }
.class-picker.disabled .class-picker-remove { color: var(--muted); }

/* Fingers get bigger targets than the pointer does, without the field growing. */
@media (pointer: coarse) {
  .class-picker .class-picker-remove { width: 24px; height: 24px; margin: -3px -3px -3px 0; }
  .class-picker .class-picker-option { padding: 8px; }
}

@media (prefers-reduced-motion: no-preference) {
  .class-picker .class-picker-toggle::after { transition: transform .12s; }
  .class-picker .class-picker-popover { animation: class-picker-drop .12s ease-out; }
  .class-picker.above .class-picker-popover { animation-name: class-picker-rise; }
}
@keyframes class-picker-drop { from { opacity: 0; transform: translateY(-4px); } }
@keyframes class-picker-rise { from { opacity: 0; transform: translateY(4px); } }