/* ============================================================
   Oganiko Sheet — og-sheet
   Canonical component · OS-000 Sheet (slide-out / drawer / side panel)
   Source of truth: OS-000-Design-System/components/sheet/sheet.css
   ------------------------------------------------------------
   Edge slide-out panel. Assimilated from shadcn/21st Sheet patterns —
   principles only; restyled with ODS tokens. Not a raw dump.
   Token names only; fallbacks repeat tokens/*.css values so the
   file works in the static catalogue (raw @theme is not applied
   without Tailwind). Do not invent new token values.
   version: 0.1.0 (2026-09-22) · maturity: experimental
   ------------------------------------------------------------
   Markup:
     <div class="og-sheet-backdrop" data-open="true">
       <div class="og-sheet og-sheet--right og-sheet--md" role="dialog"
            aria-modal="true" aria-labelledby="sheet-title">
         <header class="og-sheet__header">
           <div class="og-sheet__heading">
             <h2 id="sheet-title" class="og-sheet__title">Edit profile</h2>
             <p class="og-sheet__description">…</p>
           </div>
           <button type="button" class="og-sheet__close" aria-label="Close">…</button>
         </header>
         <div class="og-sheet__body">…</div>
         <footer class="og-sheet__footer">…</footer>
       </div>
     </div>
   ============================================================ */

.og-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 100);
  background: var(--overlay-backdrop, rgba(0, 0, 0, 0.55));
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--transition-base, 200ms ease),
    visibility var(--transition-base, 200ms ease);
}

