/*
 * THE RECORD RAIL. Sprint 66, spec 1.31 and 28.3.
 *
 * Tokens only: every colour, space, size and radius below is a custom property
 * from tokens.css, so dark mode and the token lint both hold without a second
 * palette. Unlayered and linked after gyro-chrome.css, so these rules outrank
 * Filament's layered utilities whatever their specificity - the same arrangement
 * gyro-theme.css documents for itself.
 *
 * ---------------------------------------------------------------------------
 * WHERE IT SITS, AND THE CLASS NAMES IT KEYS ON
 * ---------------------------------------------------------------------------
 * Read off the vendor blade on the host (filament v5.7.6,
 * components/page/index.blade.php): `.fi-page` holds `.fi-page-header-main-ctn`
 * (breadcrumbs, heading, actions, the form or infolist and the relation-manager
 * tabs), then the action modals, then the `panels::page.end` render hook - which
 * is where the rail's root element lands, as a DIRECT child of `.fi-page`.
 * Filament ships no layout rule for `.fi-page` itself, only for its parts, so a
 * grid here disturbs nothing Filament relies on.
 *
 * At 1280px and wider the page becomes two columns and the rail sticks beside
 * the record. Narrower, it is an ordinary block under the record - the whole
 * page is one column already and a rail squeezed beside a form helps nobody.
 */

.gyro-rr {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-block-end: var(--space-6);
  padding: var(--space-4);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-hairline);
  border-radius: var(--radius-control);
  color: var(--color-text-primary);
  font-size: var(--type-size-base);
  line-height: var(--type-line-base);
  min-width: 0;
}

.gyro-rr--inert {
  display: none;
}

.gyro-rr--inert:has(.gyro-rr__empty) {
  display: block;
}

@media (min-width: 1280px) {
  .fi-page:has(> .gyro-rr) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(19rem, 26vw, 27rem);
    column-gap: var(--space-5);
    align-items: start;
  }

  .fi-page:has(> .gyro-rr) > * {
    grid-column: 1;
  }

  .fi-page:has(> .gyro-rr) > .fi-page-header-main-ctn {
    grid-row: 1;
  }

  /* align-self start is what lets sticky work: a stretched grid item is as tall
     as its row and has nowhere to stick within. The top offset clears
     Filament's sticky topbar, which is 4rem tall. */
  .fi-page:has(> .gyro-rr) > .gyro-rr {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: calc(4rem + var(--space-3));
    margin-block: var(--space-6);
    max-height: calc(100vh - 4rem - var(--space-6));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.gyro-rr__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.gyro-rr__heading {
  margin: 0;
  font-size: var(--type-size-medium);
  line-height: var(--type-line-medium);
  font-weight: var(--type-weight-semibold);
}

.gyro-rr__meta,
.gyro-rr__muted,
.gyro-rr__hint {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-size-small);
  line-height: var(--type-line-small);
}

.gyro-rr__head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.gyro-rr__icon {
  width: var(--space-4);
  height: var(--space-4);
  flex-shrink: 0;
}

.gyro-rr__chip,
.gyro-rr__filter,
.gyro-rr__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--size-control-chip);
  padding-inline: var(--space-2);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  color: var(--color-text-primary);
  font-size: var(--type-size-small);
  font-weight: var(--type-weight-medium);
  cursor: pointer;
  white-space: nowrap;
}

.gyro-rr__chip:hover,
.gyro-rr__filter:hover,
.gyro-rr__more:hover {
  background: var(--color-bg-hover);
}

.gyro-rr__chip--on,
.gyro-rr__filter--on {
  background: var(--color-bg-selected);
  border-color: var(--color-accent-base);
}

.gyro-rr__link {
  padding: 0;
  background: none;
  border: 0;
  color: var(--color-text-link);
  font-size: var(--type-size-small);
  cursor: pointer;
}

.gyro-rr__link:hover {
  text-decoration: underline;
}

.gyro-rr__link--danger {
  color: var(--color-status-danger-text);
}

.gyro-rr button:focus-visible,
.gyro-rr a:focus-visible,
.gyro-rr textarea:focus-visible,
.gyro-rr input:focus-visible {
  outline: 2px solid var(--color-accent-ring);
  outline-offset: 2px;
}

.gyro-rr__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* People */

.gyro-rr__people {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.gyro-rr__avatars {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gyro-rr__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--size-control-avatar-compact);
  height: var(--size-control-avatar-compact);
  border-radius: 50%;
  background: var(--color-accent-subtle);
  color: var(--color-text-primary);
  font-size: var(--type-size-micro);
  font-weight: var(--type-weight-semibold);
  line-height: 1;
}

.gyro-rr__avatars .gyro-rr__avatar {
  border: 2px solid var(--color-bg-surface);
  margin-inline-end: calc(var(--space-2) * -1);
}

.gyro-rr__avatar--muted,
.gyro-rr__avatar--quiet {
  background: var(--color-bg-sunken);
  color: var(--color-text-secondary);
}

.gyro-rr__people-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  list-style: none;
  background: var(--color-bg-sunken);
  border-radius: var(--radius-control);
  font-size: var(--type-size-small);
}

/* The composer */

.gyro-rr__composer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.gyro-rr__modes {
  display: flex;
  gap: var(--space-4);
  border-bottom: 1px solid var(--color-border-hairline);
}

