/* Showcase chrome — NON distribuito, mai linkato nei preview. Classi sh- minuscole. */

:root {
  --sh-paper: #f4eedc;
  --sh-paper-dark: #eee7d2;
  --sh-paper-line: #d3c5a0;
  --sh-paper-hover: #d8cba6;
  --sh-paper-subline: #c6b78e;
  --sh-card-bg: #fffdf6;
  --sh-card-line: #e0d5b8;
  --sh-ink: #1a1a1a;
  --sh-black: #000;
  --sh-title: #6b3322;
  --sh-ink-soft: #3c4043;
  --sh-ink-mute: #9a8563;
  --sh-on-dark: #fff;
  --sh-link: #1a73e8;
  --sh-code-bg: #000;
  --sh-code-fg: #e8e8e8;
  --sh-code-head: #2d2d2d;
  --sh-code-btn: #3a3a3a;
  --sh-code-btn-line: #555;
  --sh-code-btn-hover: #4a4a4a;
  --sh-tok-comment: #8a8578;
  --sh-tok-keyword: #e0a458;
  --sh-tok-string: #9ecb7f;
  --sh-tok-number: #7ec4cf;
  --sh-tok-tag: #e08a7e;
  --sh-tok-attr: #d9c27a;
  --sh-tok-func: #8ab4f8;
  --sh-tok-class: #e0c06a;
  --sh-tok-punct: #8f8f8f;
  --sh-tok-error: #ff7b72;
  --sh-font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sh-font-title: "Fraunces", Georgia, serif;
  --sh-font-code: "Red Hat Mono", ui-monospace, monospace;
  --sh-radius: 0.5rem;
}

/* Font self-hosted (showcase only): Fraunces for titles, Inter for text. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("/fonts/fraunces-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 600 700;
  font-display: swap;
  src: url("/fonts/fraunces-italic-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Red Hat Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/redhatmono-latin.woff2") format("woff2");
}

.sh-page {
  font-family: var(--sh-font-text);
  margin: 0;
  color: var(--sh-ink);
  background: var(--sh-paper);
}

/* Layout styleguide: sidebar fissa a sinistra, main a tutta altezza. */
.sh-layout {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.sh-sidebar {
  flex: 0 0 16rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--sh-paper);
  border-right: 1px solid var(--sh-card-line);
  color: var(--sh-ink);
  padding: 0;
  box-sizing: border-box;
}

.sh-brand {
  display: block;
  font-size: 3.5rem;
  line-height: 1;
  font-weight: 700;
  font-style: italic;
  text-decoration: none;
  padding: 1rem;
}

.sh-tree-heading {
  display: block;
  color: var(--sh-ink-mute);
  font-weight: 600;
  text-decoration: none;
  padding: 0.35rem 0.5rem;
  border-radius: 0;
  margin: 0 0 0.25rem;
}

a.sh-tree-heading {
  color: var(--sh-black);
}

a.sh-tree-heading:hover {
  background: var(--sh-paper-hover);
}

a.sh-tree-heading[aria-current="page"] {
  color: var(--sh-on-dark);
  background: var(--sh-title);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.55);
}

.sh-tree {
  list-style: none;
  margin: 0 0 0.25rem;
  padding: 0;
}

.sh-tree-item {
  margin-bottom: 0.25rem;
}

.sh-tree-link {
  display: block;
  color: var(--sh-black);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0;
}

.sh-tree-link:hover {
  color: var(--sh-black);
  background: var(--sh-paper-hover);
}

.sh-tree-sub {
  list-style: none;
  margin: 0.15rem 0 0.5rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--sh-paper-subline);
}

.sh-tree-sub a {
  display: block;
  color: var(--sh-black);
  text-decoration: none;
  font-size: 0.85rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0;
}

.sh-tree-sub a:hover {
  color: var(--sh-black);
  background: var(--sh-paper-hover);
}

.sh-tree-sub a[aria-current="page"] {
  color: var(--sh-on-dark);
  background: var(--sh-title);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.55);
}

.sh-main {
  flex: 1;
  min-width: 0;
  min-height: 100vh;
}

