/* Kitchen sink chrome.
 *
 * This is the sink's own UI - sidebar, preview frames, markup panel. It is NOT
 * part of the design system and never gets published. Everything here is
 * prefixed `sink-` so a stray rule can never be mistaken for a `ds-` component.
 *
 * Note that this file is deliberately UNLAYERED. ds.css puts everything inside
 * @layer, so unlayered rules here win automatically - which is exactly the
 * property a consuming app relies on, demonstrated on the sink itself.
 */

.sink-shell {
  display: grid;
  grid-template-columns: 15rem 1fr;
  min-block-size: 100svh;
}

@media (max-width: 48rem) {
  .sink-shell {
    grid-template-columns: 1fr;
  }
}

/* -- sidebar --------------------------------------------------------------- */

.sink-nav {
  border-inline-end: 1px solid var(--sk-border);
  background: var(--sk-surface-sunken);
  padding: var(--sk-space-5) var(--sk-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--sk-space-5);
  position: sticky;
  inset-block-start: 0;
  block-size: 100svh;
  overflow-y: auto;
}

@media (max-width: 48rem) {
  .sink-nav {
    position: static;
    block-size: auto;
    border-inline-end: 0;
    border-block-end: 1px solid var(--sk-border);
  }
}

.sink-brand {
  font-size: var(--sk-text-lg);
  font-weight: var(--sk-weight-bold);
  letter-spacing: var(--sk-tracking-tight);
  color: var(--sk-ink);
  text-decoration: none;
}

.sink-version {
  display: block;
  font-size: var(--sk-text-xs);
  font-weight: var(--sk-weight-normal);
  color: var(--sk-ink-subtle);
  letter-spacing: var(--sk-tracking-normal);
}

.sink-nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--sk-space-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.sink-nav-link {
  display: block;
  padding: var(--sk-space-2) var(--sk-space-3);
  border-radius: var(--sk-radius-md);
  color: var(--sk-ink-muted);
  font-size: var(--sk-text-sm);
  font-weight: var(--sk-weight-semibold);
  text-decoration: none;
}

.sink-nav-link:hover {
  background: var(--sk-neutral-action-bg-hover);
  color: var(--sk-ink);
}

.sink-nav-link[aria-current="page"] {
  background: var(--sk-accent-soft);
  color: var(--sk-ink);
}

.sink-nav-foot {
  margin-block-start: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sk-space-3);
  font-size: var(--sk-text-xs);
  color: var(--sk-ink-subtle);
}

/* -- content ---------------------------------------------------------------- */

.sink-main {
  padding: var(--sk-space-7) var(--sk-space-6) var(--sk-space-8);
  max-inline-size: 60rem;
  min-inline-size: 0;
}

.sink-head {
  display: flex;
  flex-direction: column;
  gap: var(--sk-space-2);
  margin-block-end: var(--sk-space-7);
}

.sink-blurb {
  color: var(--sk-ink-muted);
  max-inline-size: 46rem;
}

.sink-story {
  display: flex;
  flex-direction: column;
  gap: var(--sk-space-3);
  margin-block-end: var(--sk-space-7);
}

.sink-story-title {
  font-size: var(--sk-text-lg);
  font-weight: var(--sk-weight-bold);
}

.sink-story-note {
  color: var(--sk-ink-muted);
  font-size: var(--sk-text-sm);
  max-inline-size: 46rem;
}

/* The preview is horizontally resizable so component behaviour at narrow
 * widths can be checked without devtools and without any JavaScript. */
.sink-preview {
  padding: var(--sk-space-5);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-lg);
  background: var(--sk-surface);
  overflow: auto;
  resize: horizontal;
  min-inline-size: 12rem;
}

.sink-markup > summary {
  cursor: pointer;
  font-size: var(--sk-text-xs);
  font-weight: var(--sk-weight-semibold);
  color: var(--sk-ink-muted);
  padding-block: var(--sk-space-1);
}

.sink-markup > summary:hover {
  color: var(--sk-ink);
}

.sink-markup pre {
  margin-block-start: var(--sk-space-2);
  font-size: var(--sk-text-xs);
  line-height: var(--sk-leading-relaxed);
}

/* -- foundations ------------------------------------------------------------ */

.sink-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--sk-space-4);
}

.sink-swatch {
  display: flex;
  flex-direction: column;
  gap: var(--sk-space-2);
}

.sink-swatch-chip {
  block-size: 3.5rem;
  border-radius: var(--sk-radius-md);
  border: 1px solid var(--sk-border);
}

.sink-swatch-name {
  font-family: var(--sk-font-mono);
  font-size: var(--sk-text-xs);
  color: var(--sk-ink);
  word-break: break-all;
}

.sink-swatch-note {
  font-size: var(--sk-text-xs);
  color: var(--sk-ink-subtle);
}

.sink-row {
  display: flex;
  align-items: baseline;
  gap: var(--sk-space-4);
  padding-block: var(--sk-space-2);
  border-block-end: 1px solid var(--sk-border);
}

.sink-row-label {
  flex: none;
  inline-size: 9rem;
  font-family: var(--sk-font-mono);
  font-size: var(--sk-text-xs);
  color: var(--sk-ink-muted);
}

.sink-bar {
  block-size: 1rem;
  border-radius: var(--sk-radius-sm);
  background: var(--sk-accent);
}

.sink-radius {
  background: var(--sk-accent);
  border-color: transparent;
}

.sink-shadow {
  background: var(--sk-surface-raised);
  border-color: transparent;
}

