/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* A damped spring with a little overshoot, from shared/spring.js
   (springEasing({ bounce: 0.2, duration: 500, points: 30 })). */
:root {
  --spring: linear(0, 0.066, 0.229, 0.44, 0.658, 0.854, 1.01, 1.118, 1.179, 1.2, 1.189, 1.158, 1.117, 1.073, 1.033, 1.001, 0.978, 0.965, 0.96, 0.962, 0.968, 0.976, 0.984, 0.993, 0.999, 1.004, 1.007, 1.008, 1.008, 1.007, 1);
}


/* Slim Trix editor — reduced toolbar, compact styling */
.trix-slim trix-toolbar .trix-button-group--history-tools,
.trix-slim trix-toolbar .trix-button--icon-strike,
.trix-slim trix-toolbar .trix-button--icon-heading-1,
.trix-slim trix-toolbar .trix-button--icon-quote,
.trix-slim trix-toolbar .trix-button--icon-code,
.trix-slim trix-toolbar .trix-button--icon-decrease-nesting-level,
.trix-slim trix-toolbar .trix-button--icon-increase-nesting-level,
.trix-slim trix-toolbar .trix-button--icon-attach,
.trix-slim trix-toolbar .trix-button-group--file-tools {
  display: none;
}

/* Ensure list buttons are visible in slim toolbar */
.trix-slim trix-toolbar .trix-button--icon-bullet-list,
.trix-slim trix-toolbar .trix-button--icon-number-list {
  display: inline-flex;
}

.trix-slim trix-toolbar .trix-button-group {
  border: none;
  margin-bottom: 4px;
}

.trix-slim trix-toolbar .trix-button {
  border: none;
  border-radius: 6px;
  padding: 0 0.4em;
  color: rgba(0, 0, 0, 0.5);
}

.trix-slim trix-toolbar .trix-button:not(:first-child) {
  border-left: none;
}

.trix-slim trix-toolbar .trix-button.trix-active {
  background: #e0e7ff;
  color: #4338ca;
}

.trix-slim trix-toolbar .trix-button:hover:not(:disabled) {
  background: #f3f4f6;
}

.trix-slim trix-toolbar .trix-button--icon {
  width: 2.2em;
  height: 2em;
}

@media (max-width: 768px) {
  .trix-slim trix-toolbar .trix-button--icon {
    width: 2.8em;
    height: 2.4em;
  }
}

.trix-slim trix-editor {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  min-height: 5em;
  font-size: 0.875rem;
  line-height: 1.5;
  background: rgba(255, 255, 255, 0.5);
  outline: none;
  transition: border-color 0.15s;
}

.trix-slim trix-editor:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.1);
}

/* Compact variant for comments */
.trix-compact trix-editor {
  min-height: 3em;
  padding: 0.5rem 0.75rem;
}