.gyro-rr__mode {
  padding: var(--space-1) 0 var(--space-2);
  margin-bottom: -1px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--color-text-secondary);
  font-size: var(--type-size-small);
  font-weight: var(--type-weight-medium);
  cursor: pointer;
}

/* The active mode is the one place the accent appears in the rail: it is the
   active tab of a navigation control, which is one of the accent's four jobs. */
.gyro-rr__mode--active {
  border-bottom-color: var(--color-accent-base);
  color: var(--color-text-primary);
}

.gyro-rr__form,
.gyro-rr__upload {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.gyro-rr__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.gyro-rr__row--end {
  align-items: flex-end;
  justify-content: flex-end;
}

.gyro-rr__field {
  display: flex;
  flex: 1 1 8rem;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.gyro-rr__field--grow {
  flex: 1 1 10rem;
}

.gyro-rr__label {
  color: var(--color-text-secondary);
  font-size: var(--type-size-small);
  font-weight: var(--type-weight-medium);
}

.gyro-rr__textarea {
  width: 100%;
  min-height: calc(var(--size-row-field) * 3);
  padding: var(--size-pad-input-y) var(--size-pad-input-x);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  color: var(--color-text-primary);
  font: inherit;
  resize: vertical;
}

.gyro-rr__textarea::placeholder {
  color: var(--color-text-muted);
}

.gyro-rr__file-input {
  font-size: var(--type-size-small);
  color: var(--color-text-secondary);
}

.gyro-rr__replying {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-size-small);
}

/* "Visible to the customer": a plain checkbox with its words beside it. */
.gyro-rr__check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--type-size-small);
  cursor: pointer;
}

.gyro-rr__checkbox {
  inline-size: var(--space-4);
  block-size: var(--space-4);
  margin: 0;
  accent-color: var(--color-accent-base);
}

/* Past the largest window: where the reader is, and the way back. */
.gyro-rr__window {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-size-small);
}

.gyro-rr__error {
  margin: 0;
  color: var(--color-status-danger-text);
  font-size: var(--type-size-small);
}

/* Sections: planned, files, history */

.gyro-rr__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block-start: var(--space-3);
  border-top: 1px solid var(--color-border-hairline);
}

.gyro-rr__subheading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--type-size-base);
  font-weight: var(--type-weight-semibold);
}

.gyro-rr__count {
  color: var(--color-text-secondary);
  font-weight: var(--type-weight-normal);
  font-variant-numeric: var(--type-numeric-variant);
}

.gyro-rr__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gyro-rr__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.gyro-rr__item-icon {
  margin-block-start: var(--space-1);
  color: var(--color-text-secondary);
}

.gyro-rr__item-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.gyro-rr__item-title {
  overflow-wrap: anywhere;
}

.gyro-rr__file-link {
  color: var(--color-text-link);
  text-decoration: none;
}

.gyro-rr__file-link:hover {
  text-decoration: underline;
}

.gyro-rr__late {
  color: var(--color-status-danger-text);
  font-weight: var(--type-weight-medium);
}

.gyro-rr__empty {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--type-size-small);
}

.gyro-rr__history-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.gyro-rr__filters {
  display: flex;
  gap: var(--space-1);
}

.gyro-rr__timeline,
.gyro-rr__replies {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gyro-rr__replies {
  margin-block-start: var(--space-2);
  padding-inline-start: var(--space-3);
  border-inline-start: 2px solid var(--color-border-hairline);
}

.gyro-rr__entry {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
}

.gyro-rr__entry > .gyro-rr__replies {
  flex-basis: 100%;
}

.gyro-rr__entry-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.gyro-rr__entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  margin: 0;
  font-size: var(--type-size-small);
}

.gyro-rr__who {
  font-weight: var(--type-weight-semibold);
}

.gyro-rr__time {
  color: var(--color-text-secondary);
}

.gyro-rr__badge {
  padding-inline: var(--space-1);
  border: 1px solid transparent;
  border-radius: var(--radius-chip);
  font-size: var(--type-size-micro);
  font-weight: var(--type-weight-medium);
}

/* Status colours as chips and text only, never a filled region (spec 28.5). */
.gyro-rr__badge--internal {
  background: var(--color-status-warning-bg);
  border-color: var(--color-status-warning-border);
  color: var(--color-status-warning-text);
}

.gyro-rr__badge--shared {
  background: var(--color-status-success-bg);
  border-color: var(--color-status-success-border);
  color: var(--color-status-success-text);
}

.gyro-rr__body {
  overflow-wrap: anywhere;
}

.gyro-rr__body p {
  margin: 0 0 var(--space-1);
}

.gyro-rr__body ul {
  margin: 0;
  padding-inline-start: var(--space-4);
}

.gyro-rr__entry-actions {
  display: flex;
  gap: var(--space-3);
}

.gyro-rr__changes {
  margin: 0;
  padding-inline-start: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--type-size-small);
  overflow-wrap: anywhere;
}

.gyro-rr__more {
  align-self: center;
}

@media (prefers-reduced-motion: no-preference) {
  .gyro-rr__chip,
  .gyro-rr__filter,
  .gyro-rr__more {
    transition: background-color var(--motion-duration-fast) var(--motion-easing-out);
  }
}