/* Shared base + components for Packshot Platform mockups.
   Uses ONLY var(--*) from _design-tokens.css. No hex literals.
   RTL via logical CSS properties throughout.
   Per 06-wireframe-spec.md Section E + 13-ui-review-2026-05-28.md.
*/

@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap");

/* ----- RESET ----- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
}

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: inherit;
}

a {
  color: var(--color-info);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
}

/* Focus ring — visible on every interactive element */
:focus-visible {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Numbers stay LTR within RTL flow */
.ltr,
bdi {
  unicode-bidi: isolate;
  direction: ltr;
}

/* ----- SHELL ----- */

.shell {
  display: grid;
  grid-template-rows: var(--shell-h) 1fr;
  min-height: 100vh;
}

.shell-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
  padding: 0 var(--space-6);
  background: var(--color-surface);
  border-block-end: 1px solid var(--color-border);
  height: var(--shell-h);
  box-shadow: var(--shadow-sm);
}

.shell-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  color: var(--color-primary);
  text-decoration: none;
}

.shell-brand-mark {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  display: grid;
  place-items: center;
  font-weight: var(--fw-bold);
  font-size: 14px;
  letter-spacing: 0.5px;
}

.shell-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.shell-nav-link {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  text-decoration: none;
}

.shell-nav-link:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
  text-decoration: none;
}

.shell-nav-link.is-active {
  background: var(--color-surface-alt);
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

.shell-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.spend-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-pill);
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
}

.spend-chip[data-level="warn"] {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.spend-chip[data-level="block"] {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  display: grid;
  place-items: center;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body-sm);
}

/* ----- BUTTONS ----- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
  line-height: 1;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
}

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-border-strong);
}

.btn-secondary:hover {
  background: var(--color-surface-alt);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
}

.btn-ghost:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.btn-accent {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.btn-accent:hover {
  background: var(--color-accent-hover);
}

.btn-sm {
  min-height: 36px;
  padding: 0 var(--space-3);
  font-size: var(--fs-body-sm);
}

.btn-icon {
  width: var(--touch-min);
  height: var(--touch-min);
  min-height: auto;
  padding: 0;
  border-radius: var(--radius-md);
}

/* ----- BADGES ----- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  line-height: 1.3;
}

.badge[data-tone="success"] {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.badge[data-tone="warning"] {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.badge[data-tone="error"] {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.badge[data-tone="info"] {
  background: var(--color-info-bg);
  color: var(--color-info);
}

.badge[data-tone="accent"] {
  background: rgba(176, 141, 87, 0.12);
  color: var(--color-accent);
}

.badge .dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

/* ----- CARDS ----- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card.is-selected {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(176, 141, 87, 0.18);
}

/* ----- TOAST (top-right fixed, per A2 decision) ----- */

.toast-container {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 100;
  pointer-events: none;
}

.toast {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-inline-start: 4px solid var(--color-info);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-lg);
  min-width: 280px;
  pointer-events: auto;
  font-size: var(--fs-body-sm);
}

.toast[data-tone="success"] {
  border-inline-start-color: var(--color-success);
}

.toast[data-tone="error"] {
  border-inline-start-color: var(--color-error);
}

.toast[data-tone="warning"] {
  border-inline-start-color: var(--color-warning);
}

/* ----- SKELETONS ----- */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface-alt) 0%,
    var(--color-border) 50%,
    var(--color-surface-alt) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.skeleton-block {
  background: linear-gradient(
    90deg,
    var(--color-surface-alt) 0%,
    var(--color-border) 50%,
    var(--color-surface-alt) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--radius-md);
}

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-4);
  min-height: 180px;
}

.skeleton-img-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.skeleton-img-card .skeleton-thumb,
.skeleton-block.skeleton-thumb {
  aspect-ratio: 3 / 4;
  width: 100%;
  min-height: 120px;
  border-radius: var(--radius-lg);
}

.skeleton-block.skeleton-line {
  height: 14px;
  width: 55%;
}

.skeleton-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4);
}

.skeleton-archive-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.skeleton-block.skeleton-arch-thumb {
  aspect-ratio: 1;
  width: 100%;
  min-height: 140px;
}

.skeleton-publish .skeleton-line.title {
  height: 18px;
  width: 40%;
  margin-block-end: var(--space-4);
}