.trix-slim trix-editor {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* List formatting inside Trix editor */
.trix-slim trix-editor ul {
  list-style: disc;
  margin-left: 1.5em;
}

.trix-slim trix-editor ol {
  list-style: decimal;
  margin-left: 1.5em;
}

/* Dark mode Trix overrides */
:root.dark .trix-slim trix-editor:empty::before {
  color: #a5b4fc; /* indigo-300 — match placeholder style */
}

:root.dark .trix-slim trix-editor {
  background: var(--bg-input);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

:root.dark .trix-slim trix-editor:focus {
  border-color: var(--accent-indigo);
}

:root.dark .trix-slim trix-toolbar .trix-button {
  color: #c7d2fe; /* indigo-200 */
}

:root.dark .trix-slim trix-toolbar .trix-button--icon::before {
  filter: invert(1);
  opacity: 0.7;
}

:root.dark .trix-slim trix-toolbar .trix-button:hover:not(:disabled) {
  background: rgba(129, 140, 248, 0.15); /* indigo-400/15 */
}

:root.dark .trix-slim trix-toolbar .trix-button:hover:not(:disabled)::before {
  opacity: 1;
}

:root.dark .trix-slim trix-toolbar .trix-button.trix-active {
  background: rgba(99, 102, 241, 0.3);
  color: #a5b4fc; /* indigo-300 */
}

:root.dark .trix-slim trix-toolbar .trix-button.trix-active::before {
  filter: invert(1);
  opacity: 1;
}

/* Post body rendering */
.post-body {
  word-break: break-word;
  overflow-wrap: break-word;
}

.post-body div {
  margin-bottom: 0.25em;
}

.post-body div:last-child {
  margin-bottom: 0;
}

.post-body strong {
  font-weight: 600;
}

.post-body a:not([class]) {
  color: #4f46e5;
  text-decoration: underline;
}

.post-body a:not([class]):hover {
  color: #3730a3;
}

.post-body ul, .post-body ol {
  margin-left: 1.5em;
  margin-bottom: 0.5em;
}

.post-body ul {
  list-style: disc;
}

.post-body ol {
  list-style: decimal;
}

/* Hide action buttons until hover — only on devices with a mouse/trackpad.
   Touch-only devices (iPad, phones) always see the buttons. */
@media (hover: hover) {
  .hover-show {
    opacity: 0;
  }
  .group:hover .hover-show {
    opacity: 1;
  }
}

/* Emoji picker panel */
.emoji-picker-panel {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  width: 320px;
  max-height: 360px;
  overflow-y: auto;
  padding: 0.5rem;
}

.emoji-picker-recent {
  margin-bottom: 0.25rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #f3f4f6;
}

.emoji-picker-category-label {
  font-size: 0.675rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.25rem 0.125rem;
}

.emoji-picker-tabs {
  display: flex;
  gap: 2px;
  padding: 0.25rem 0;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 0.375rem;
}

.emoji-picker-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border-radius: 0.375rem;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: background-color 0.15s;
}

.emoji-picker-tab:hover {
  background: #f3f4f6;
}

.emoji-picker-tab-active {
  background: #e0e7ff;
}

.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}

.emoji-picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  font-size: 1.25rem;
  border-radius: 0.375rem;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  transition: background-color 0.15s;
}

.emoji-picker-item:hover {
  background: #f3f4f6;
}

@media (max-width: 768px) {
  .emoji-picker-panel {
    width: calc(100vw - 2rem);
    max-width: 320px;
    right: 0;
  }

  .emoji-picker-item {
    font-size: 1.375rem;
  }
}

/* Measure edit and delete controls.
   Touch devices cannot hover, so a hover-only reveal would hide the only way
   into the measure editor. Show them there, and keep the chart clean on
   pointer devices by revealing on hover. */
.bt-measure-actions {
  opacity: 0.55;
}

@media (hover: hover) and (pointer: fine) {
  .bt-measure-actions {
    opacity: 0;
  }

  .bt-measure:hover .bt-measure-actions,
  .bt-measure-actions:focus-within {
    opacity: 1;
  }
}

/* The BPM field has its own minus and plus buttons, so the native number
   spinner is a second, smaller set of the same control. */
