/* Generated by tools/sync-content.js — do not hand-edit.
 * A copy of the portfolio's src/styles/system.css. */

/* =====================================================================
   Controls — buttons, tabs, chips.

   ONE source of truth for both the portfolio and the dashboard. This file
   is authored here and copied into PortfolioAdmin by tools/sync-content.js,
   the same way caseSlots.js is, so the two can never drift into looking
   like different products.

   It uses the tokens both stylesheets already define (--ink, --glass,
   --glass-border, --line, --radius, --fs-body), so nothing here needs its
   own palette.

   Class names are prefixed `ds-` so they can sit alongside the older
   controls while surfaces are converted, without either winning by
   accident.
   ===================================================================== */

:root {
  /* the one surface both tab rails and resting chips are cut from */
  --ds-dull: rgba(255, 255, 255, 0.45);
  --ds-lift: rgba(255, 255, 255, 0.92);
  --ds-shadow: 0 8px 24px rgba(53, 54, 59, 0.08);
  --ds-shadow-raised: 0 10px 26px rgba(53, 54, 59, 0.22);
  --ds-ring: rgba(53, 54, 59, 0.22);
}

/* ------------------------------------------------------------ buttons */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* the space an icon sits in when there is one */
  padding: 11px 22px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  background: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
    box-shadow 0.2s ease, opacity 0.2s ease;
}

/* an icon rides on the left and never squashes */
.ds-btn > svg {
  flex: none;
}

.ds-btn:disabled,
.ds-btn[aria-disabled='true'] {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.ds-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* MAIN primary — solid ink. The heaviest thing on a screen, so it is kept
   for the one action a screen exists to complete. More than one on a view
   means none of them is the focus. */
.ds-btn-main {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
  box-shadow: var(--ds-shadow-raised);
}

.ds-btn-main:hover {
  background: #4a4b52;
  border-color: #4a4b52;
}

/* NORMAL primary — glass filled. The default primary everywhere. */
.ds-btn-primary {
  background: var(--ds-lift);
  border-color: var(--glass-border);
  color: var(--ink);
  box-shadow: var(--ds-shadow);
  backdrop-filter: blur(8px);
}

.ds-btn-primary:hover {
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(53, 54, 59, 0.14);
}

/* SECONDARY — outlined, no fill. */
.ds-btn-secondary {
  background: none;
  border-color: var(--line);
  color: var(--ink);
}

.ds-btn-secondary:hover {
  border-color: var(--ink);
}

/* TERTIARY — text only. */
.ds-btn-tertiary {
  padding-inline: 12px;
  background: none;
  border-color: transparent;
  color: var(--ink-soft);
}

.ds-btn-tertiary:hover {
  color: var(--ink);
  background: rgba(53, 54, 59, 0.05);
}

/* a row of buttons, wrapping rather than overflowing on a narrow screen */
.ds-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/*  ICON ONLY — the round controls already used for menu and sound. Fixed
    shape, always the same, so they read as chrome rather than as an action
    competing with the buttons above. */
.ds-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  flex: none;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  color: var(--ink);
  background: var(--ds-dull);
  box-shadow: var(--ds-shadow);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.ds-icon-btn:hover {
  background: #ffffff;
}

.ds-icon-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* --------------------------------------------------------------- tabs */

/*  A rail holding the options. The rail itself is the dull glass; the
    SELECTED option is lifted out of it in white. Unselected options are
    plain text — no outline at rest, only on hover, so a row of them reads
    as one control rather than as a row of separate buttons. */
.ds-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--ds-dull);
  border: 1px solid var(--glass-border);
  box-shadow: var(--ds-shadow);
  backdrop-filter: blur(8px);
}

.ds-tab {
  flex: none;
  padding: 8px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink-soft);
  background: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
    box-shadow 0.2s ease;
}

.ds-tab:hover:not(.is-selected) {
  border-color: var(--line); /* the light outline, hover only */
  color: var(--ink);
}

.ds-tab.is-selected {
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(53, 54, 59, 0.12);
}

.ds-tab:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* TYPE 1 — one line always; scrolls sideways when it runs out of room.
   The rail keeps its round ends, so the scroll reads as the control being
   longer than the screen rather than as a broken edge. */
.ds-tabs-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.ds-tabs-scroll::-webkit-scrollbar {
  display: none;
}

/* TYPE 2 — wraps to a second line rather than scrolling. The rail grows
   taller and keeps the same corner radius. */
.ds-tabs-wrap {
  flex-wrap: wrap;
  border-radius: var(--radius);
  row-gap: 4px;
}

.ds-tabs-wrap .ds-tab {
  flex: 0 1 auto;
}

/* -------------------------------------------------------------- chips */

/*  Standalone selectors — same height as a tab's option, but each one is
    its own control rather than a block inside a rail. At rest a chip wears
    the RAIL's dull glass; selected, it wears the lifted white AND an ink
    outline, which is what separates a chosen chip from a chosen tab. */
.ds-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ds-chip {
  padding: 8px 22px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--ds-dull);
  box-shadow: var(--ds-shadow);
  backdrop-filter: blur(8px);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
    box-shadow 0.2s ease;
}

.ds-chip:hover:not(.is-selected) {
  border-color: var(--line);
  color: var(--ink);
}

.ds-chip.is-selected {
  background: #ffffff;
  color: var(--ink);
  border-color: var(--ink); /* the ink outline a selected tab does not get */
  box-shadow: 0 4px 14px rgba(53, 54, 59, 0.12);
}

.ds-chip:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- fields */

/*  Inputs are fully rounded like everything else here, so a form reads as
    part of the same family as the buttons under it. */
.ds-field {
  display: block;
  width: 100%;
  padding: 12px 18px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  font: inherit;
  font-size: var(--fs-body);
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s ease;
}

.ds-field:focus {
  border-color: var(--ink);
}

.ds-field::placeholder {
  color: var(--ink-faint);
}

/* a multi-line field cannot be a pill without looking like a mistake */
textarea.ds-field {
  border-radius: var(--radius);
  resize: vertical;
}

.ds-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-body-sm);
  color: var(--ink-soft);
}

/* --------------------------------------------------------- destructive */

/*  `is-danger` recolours whichever button type it is put on rather than
    being a sixth type. Destructive is a property of an action, not a rank:
    the same delete can be the main action of a dialog and a secondary
    option on a card. */
.ds-btn-main.is-danger {
  background: #a3423f;
  border-color: #a3423f;
  box-shadow: 0 10px 26px rgba(163, 66, 63, 0.28);
}

.ds-btn-main.is-danger:hover {
  background: #8d3936;
  border-color: #8d3936;
}

.ds-btn-secondary.is-danger,
.ds-btn-tertiary.is-danger {
  color: #a3423f;
}

.ds-btn-secondary.is-danger:hover {
  border-color: #a3423f;
}

/* ------------------------------------------------------------- mobile */

/*  iOS zooms the page in when a field smaller than 16px takes focus, and
    then leaves it zoomed — which is why a dialog opened on a phone ended
    up magnified with no way back. Sizing the text at 16px on small screens
    removes the trigger entirely; there is no way to opt out of the zoom
    itself, only to stop provoking it. */
@media (max-width: 640px) {
  .ds-field {
    font-size: 16px;
  }

  /* a phone has no room for two buttons side by side plus their padding —
     stack them, main action first */
  .ds-btn-row.is-stacked {
    flex-direction: column;
    align-items: stretch;
  }

  .ds-btn-row.is-stacked .ds-btn {
    width: 100%;
  }
}