.sh-main-inner {
  max-width: 60rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

@media (max-width: 48rem) {
  .sh-layout {
    flex-direction: column;
  }

  .sh-sidebar {
    flex: none;
    position: static;
    height: auto;
    max-height: none;
  }
}

.sh-header {
  margin-bottom: 2rem;
}

.sh-title,
.sh-card h2,
.sh-brand {
  font-family: var(--sh-font-title);
  color: var(--sh-title);
}

.sh-title {
  margin: 0 0 0.5rem;
  font-size: 2rem;
}

.sh-subtitle {
  margin: 0;
  color: var(--sh-ink-mute);
}

.sh-section-head {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.sh-section-head h2 {
  margin: 0;
}

.sh-description {
  margin: 0;
  color: var(--sh-ink-mute);
}

.sh-card {
  background: var(--sh-card-bg);
  border: 1px solid var(--sh-card-line);
  border-radius: var(--sh-radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.sh-preview-resize {
  position: relative;
  min-width: 20rem;
  max-width: 100%;
  margin-bottom: 1.5rem;
  padding-right: 1rem;
}

.sh-preview-handle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1rem;
  cursor: ew-resize;
  touch-action: none;
}

.sh-preview-handle::after {
  content: "";
  position: absolute;
  top: 0.5rem;
  right: 0.25rem;
  bottom: 0.5rem;
  width: 4px;
  border-radius: 999px;
  background: var(--sh-paper-line);
}

.sh-preview-handle:hover::after,
.sh-preview-handle.is-dragging::after,
.sh-preview-handle:focus-visible::after {
  background: var(--sh-title);
}

.sh-preview-handle:focus {
  outline: none;
}

.sh-preview-resize.is-dragging {
  user-select: none;
}

.sh-preview-resize.is-dragging .sh-preview-frame {
  pointer-events: none;
}

.sh-preview-frame {
  display: block;
  width: 100%;
  border: 1px solid var(--sh-card-line);
  border-radius: var(--sh-radius);
  background-color: #fff;
  min-height: 160px;
}

.sh-tabs {
  margin-bottom: 1.5rem;
}

.sh-tablist {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.sh-tab {
  border: 0;
  background: transparent;
  color: var(--sh-ink);
  border-radius: 0.25rem;
  padding: 0.5rem 1.25rem;
  cursor: pointer;
  font-size: 0.85rem;
}

.sh-tab.is-selected {
  background: var(--sh-title);
  color: var(--sh-on-dark);
  border-color: var(--sh-title);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.55);
}

.sh-panel.is-hidden {
  display: none;
}

.sh-code-block {
  position: relative;
  background: var(--sh-code-bg);
  color: var(--sh-code-fg);
  border-radius: 0.25rem;
  overflow: hidden;
}

.sh-code-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: var(--sh-code-head);
  font-size: 0.8rem;
}

.sh-copy-btn {
  border: 1px solid var(--sh-code-btn-line);
  background: var(--sh-code-btn);
  color: var(--sh-on-dark);
  border-radius: 0.25rem;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  font-size: 0.8rem;
}

.sh-copy-btn:hover {
  background: var(--sh-code-btn-hover);
}

.sh-code-block pre {
  margin: 0;
  padding: 1rem;
  font-family: var(--sh-font-code);
  font-size: 1rem;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.sh-code-block pre code {
  font-family: inherit;
}

/* Syntax highlight (Pygments, build-time): token colors on black. */
.sh-code-block .c,
.sh-code-block .cm,
.sh-code-block .c1,
.sh-code-block .cs,
.sh-code-block .cp {
  color: var(--sh-tok-comment);
  font-style: italic;
}

.sh-code-block .k,
.sh-code-block .kc,
.sh-code-block .kd,
.sh-code-block .kn,
.sh-code-block .kp,
.sh-code-block .kr,
.sh-code-block .kt {
  color: var(--sh-tok-keyword);
}

.sh-code-block .s,
.sh-code-block .s1,
.sh-code-block .s2,
.sh-code-block .sa,
.sh-code-block .sb,
.sh-code-block .sc,
.sh-code-block .sd,
.sh-code-block .se,
.sh-code-block .sh,
.sh-code-block .si,
.sh-code-block .sx,
.sh-code-block .sr,
.sh-code-block .ss {
  color: var(--sh-tok-string);
}

.sh-code-block .m,
.sh-code-block .mb,
.sh-code-block .mf,
.sh-code-block .mh,
.sh-code-block .mi,
.sh-code-block .mo {
  color: var(--sh-tok-number);
}

.sh-code-block .nt {
  color: var(--sh-tok-tag);
}

.sh-code-block .na,
.sh-code-block .nv {
  color: var(--sh-tok-attr);
}

.sh-code-block .fm,
.sh-code-block .nf,
.sh-code-block .nb,
.sh-code-block .nd {
  color: var(--sh-tok-func);
}

.sh-code-block .nc {
  color: var(--sh-tok-class);
}

.sh-code-block .p {
  color: var(--sh-tok-punct);
}

.sh-code-block .err {
  color: var(--sh-tok-error);
}

.sh-nav {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1rem 0 2rem;
}

.sh-nav a {
  color: var(--sh-link);
}

.sh-tokens {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

.sh-token {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--sh-card-bg);
  border: 1px solid var(--sh-card-line);
  border-radius: var(--sh-radius);
  padding: 0.75rem 1rem;
}

.sh-token dt,
.sh-token dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sh-swatch {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.25rem;
  border: 1px solid var(--sh-card-line);
}