.bt-no-spinner::-webkit-outer-spin-button,
.bt-no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.bt-no-spinner {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* A note field that reads like plain writing: no toolbar or frame. The
   keyboard shortcuts for bold, italic and lists still work. */
.trix-bare trix-toolbar {
  display: none;
}

.trix-bare trix-editor {
  border: 0;
  padding: 0;
  min-height: 4.5rem;
  background: transparent;
}

.trix-bare trix-editor:focus {
  outline: none;
}

/* Number fields where the spinner arrows only crowd a short value. */
.no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.no-spin {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* The practice log journal's own toolbar: a few quiet buttons beside the
   send controls instead of Trix's full bar above the text. */
/* The post composer reads as one line until it opens. */
.trix-compact trix-editor {
  min-height: 1.5rem;
}

.composer-expanded .trix-compact trix-editor {
  min-height: 4.5rem;
}

trix-toolbar.journal-toolbar {
  display: block;
}

.journal-tool {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: #9ca3af;
  transition: background-color 0.15s, color 0.15s;
}

.journal-tool:hover {
  background-color: rgba(107, 114, 128, 0.1);
  color: #4b5563;
}

.journal-tool.trix-active {
  background-color: rgba(99, 102, 241, 0.12);
  color: #4f46e5;
}

.trix-bare trix-editor:empty:not(:focus)::before {
  color: #9ca3af;
}

/* Opens and closes with a short fade and slide. Browsers that can animate
   to height: auto also grow it, so what's below glides rather than jumps. */
.reveal {
  interpolate-size: allow-keywords;
  overflow: hidden;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    height 0.26s ease,
    display 0.26s allow-discrete;
}

.reveal.hidden {
  opacity: 0;
  transform: translateY(-6px);
  height: 0;
}

@starting-style {
  .reveal:not(.hidden) {
    opacity: 0;
    transform: translateY(-6px);
    height: 0;
  }
}

/* The dock: a page's main controls floating at the foot of the screen. It
   slides up as it appears, whether on page load or turned on. */
.dock {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 40;
  max-width: calc(100vw - 1.5rem);
  transform: translate(-50%, 0);
  transition:
    transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.15),
    opacity 0.2s ease,
    display 0.32s allow-discrete;
}

.dock[hidden] {
  display: none;
  transform: translate(-50%, calc(100% + 2rem));
  opacity: 0;
}

@starting-style {
  .dock:not([hidden]) {
    transform: translate(-50%, calc(100% + 2rem));
    opacity: 0;
  }
}

.dock.is-tucked {
  transform: translate(-50%, calc(100% + 2rem));
  opacity: 0;
  pointer-events: none;
}

/* Room at the foot of the page so the last of it can scroll clear of the dock. */
body:has(.dock:not([hidden])) {
  padding-bottom: 10rem;
}

/* Nothing in the dock shrinks: on a phone it scrolls sideways instead,
   so round buttons stay round. */
.dock-controls > * {
  flex-shrink: 0;
}

/* Icons sit dead centre in their buttons, whatever margins the mirrored
   source gave them. */
.dock-bar .action-bar-icon {
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
}

.dock-bar .action-bar-icon > svg {
  margin: 0;
}

/* Liquid glass: see-through, blurred and saturated, with a bright rim on top
   and a deeper shadow than the in-page action bars, since it floats over content. */
.dock-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 100%;
  gap: 0.5rem;
  padding: 0.5rem;
  background: color-mix(in srgb, var(--bg-card) 55%, transparent);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 12px 32px var(--shadow-color),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2);
}