.skeleton-thumb-row .skeleton-grid,
.skeleton-thumb-row-inner {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.skeleton-thumb-row-inner .skeleton-img-card {
  width: 88px;
}

.skeleton-thumb-row-inner .skeleton-thumb {
  width: 88px;
  height: 110px;
  min-height: 110px;
}

.img-stale-placeholder {
  display: grid;
  place-items: center;
  gap: var(--space-2);
  width: 100%;
  height: 100%;
  min-height: 120px;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  border-radius: inherit;
  text-align: center;
  padding: var(--space-3);
}

.img-stale-placeholder span:first-child {
  font-size: 24px;
  opacity: 0.6;
}

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

/* ----- RTL lists & steps (Hebrew reading flow) ----- */

ol.rtl-steps {
  direction: rtl;
  list-style-type: decimal;
  list-style-position: inside;
  padding-inline: 0;
  margin: 0 0 var(--space-3);
  text-align: start;
}

.view-slot ul[role="list"] {
  padding-inline-start: 0;
  list-style-position: inside;
}

/* Mobile touch: btn-sm meets 60px bar */
@media (max-width: 768px) {
  .btn-sm {
    min-height: var(--touch-min);
    padding: 0 var(--space-4);
  }

  .upload-zone,
  .assist-detail-zone {
    min-height: var(--touch-mobile);
  }
}

/* Live API unreachable — demo fixture fallback (foundation screens) */
.live-fallback-banner {
  padding: var(--space-3) var(--space-4);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  font-size: var(--fs-body-sm);
  color: var(--color-text);
  margin-block-end: var(--space-4);
}

.live-fallback-banner code {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  background: var(--color-surface);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   V2 VISUAL STANDARD — shared vocabulary
   Derived from the reference screens: auth-signin, dashboard, workspace.
   Additive + token-only (rgba accent/scrim tints match house pattern).
   Adopt across all views so hierarchy/spacing/depth/states stay consistent.
   ============================================================ */

/* Centered page wrapper */
.page-wrap {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-6);
}

/* Section header row (title + optional trailing badge/action via .grow) */
.section-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}

.section-head h2,
.section-head h3 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  line-height: var(--lh-snug);
}

.section-head .grow {
  flex: 1;
}

/* Uppercase eyebrow label (workspace rail-section pattern) */
.section-eyebrow {
  font-size: var(--fs-body-sm);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-text-muted);
  font-weight: var(--fw-semibold);
  margin-block-end: var(--space-3);
}

/* Toolbar wrapped as a surface card (dashboard .filter-row pattern) */
.toolbar-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-block-end: var(--space-6);
}

.toolbar-card .grow {
  flex: 1;
}

/* Elevated panel — card with static depth (auth-card pattern) */
.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

/* Async state block — empty / loading / error / no-results */
.async-state {
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
}

.async-state__icon {
  font-size: 40px;
  line-height: 1;
  margin-block-end: var(--space-3);
  opacity: 0.85;
}

.async-state h2,
.async-state h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-block-end: var(--space-2);
}

.async-state p {
  font-size: var(--fs-body-sm);
  margin-block-end: var(--space-4);
  line-height: var(--lh-normal);
  max-width: 46ch;
  margin-inline: auto;
}

.async-state__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

.async-state .btn,
.async-state__actions .btn {
  min-height: var(--touch-min);
}

.async-state__detail {
  display: inline-block;
  margin-block-end: var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--color-error-bg);
  color: var(--color-error);
  border-radius: var(--radius-md);
  font-size: var(--fs-caption);
  font-family: var(--font-mono);
  direction: ltr;
  unicode-bidi: isolate;
}

/* Panel variant — elevated empty/error on list screens */
.async-state.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.async-state h3 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-block-end: var(--space-2);
}

/* Inline alert — left-border tone strip (workspace .ws-alert pattern) */
.inline-alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  border-inline-start: 4px solid var(--color-info);
  background: var(--color-info-bg);
  color: var(--color-text);
}

.inline-alert[data-tone="error"] {
  border-inline-start-color: var(--color-error);
  background: var(--color-error-bg);
}

.inline-alert[data-tone="warning"] {
  border-inline-start-color: var(--color-warning);
  background: var(--color-warning-bg);
}

.inline-alert[data-tone="success"] {
  border-inline-start-color: var(--color-success);
  background: var(--color-success-bg);
}

/* Standard form field + control (auth-field pattern, promoted to shared) */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field-label {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.field-hint {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

.ctl {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--fs-body);
  background: var(--color-bg);
  color: var(--color-text);
}

.ctl:focus,
.ctl:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(15, 27, 45, 0.08);
}

textarea.ctl {
  min-height: 84px;
  resize: vertical;
}

/* Mobile touch upgrade for shared controls */
@media (max-width: 768px) {
  .page-wrap {
    padding: var(--space-4);
  }

  .ctl {
    min-height: var(--touch-mobile);
  }
}

/* ----- MOCKUP-ONLY HELPERS (not in production) ----- */

.mockup-watermark {
  position: fixed;
  bottom: var(--space-3);
  left: var(--space-3);
  padding: var(--space-1) var(--space-2);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 10px;
  z-index: 1000;
  opacity: 0.7;
  pointer-events: none;
}