.og-sheet-backdrop[data-open="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.og-sheet-backdrop--right,
.og-sheet-backdrop:has(.og-sheet--right) {
  justify-content: flex-end;
  align-items: stretch;
}

.og-sheet-backdrop--left,
.og-sheet-backdrop:has(.og-sheet--left) {
  justify-content: flex-start;
  align-items: stretch;
}

.og-sheet-backdrop--bottom,
.og-sheet-backdrop:has(.og-sheet--bottom) {
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
}

.og-sheet-backdrop--top,
.og-sheet-backdrop:has(.og-sheet--top) {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

.og-sheet {
  display: flex;
  flex-direction: column;
  background: var(--color-bg, #ffffff);
  color: var(--color-text, #000000);
  font-family: var(--font-primary, 'Open Sans', 'Helvetica Neue', Arial, sans-serif);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
  max-height: 100%;
  outline: none;
  transition: transform var(--transition-base, 200ms ease);
}

.og-sheet--md.og-sheet--right,
.og-sheet--md.og-sheet--left {
  width: min(24rem, 100%);
}

.og-sheet--lg.og-sheet--right,
.og-sheet--lg.og-sheet--left {
  width: min(32rem, 100%);
}

.og-sheet--right,
.og-sheet--left {
  height: 100%;
}

.og-sheet--bottom,
.og-sheet--top {
  width: 100%;
  max-width: 100%;
  max-height: min(90vh, 100%);
}

.og-sheet--right {
  border-radius: var(--radius-lg, 12px) 0 0 var(--radius-lg, 12px);
  transform: translateX(100%);
}

.og-sheet--left {
  border-radius: 0 var(--radius-lg, 12px) var(--radius-lg, 12px) 0;
  transform: translateX(-100%);
}

.og-sheet--bottom {
  border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
  transform: translateY(100%);
  align-self: flex-end;
}

.og-sheet--top {
  border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px);
  transform: translateY(-100%);
  align-self: flex-start;
}

.og-sheet-backdrop[data-open="true"] .og-sheet--right,
.og-sheet-backdrop[data-open="true"] .og-sheet--left,
.og-sheet-backdrop[data-open="true"] .og-sheet--bottom,
.og-sheet-backdrop[data-open="true"] .og-sheet--top {
  transform: translate(0, 0);
}

.og-sheet__header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4, 1rem);
  padding: var(--spacing-6, 1.5rem);
  border-bottom: 1px solid var(--color-border, #e0e0e0);
  flex-shrink: 0;
  /* Quiet chrome — no brand-green rule on the header */
}

.og-sheet__heading {
  flex: 1;
  min-width: 0;
}

.og-sheet__title {
  margin: 0;
  font-size: var(--text-lg, 1.125rem);
  font-weight: var(--weight-semibold, 600);
  line-height: var(--leading-snug, 1.25);
  color: var(--color-text, #000000);
}

.og-sheet__description {
  margin: var(--spacing-2, 0.5rem) 0 0;
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-regular, 400);
  line-height: var(--leading-normal, 1.5);
  color: var(--color-text-secondary, #333333);
}

.og-sheet__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: calc(var(--spacing-1, 0.25rem) * -1) calc(var(--spacing-1, 0.25rem) * -1) 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md, 8px);
  background: transparent;
  color: var(--color-text-secondary, #333333);
  cursor: pointer;
}

.og-sheet__close:hover {
  background: var(--color-bg-muted, #f5f5f3);
  color: var(--color-text, #000000);
}

.og-sheet__close:focus-visible {
  outline: 2px solid var(--color-border-focus, #34c755);
  outline-offset: 2px;
}

.og-sheet__close .og-sheet__icon,
.og-sheet__close iconify-icon {
  width: 24px;
  height: 24px;
  font-size: 24px;
  color: currentColor;
}

.og-sheet__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--spacing-6, 1.5rem);
}

.og-sheet__footer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3, 0.75rem);
  padding: var(--spacing-6, 1.5rem);
  border-top: 1px solid var(--color-border, #e0e0e0);
  flex-shrink: 0;
  background: var(--color-bg, #ffffff);
}

.og-sheet__field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2, 0.5rem);
  margin-bottom: var(--spacing-4, 1rem);
}

.og-sheet__field:last-child {
  margin-bottom: 0;
}

.og-sheet__label {
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
  color: var(--color-text, #000000);
}

.og-sheet__input {
  width: 100%;
  padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
  font-family: inherit;
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text, #000000);
  background: var(--color-bg, #ffffff);
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: var(--radius-md, 8px);
}

.og-sheet__input:focus-visible {
  outline: 2px solid var(--color-border-focus, #34c755);
  outline-offset: 2px;
}

.og-sheet__textarea {
  min-height: 4.5rem;
  resize: vertical;
  line-height: var(--leading-normal, 1.5);
}

.og-sheet__meta {
  margin: 0 0 var(--spacing-4, 1rem);
  padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
  background: var(--color-bg-muted, #f5f5f3);
  border-radius: var(--radius-md, 8px);
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-secondary, #333333);
  line-height: var(--leading-normal, 1.5);
}

.og-sheet__meta strong {
  color: var(--color-text, #000000);
  font-weight: var(--weight-semibold, 600);
}

/* Demo / catalogue primary action — mirrors button primary tokens */
.og-sheet__action-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--spacing-3, 0.75rem) var(--spacing-5, 1.25rem);
  font-family: inherit;
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-medium, 500);
  color: var(--color-text-inverse, #ffffff);
  background: var(--color-cta, #34c755);
  border: 0;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: background var(--transition-base, 200ms ease);
}

.og-sheet__action-primary:hover {
  background: var(--color-cta-hover, #2db84a);
}

.og-sheet__action-primary:focus-visible {
  outline: 2px solid var(--color-border-focus, #34c755);
  outline-offset: 2px;
}

.og-sheet__action-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--spacing-2, 0.5rem);
  font-family: inherit;
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-regular, 400);
  color: var(--color-text-secondary, #333333);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.og-sheet__action-secondary:hover {
  color: var(--color-text, #000000);
}

.og-sheet__action-secondary:focus-visible {
  outline: 2px solid var(--color-border-focus, #34c755);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .og-sheet-backdrop,
  .og-sheet,
  .og-sheet__action-primary {
    transition: none;
  }

  .og-sheet--right,
  .og-sheet--left,
  .og-sheet--bottom,
  .og-sheet--top {
    transform: none;
  }

  .og-sheet-backdrop:not([data-open="true"]) .og-sheet {
    visibility: hidden;
  }
}