/* Narrow column, used by the mark story to force a wrap mid-phrase. */
.sink-narrow {
  max-inline-size: 20rem;
}

/* -- reference blocks -------------------------------------------------------- */

.sink-section-title {
  font-size: var(--sk-text-sm);
  font-weight: var(--sk-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--sk-tracking-wide);
  color: var(--sk-ink-subtle);
  padding-block-end: var(--sk-space-2);
  border-block-end: 1px solid var(--sk-border);
  margin-block-end: var(--sk-space-5);
}

.sink-ref {
  display: flex;
  flex-direction: column;
  gap: var(--sk-space-3);
  margin-block-end: var(--sk-space-7);
}

.sink-ref-name code {
  font-size: var(--sk-text-md);
  font-weight: var(--sk-weight-bold);
  background: var(--sk-accent-soft);
  border-color: transparent;
  padding: 0.15em 0.4em;
}

.sink-ref-markup {
  font-size: var(--sk-text-xs);
  line-height: var(--sk-leading-relaxed);
}

.sink-table-wrap {
  overflow-x: auto;
}

.sink-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--sk-text-sm);
}

.sink-table th {
  text-align: start;
  font-size: var(--sk-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--sk-tracking-wide);
  color: var(--sk-ink-subtle);
  padding: var(--sk-space-2) var(--sk-space-3);
  border-block-end: 1px solid var(--sk-border-strong);
  white-space: nowrap;
}

.sink-table td {
  vertical-align: top;
  padding: var(--sk-space-2) var(--sk-space-3);
  border-block-end: 1px solid var(--sk-border);
}

.sink-table td:nth-child(4) {
  color: var(--sk-ink-muted);
  min-inline-size: 18rem;
}

.sink-table code {
  font-size: var(--sk-text-xs);
  white-space: nowrap;
}

.sink-type {
  color: var(--sk-kiwi-800);
}

.sink-dash {
  color: var(--sk-ink-subtle);
}

/* -- flex demo boxes ---------------------------------------------------------- */

.sink-demo-box {
  padding: var(--sk-space-2) var(--sk-space-3);
  border: 1px dashed var(--sk-border-strong);
  border-radius: var(--sk-radius-md);
  background: var(--sk-accent-soft);
  font-size: var(--sk-text-xs);
  color: var(--sk-ink);
}

.sink-demo-tall {
  padding-block: var(--sk-space-5);
}

.sink-align-demo {
  padding: var(--sk-space-2);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-md);
  min-block-size: 5rem;
}

.sink-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Caption above a demo. Unlike .sink-row-label it has no fixed width, because
 * these hold whole class lists and a sentence of explanation. */
.sink-caption {
  display: inline-block;
  font-family: var(--sk-font-mono);
  font-size: var(--sk-text-xs);
  color: var(--sk-ink-muted);
}

/* -- icon + status demos ------------------------------------------------------ */

.sink-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: var(--sk-space-4);
}

.sink-icon-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sk-space-2);
  padding: var(--sk-space-3);
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-md);
  text-align: center;
}

.sink-size-md {
  font-size: var(--sk-text-md);
}

.sink-fg-success {
  color: var(--sk-success-fg);
}
.sink-fg-warning {
  color: var(--sk-warning-fg);
}
.sink-fg-danger {
  color: var(--sk-danger-fg);
}

/* Toasts live in a fixed region in real use. Here they are shown in flow so
 * several can be compared at once. */
.sink-toast-demo {
  display: flex;
  flex-direction: column;
  gap: var(--sk-space-2);
  max-inline-size: 24rem;
}

/* A miniature application window, for the app shell stories.
 *
 * The shell is 100dvh tall and its navbar and sidebar stick to the viewport,
 * which is right in an application and unusable inside a story. Giving it a
 * scroll container of its own makes both stick to THIS box instead, so the
 * behaviour is the real one at a size that fits on the page. */
.sink-frame {
  block-size: 26rem;
  overflow: auto;
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-lg);
}

.sink-frame .sk-shell {
  min-block-size: 100%;
}

/* The sidebar caps itself against the viewport height, which inside the frame
 * is far taller than the frame is. */
.sink-frame .sk-sidebar {
  max-block-size: none;
}

/* The theme switcher. Three links, styled as a segmented strip - deliberately
 * NOT the design system's own Segmented control, which is a form input: this is
 * navigation, and each option is a URL. */
.sink-theme {
  display: flex;
  gap: 1px;
  padding: 2px;
  border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-md);
  background: var(--sk-surface-sunken);
}

.sink-theme-option {
  flex: 1 1 0;
  padding: var(--sk-space-1) var(--sk-space-2);
  border-radius: calc(var(--sk-radius-md) - 2px);
  color: var(--sk-ink-muted);
  font-size: var(--sk-text-xs);
  font-weight: var(--sk-weight-semibold);
  text-align: center;
  text-decoration: none;
}

.sink-theme-option:hover {
  color: var(--sk-ink);
}

.sink-theme-option[aria-current="true"] {
  background: var(--sk-surface-raised);
  color: var(--sk-ink);
  box-shadow: var(--sk-shadow-sm);
}

/* Plain cells, for the grid stories. Nothing here is a design system component:
 * the point of the story is the track layout, not what is sitting in it. */
.sink-grid-cell {
  padding: var(--sk-space-3);
  border: 1px dashed var(--sk-border-strong);
  border-radius: var(--sk-radius-md);
  background: var(--sk-surface-sunken);
  color: var(--sk-ink-muted);
  font-size: var(--sk-text-xs);
  text-align: center;
}