@import url("design/styles.css");

body { margin: 0; }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }
::selection { background: var(--selection-bg); color: var(--selection-fg); }

.page {
  min-height: 100vh;
  background: var(--surface-page);
  display: flex;
  justify-content: center;
  padding: var(--page-pad-y) var(--page-pad-x);
  font-family: var(--font-sans);
  color: var(--text-default);
  box-sizing: border-box;
}
.card {
  width: 100%;
  max-width: var(--card-max-width);
  display: flex;
  flex-direction: column;
  gap: var(--card-stack-gap);
}

/* Masthead — the same sticky header used on every page (index.html, masterlist.html,
   scriptfillpolicy.html, about.html); hand-authored here to match Masthead.jsx in the
   design system exactly, since these Scriban-generated pages carry no React runtime. */
.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-card);
}
.masthead-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.masthead-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}
.masthead-brand img {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--radius-panel);
  border: 1px solid var(--border-card);
  object-fit: cover;
}
.masthead-brand span {
  font: var(--weight-semibold) 22px/1 var(--font-display);
  color: var(--text-heading);
}
.masthead-nav {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  flex-wrap: wrap;
}
.masthead-nav a {
  font: var(--weight-medium) var(--type-fill-size) var(--font-sans);
  color: var(--text-link);
  text-decoration: none;
  white-space: nowrap;
}

.header {
  display: flex;
  gap: var(--header-gap);
  align-items: flex-start;
  flex-wrap: wrap;
}
.img-box {
  width: var(--promo-size);
  height: var(--promo-size);
  min-width: 0;
  min-height: 0;
  flex: none;
  border-radius: var(--radius-promo);
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-card);
}
.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.header-main {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.gender-pill {
  font: var(--weight-semibold) var(--type-meta-size) var(--font-sans);
  letter-spacing: var(--tracking-pill);
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--accent-pill);
  color: var(--text-on-accent);
}
.meta {
  font: var(--weight-medium) var(--type-meta-size) var(--font-sans);
  color: var(--text-meta);
}
h1.title {
  margin: 0;
  font: var(--weight-semibold) var(--type-title-size)/var(--type-title-line) var(--font-display);
  color: var(--text-heading);
  text-wrap: pretty;
}

.links {
  display: flex;
  gap: var(--space-3);
  margin-top: 2px;
}
.link-circle {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-circle);
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.link-circle img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.tag {
  display: inline-block;
  flex-shrink: 0;
  white-space: nowrap;
  font: var(--weight-regular) var(--type-tag-size) var(--font-sans);
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  color: var(--text-tag);
}
a.tag:hover { border-color: var(--border-card-hover); color: var(--text-default); }
a.gender-pill:hover { opacity: var(--hover-opacity); }

.divider {
  height: 1px;
  background: var(--border-card);
}

.summary {
  white-space: pre-wrap;
  font: var(--weight-regular) var(--type-summary-size)/var(--type-summary-line) var(--font-sans);
  color: var(--text-body);
  text-wrap: pretty;
}
.summary strong { font-weight: var(--weight-semibold); }
.summary a { text-decoration: underline; }

.boxout {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 16px 20px;
  border-radius: var(--radius-panel);
  background: var(--surface-card);
  border: 1px solid var(--border-card);
}
.boxout-label {
  font: var(--weight-semibold) var(--type-label-size) var(--font-sans);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-label);
}
.boxout-body {
  font: var(--weight-regular) var(--type-boxout-size)/var(--type-boxout-line) var(--font-sans);
  color: var(--text-body);
  white-space: pre-wrap;
  text-wrap: pretty;
}
.boxout-body strong { font-weight: var(--weight-semibold); }
.boxout-body a { text-decoration: underline; }

.fills-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.fills-label {
  font: var(--weight-semibold) var(--type-label-size) var(--font-sans);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-label);
}
.fills-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.fill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 12px 16px;
  border-radius: var(--radius-panel);
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  color: var(--text-body);
}
.fill-name {
  font: var(--weight-medium) var(--type-fill-size) var(--font-sans);
  color: var(--accent-fill-name);
}
.fill-icon {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-circle);
  background: var(--surface-card-inset);
  border: 1px solid var(--border-card);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: none;
}
.fill-icon img { width: 16px; height: 16px; object-fit: contain; }

.notice {
  padding: 18px 20px;
  border-radius: var(--radius-panel);
  text-align: center;
}
.notice-fiction {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  font: var(--weight-medium) var(--type-label-size)/var(--type-notice-line) var(--font-sans);
  color: var(--text-label);
}
.notice-policy {
  background: var(--notice-bg);
  border: 1px solid var(--notice-border);
  font: var(--weight-medium) var(--type-notice-size)/var(--type-notice-line) var(--font-sans);
  color: var(--notice-text);
}
.notice-policy a { font-weight: var(--weight-semibold); text-decoration: underline; }

.status-msg {
  font: var(--weight-medium) var(--type-summary-size)/1.6 var(--font-sans);
  color: var(--text-label);
  text-align: center;
}

/* Showcase pages */
.group {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
h2.group-title {
  margin: 0;
  font: var(--weight-semibold) var(--type-group-size)/var(--type-group-line) var(--font-display);
  color: var(--text-heading);
}
.script-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-col), 1fr));
  gap: var(--grid-gap);
}
.script-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  color: var(--text-default);
}
.script-card:hover {
  border-color: var(--border-card-hover);
  color: var(--text-default);
}
.script-card-img {
  aspect-ratio: 1 / 1;
  min-width: 0;
  min-height: 0;
  background: var(--surface-card);
}
.script-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.script-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 12px 14px 14px;
}
.script-card-title {
  font: var(--weight-semibold) var(--type-card-title-size)/var(--type-card-title-line) var(--font-display);
  color: var(--text-title);
}
.tags-small { gap: var(--space-1); }
.tags-small .tag {
  font-size: var(--type-tag-small-size);
  padding: 3px 9px;
  background: var(--surface-card-inset);
}