:root.dark .dock-bar {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 12px 32px var(--shadow-color),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.dock-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

/* Groups only shape the layout on phones; elsewhere their buttons sit in
   the row as if ungrouped. */
.dock-group {
  display: contents;
}

.dock-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

/* The handle the dock is dragged by. */
.dock-grip {
  flex: none;
  width: 1.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: var(--text-secondary);
  opacity: 0.75;
  cursor: grab;
  touch-action: none;
}

.dock-grip:hover,
.dock-grip:focus-visible {
  opacity: 1;
  background: rgba(99, 102, 241, 0.1);
}

/* The dock's top right corner resizes it. On hover a thin arc traces the
   rounded corner to show it can be grabbed there. */
.dock-corner {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  width: 1.75rem;
  height: 1.75rem;
  border-top: 3px solid var(--accent-indigo);
  border-right: 3px solid var(--accent-indigo);
  border-top-right-radius: 1.75rem;
  cursor: nesw-resize;
  touch-action: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.dock:hover .dock-corner {
  opacity: 0.35;
}

.dock-corner:hover,
.dock-corner:focus-visible,
.dock.is-resizing .dock-corner {
  opacity: 0.8;
}

.dock-bar .dock-scrub-marker {
  width: 2rem;
  height: 2rem;
}

.dock.is-dragging .dock-grip {
  cursor: grabbing;
}

/* With a row above the controls the pill becomes a rounded panel. */
.dock-bar:has(.dock-top) {
  border-radius: 1.5rem;
}

.dock-top,
.dock-scrub {
  width: 100%;
}

.dock-scrub {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.125rem 0.625rem 0;
}

.dock-scrub-range {
  flex: 1 1 0;
  width: 100%;
  min-width: 14rem;
  cursor: pointer;
}

.dock-scrub-range:disabled {
  cursor: default;
  opacity: 0.5;
}

.dock-scrub-time {
  flex: none;
  min-width: 2.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.dock-scrub-time:last-child {
  text-align: right;
}

/* Basic mode keeps to playback; advanced adds the rest. A dock with nothing
   extra has no mode button. */
.dock:not(.is-advanced) .dock-extra,
.dock:not(.is-advanced) .dock-top,
.dock:not(:has(.dock-extra, .dock-top)) .dock-mode {
  display: none;
}

/* Content keeps its own size while the bar springs around it. */
.dock-bar.is-morphing {
  overflow: hidden;
}

/* Touch screens keep a tapped button in its hover state until something else
   is tapped, so dock buttons would stay lit after use. */
@media (hover: none) {
  .dock-bar .action-bar-icon:hover {
    background: none;
    color: inherit;
  }
}

/* Phones redraw the glass blur on every frame the dock moves, so a lighter
   blur keeps its animations smooth there. */
@media (pointer: coarse) {
  .dock-bar {
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
  }
}

/* Quick taps on its buttons, like speed up twice, mustn't double-tap zoom the
   page, and a long press shouldn't select its labels. */
.dock {
  will-change: transform;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.dock-mode > svg {
  transition: rotate 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dock-bar .dock-mode[aria-expanded="true"]:not(:hover) {
  background: none;
  color: inherit;
}

.dock.is-advanced .dock-mode > svg {
  rotate: 180deg;
}

.dock-select {
  flex: none;
  max-width: 11rem;
  height: 2.5rem;
  padding: 0 1.75rem 0 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  font-size: 0.8125rem;
  font-weight: 500;
  color: #1f2937;
  text-overflow: ellipsis;
  cursor: pointer;
}

.dock-select[type="number"] {
  width: 4rem;
  padding: 0 0.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.dock-select[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* A readout in the dock, like the tempo, rather than something to press. */
.dock-readout {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  padding: 0 0.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.dock-select:hover {
  background-color: rgba(255, 255, 255, 0.7);
}

.dock-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.4);
}

:root.dark .dock-select {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  color: #f3f4f6;
}

/* The dock's choices on desktop, opening above the bar in the same glass. */
.dock-menu {
  position: fixed;
  inset: auto;
  margin: 0;
  max-height: min(60vh, 26rem);
  overflow-y: auto;
  padding: 0.375rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: color-mix(in srgb, var(--bg-card) 72%, transparent);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    0 16px 40px var(--shadow-color),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: var(--text-primary);
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transform-origin: bottom left;
  transition:
    opacity 0.16s ease,
    transform 0.18s ease,
    overlay 0.18s allow-discrete,
    display 0.18s allow-discrete;
}

.dock-menu:popover-open {
  opacity: 1;
  transform: none;
}

@starting-style {
  .dock-menu:popover-open {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
}

.dock-menu-heading {
  padding: 0.5rem 0.75rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9ca3af;
}

.dock-menu-item {
  display: block;
  width: 100%;
  padding: 0.4rem 0.75rem;
  border-radius: 0.625rem;
  text-align: left;
  font-size: 0.875rem;
  white-space: nowrap;
}

.dock-menu-item:hover {
  background-color: rgba(99, 102, 241, 0.1);
}

.dock-menu-item[aria-selected="true"] {
  background-color: rgba(99, 102, 241, 0.14);
  color: #4f46e5;
  font-weight: 600;
}

:root.dark .dock-menu {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 16px 40px var(--shadow-color),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* On phones the dock spans the screen and scrolls sideways if it must. Text
   at 16px stops iOS zooming in when a select is tapped. */
@media (max-width: 640px) {
  /* Basic mode fits a phone's width: the dock already spans it, so moving
     and resizing step aside, and so does what's only room for in advanced. */
  .dock-grip,
  .dock-corner,
  .dock-bar .dock-reset,
  .dock:not(.is-advanced) .dock-extra-phone {
    display: none;
  }

  .dock-row {
    gap: 0.25rem;
  }

  /* Basic mode: the controls on the left, the mode and close buttons on
     the right. */
  .dock-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
  }

  /* Advanced mode is laid out like a player: the scrub bar on top, then
     transport centered between the mode button on the left and the close
     button on the right, then a row of tools, the speed stepper on the left
     and loops and markers on the right. The controls' own box steps aside so
     its buttons can be arranged in the dock's rows. */
  .dock.is-advanced .dock-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.5rem;
    column-gap: 0.25rem;
  }

  .dock.is-advanced .dock-controls {
    display: contents;
  }

  /* Wrapped onto two rows, the pill would clip its end buttons, so it
     becomes a rounded panel like a dock with a scrub bar. */
  .dock.is-advanced .dock-bar {
    border-radius: 1.5rem;
  }

  .dock.is-advanced .dock-mode {
    order: -1;
    margin-right: auto;
  }

  .dock.is-advanced .dock-controls > * {
    order: 1;
  }

  /* Back, then play in the middle, then start over. */
  .dock.is-advanced .dock-controls > .dock-back {
    order: 0;
  }

  .dock.is-advanced .dock-hide {
    order: 2;
    margin-left: auto;
  }

  .dock.is-advanced .dock-row::after {
    content: "";
    order: 3;
    flex-basis: 100%;
  }

  .dock.is-advanced .dock-controls > .dock-group {
    display: flex;
    align-items: center;
    order: 4;
  }

  .dock.is-advanced .dock-nav {
    margin-left: auto;
    gap: 0.25rem;
  }

  .dock.is-advanced .dock-speed {
    border-radius: 9999px;
    background: rgba(120, 120, 140, 0.1);
  }

  .dock.is-advanced .dock-speed .action-bar-icon {
    width: 2.5rem;
  }

  .dock.is-advanced .dock-speed .dock-readout {
    align-items: center;
    min-width: 3.25rem;
    justify-content: center;
    padding: 0;
    line-height: 1;
  }

  .dock.is-advanced .dock-nav .action-bar-icon {
    padding-inline: 0.75rem;
  }

  .dock-label {
    max-width: 5rem;
  }

  /* The narrowest phones keep the tools to their icons. */
  @media (max-width: 380px) {
    .dock-label {
      display: none;
    }
  }

  .dock-scrub-range {
    min-width: 0;
  }

  .dock {
    left: 0.75rem;
    right: 0.75rem;
    max-width: none;
    transform: none;
  }

  .dock[hidden],
  .dock.is-tucked {
    transform: translateY(calc(100% + 2rem));
  }

  @starting-style {
    .dock:not([hidden]) {
      transform: translateY(calc(100% + 2rem));
    }
  }

  .dock-bar {
    width: 100%;
  }

  .dock-select {
    max-width: 9rem;
    font-size: 1rem;
  }

  /* Bigger targets for thumbs: every control in the dock is 44px tall. */
  .dock-bar {
    gap: 0.25rem;
    padding: 0.3rem;
  }

  .dock-bar .action-bar-icon {
    width: 2.75rem;
    height: 2.75rem;
  }

  .dock-grip {
    height: 2.75rem;
  }

  /* A dock select shows its compact face, with the real select laid
     invisibly over it so a tap still opens the phone's picker. */
  .dock-field {
    position: relative;
    display: inline-flex;
  }

  .dock-face {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    height: 2.75rem;
    min-width: 2.75rem;
    padding: 0 0.6rem 0 0.85rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-primary);
  }

  .dock-face-chevron {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0.45;
  }

  .dock-field .dock-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    opacity: 0;
  }
}

/* Faces are only for phones; wider screens show the select itself. */
@media (min-width: 641px) {
  .dock-face {
    display: none;
  }
}

/* Once the dock controller knows the visible part of the screen it places the
   dock itself: at the foot of what's showing, or where it was dragged, and
   scaled back to its usual size under a pinch zoom. */
.dock.is-placed {
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  max-width: var(--dock-max-width);
  translate: var(--dock-left) var(--dock-top);
  scale: var(--dock-scale);
  zoom: var(--dock-grow, 1);
  transform-origin: 0 0;
  transform: none;
}

.dock.is-placed[hidden],
.dock.is-placed.is-tucked {
  transform: translateY(calc(100% + 2rem));
}

/* Until it's ready its controls are still empty and it may sit in the wrong
   spot, so it stays invisible, then springs straight up from where it
   belongs. The animation also plays each time it's turned back on. Unplaced
   it isn't shifted sideways either, or placing it would slide it across. */
.dock:not(.is-placed) {
  transform: none;
}

.dock:not(.is-ready) {
  visibility: hidden;
}

.dock.is-ready:not([hidden]) {
  animation: dock-in 0.6s var(--spring);
}

.dock.is-gliding:not(.is-dragging, .is-resizing) {
  transition:
    translate 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.15),
    opacity 0.2s ease,
    display 0.32s allow-discrete;
}

/* No fade: while it's partly transparent browsers drop its glass blur, so
   whatever is behind would show through crisply as it rises. */
@keyframes dock-in {
  from {
    transform: translateY(calc(100% + 2rem));
  }
}

@media (prefers-reduced-motion: reduce) {
  .dock.is-ready:not([hidden]) {
    animation: none;
  }
}

/* On phones basic mode fits its few controls, as on desktop, and advanced
   mode spans the screen for the room its rows need. */
@media (max-width: 640px) {
  .dock.is-placed.is-advanced {
    width: var(--dock-max-width);
  }
}

/* iOS Safari skips :active styles, so its own tap flash shows a row was tapped. */
.account-menu a,
.account-menu button {
  -webkit-tap-highlight-color: rgba(99, 102, 241, 0.15);
}

/* The gradual speed trainer springs open from the foot of the speed card,
   where browsers can animate a details element's content. */
.speed-trainer {
  interpolate-size: allow-keywords;
}

/* Overrides the app-wide turn for icons in an open summary: only the
   chevron turns, to point up while open. */
.speed-trainer > summary svg {
  transform: none;
}

.speed-trainer-chevron {
  transition: rotate 0.45s var(--spring);
}

.speed-trainer[open] .speed-trainer-chevron {
  rotate: 180deg;
}

.speed-trainer[open] > .speed-trainer-toggle {
  color: var(--accent-indigo);
  background: rgba(99, 102, 241, 0.1);
}

.speed-trainer::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    block-size 0.5s var(--spring),
    opacity 0.25s ease,
    content-visibility 0.5s allow-discrete;
}

.speed-trainer[open]::details-content {
  block-size: auto;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .speed-trainer::details-content {
    transition: none;
  }
}

/* A video card comes forward while hovered or focused; one with a menu open
   stays in front once the pointer moves away, so the menu isn't covered by
   the next card when the page scrolls under it. */
.layout-card:has([data-dropdown-target="menu"]:not(.hidden)) {
  z-index: 30;
}

/* The account menu's popover, under the corner button. It springs out of the
   button with a slight overshoot and slips away quickly. */
.account-menu {
  position: fixed;
  inset: auto;
  top: 3.75rem;
  right: 0.75rem;
  margin: 0;
  padding: 0;
  transform-origin: top right;
  transition:
    opacity 0.18s ease,
    scale 0.5s var(--spring),
    translate 0.5s var(--spring),
    overlay 0.5s allow-discrete,
    display 0.5s allow-discrete;
}

.account-menu:not(:popover-open) {
  opacity: 0;
  scale: 0.94;
  translate: 0 -4px;
  transition-duration: 0.14s;
  transition-timing-function: ease-in;
}

@starting-style {
  .account-menu:popover-open {
    opacity: 0;
    scale: 0.82;
    translate: 6px -10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-menu {
    transition: none;
  }
}

:root.dark .dock-face {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Flash messages and other toasts: under the account button in the top-right
   corner rather than beneath it, and above it so nothing covers them. */
.toast-stack {
  position: fixed;
  top: 4.25rem;
  right: 0.75rem;
  z-index: 60;
  width: calc(100% - 1.5rem);
  max-width: 20rem;
}