:root {
  --wine: #722f37;
  --wine-dark: #4c1c25;
  --ink: #2a1d16;
  --paper: #f8f0da;
  --paper-bright: #fff9e9;
  --gold: #d5af64;
  --moss: #38513b;
  --muted: #eadbc0;
  --danger: #9c2f38;
  --shadow: 0 14px 36px #0005;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--paper);
  background: radial-gradient(circle at 10% 0, #71443c55, transparent 30rem), #261b17;
  font-family: Georgia, "Times New Roman", serif;
}

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 3px solid #f5d998;
  outline-offset: 3px;
}

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

.site-header {
  border-bottom: 3px solid var(--gold);
  background: linear-gradient(105deg, var(--wine-dark), var(--wine));
  box-shadow: 0 4px 18px #0006;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: min(1200px, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: 1.6rem 0;
}

.brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: .9rem;
  color: inherit;
  text-decoration: none;
}

.brand-icon { width: 4rem; height: 4rem; object-fit: contain; border-radius: 9px; }
.brand-copy { display: grid; min-width: 0; gap: .18rem; }
.brand-copy strong { color: #f5d998; font-size: clamp(1.35rem, 3vw, 2.25rem); letter-spacing: .055em; line-height: 1.06; text-transform: uppercase; }
.eyebrow, .section-kicker { margin: 0; color: #f5d998; font: 700 .74rem/1.25 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.subtitle { color: #f6e9ca; font-size: .95rem; line-height: 1.35; }

.header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .55rem; }

.primary-button, .secondary-button, .quiet-button, .danger-button, .link-button, .icon-button {
  border: 1px solid transparent;
  border-radius: 6px;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.primary-button:hover, .secondary-button:hover, .quiet-button:hover, .danger-button:hover, .icon-button:hover { transform: translateY(-1px); }
.primary-button { padding: .75rem .95rem; color: var(--ink); font-weight: 700; background: #f0ca7e; box-shadow: 0 3px #a57a30; }
.primary-button:disabled, .secondary-button:disabled, .danger-button:disabled { cursor: wait; opacity: .6; transform: none; }
.secondary-button { padding: .65rem .85rem; color: #4c382b; border-color: #bda47a; background: transparent; }
.quiet-button { padding: .6rem .72rem; color: #f7e9ca; border-color: #f7e9ca99; background: #38513b77; }
.danger-button { padding: .7rem .9rem; color: #fff7e5; background: var(--danger); }
.link-button { padding: .35rem .1rem; color: var(--muted); text-decoration: underline; border: 0; background: transparent; }
.icon-button { flex: 0 0 auto; width: 2.35rem; height: 2.35rem; color: var(--wine); font-size: 1.5rem; line-height: 1; border-color: #bfaa85; background: #fffaf0; }

main { width: min(1200px, calc(100% - 2rem)); margin: 2rem auto 3rem; }
.library { padding: clamp(1rem, 3vw, 1.75rem); border: 1px solid #d5af6499; border-radius: 12px; background: #5a3b2b77; box-shadow: var(--shadow); }
.library-heading { display: flex; align-items: start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.2rem; }
.library h1 { margin: .35rem 0 0; color: #f7e9ca; font-size: clamp(1.65rem, 4vw, 2.35rem); }
.moderation-note, .public-note { max-width: 24rem; margin: .1rem 0; color: var(--muted); line-height: 1.45; text-align: right; }
.turnstile-box { min-height: 65px; margin-top: 1rem; }
.consent-choice { display: flex; gap: .55rem; margin-top: .75rem; color: #4b3527; font: .9rem/1.4 Arial, sans-serif; }
.consent-choice input { flex: 0 0 auto; width: 1rem; min-height: auto; margin-top: .18rem; accent-color: var(--wine); }
.consent-choice a { color: #6f342a; }
.privacy-page { max-width: 760px; padding: clamp(1.25rem, 4vw, 2.5rem); color: var(--ink); border: 1px solid #d5af6499; border-radius: 12px; background: var(--paper); box-shadow: var(--shadow); }
.privacy-page h1 { margin-top: .35rem; color: #51252a; }
.privacy-page a, .site-footer a { color: inherit; }

.connection-notice { margin: 0 0 1rem; padding: .75rem .9rem; color: #3d2a1e; border-left: 4px solid #c18b2f; border-radius: 4px; background: #f6dfaa; line-height: 1.4; }
.toolbar { display: flex; gap: .75rem; margin-bottom: .75rem; }
.toolbar .secondary-button { color: #f7e9ca; border-color: #f7e9ca99; background: #38513bbb; }
.search-field { flex: 1; }
input, textarea, select { width: 100%; color: #30241d; border: 1px solid #c6ad80; border-radius: 6px; background: var(--paper-bright); }
input, select { min-height: 2.7rem; padding: .62rem .72rem; }
textarea { min-height: 10rem; padding: .75rem; line-height: 1.5; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--wine); box-shadow: 0 0 0 3px #722f3730; }

.filters { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; margin-bottom: 1rem; }
.select-label { display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .9rem; }
.select-label select { width: auto; min-height: 2.2rem; padding: .35rem .48rem; }
.language-filter { position: relative; }
.language-filter summary { padding: .52rem .7rem; color: #f7e9ca; list-style: none; cursor: pointer; border: 1px solid #f7e9ca99; border-radius: 6px; background: #38513bbb; }
.language-filter summary::-webkit-details-marker { display: none; }
.language-filter summary::after { margin-left: .5rem; content: "⌄"; }
.language-filter[open] summary::after { content: "⌃"; }
.language-checks { position: absolute; z-index: 2; top: calc(100% + .35rem); left: 0; display: grid; gap: .3rem; width: max-content; min-width: 14rem; max-width: min(23rem, calc(100vw - 3rem)); max-height: 18rem; padding: .7rem; overflow: auto; color: #38271c; border: 1px solid #bca57a; border-radius: 6px; background: #fff9e9; box-shadow: 0 7px 20px #0005; }
.language-choice { display: flex; align-items: center; gap: .5rem; padding: .25rem .2rem; cursor: pointer; }
.language-choice input { width: 1rem; min-height: auto; accent-color: var(--wine); }
.result-summary { margin: 0 0 1rem; color: var(--muted); font-size: .93rem; }

.entry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1.1rem; }
.entry-card { position: relative; min-height: 14rem; padding: 1.15rem; overflow: hidden; color: var(--ink); border-left: 8px solid var(--language-color); border-radius: 5px; background: linear-gradient(90deg, #fff9, transparent 1.2rem), var(--paper); box-shadow: 4px 5px 12px #0005; }
.entry-card h2 { max-width: 100%; margin: 0; color: #52232a; font-size: 1.35rem; }
.entry-card h2 a { color: inherit; text-decoration: none; }
.entry-card h2 a:hover, .entry-card h2 a:focus-visible { text-decoration: underline; }
.entry-card .tag { display: inline-block; max-width: 85%; margin: .5rem 0 .75rem; padding: .22rem .55rem; overflow: hidden; color: var(--tag-color); font: 700 .68rem Arial, sans-serif; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; border-radius: 999px; background: var(--language-color); }
.story { margin: 0; line-height: 1.55; }
.entry-card-tools { position: absolute; top: .6rem; right: .6rem; }
.edit-button { padding: .42rem .55rem; color: var(--wine); font-size: .78rem; border: 1px solid #d7c69e; border-radius: 999px; background: #fff8; }
.edit-button:hover { color: #fff; border-color: var(--moss); background: var(--moss); }
.empty-state { grid-column: 1 / -1; padding: 2.4rem 1rem; color: var(--muted); text-align: center; border: 1px dashed #eadbc0aa; border-radius: 8px; }

.site-footer { width: min(1200px, calc(100% - 2rem)); margin: 0 auto; padding: 0 0 2rem; color: #d8c6a8; font-size: .87rem; text-align: center; }

.modal[hidden], .toast[hidden] { display: none; }
.modal { position: fixed; z-index: 10; inset: 0; display: grid; padding: 1rem; overflow: auto; background: #160d09cc; place-items: center; }
.dialog { width: min(680px, 100%); max-height: calc(100vh - 2rem); padding: clamp(1.1rem, 4vw, 2rem); overflow: auto; color: var(--ink); border: 5px solid var(--wine); border-radius: 7px; background: var(--paper); box-shadow: 0 20px 55px #0008; }
.dialog-wide { width: min(780px, 100%); }
.dialog-narrow { width: min(520px, 100%); }
.dialog-header { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.dialog-header h2 { margin: .35rem 0 0; color: #51252a; font-size: 1.55rem; }
.dialog-note { margin: .4rem 0 0; color: #5a493b; line-height: 1.4; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; }
.field { display: grid; gap: .35rem; color: #4b3527; font-weight: 700; }
.field-full { grid-column: 1 / -1; }
.field-help, .optional { color: #6a594b; font-size: .83rem; font-weight: 400; line-height: 1.35; }
.new-language-box { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr auto; gap: .75rem; align-items: end; padding: .8rem; border: 1px solid #d4bb91; border-radius: 6px; background: #d5af6422; }
.color-field input { width: 4.3rem; height: 2.7rem; padding: .16rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .7rem; margin-top: 1.25rem; }

.stats { display: grid; gap: .75rem; }
.stat-row { display: grid; grid-template-columns: minmax(7rem, .75fr) 2fr auto auto; gap: .65rem; align-items: center; }
.stat-name { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.stat-track { height: .9rem; overflow: hidden; border-radius: 9px; background: #dfd1b3; }
.stat-bar { height: 100%; min-width: 3px; border-radius: inherit; background: var(--bar-color); }
.stat-value { font-variant-numeric: tabular-nums; white-space: nowrap; }

.proposal-list { display: grid; gap: .9rem; }
.proposal-card { padding: 1rem; border: 1px solid #d4bb91; border-radius: 7px; background: #fff9e988; }
.proposal-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.proposal-card h3 { margin: 0; color: #51252a; font-size: 1.2rem; }
.proposal-meta { margin: .2rem 0 0; color: #6a594b; font-size: .86rem; line-height: 1.4; }
.status { display: inline-flex; padding: .25rem .52rem; font: 700 .68rem Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; }
.status-pending { color: #5f4618; background: #f1d58c; }
.status-approved { color: #1f5138; background: #bbdec6; }
.status-rejected { color: #742632; background: #edc4c9; }
.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .85rem; }
.comparison-block { min-width: 0; padding: .72rem; border-left: 4px solid #bda47a; border-radius: 3px; background: #fffdf4; }
.comparison-block.proposed { border-left-color: var(--moss); }
.comparison-title { margin: 0 0 .45rem; color: #72533d; font: 700 .72rem Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.proposal-fields { display: grid; gap: .32rem; margin: 0; font-size: .91rem; line-height: 1.42; }
.proposal-fields div { overflow-wrap: anywhere; }
.proposal-fields dt { display: inline; color: #72533d; font-weight: 700; }
.proposal-fields dd { display: inline; margin: 0; }
.proposal-story { margin: .55rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.review-note { margin: .75rem 0 0; padding: .65rem .75rem; color: #563c2d; border-left: 3px solid #b57838; background: #f6e8ca; line-height: 1.45; }
.proposal-actions { display: flex; justify-content: flex-end; gap: .55rem; margin-top: .8rem; }

.toast { position: fixed; z-index: 30; right: 1rem; bottom: 1rem; max-width: min(27rem, calc(100% - 2rem)); padding: .85rem 1rem; color: #fff8e7; border-radius: 7px; background: #263b2c; box-shadow: var(--shadow); line-height: 1.4; }
.toast.error { background: #7e2732; }
.noscript { padding: 1rem; color: #2a1d16; background: #f6dfaa; text-align: center; }

@media (max-width: 780px) {
  .header-inner, .library-heading { align-items: stretch; flex-direction: column; }
  .header-actions { justify-content: flex-start; }
  .moderation-note, .public-note { max-width: none; text-align: left; }
}

@media (max-width: 640px) {
  .header-inner { width: min(100% - 2rem, 1200px); padding: 1.15rem 0; }
  .brand-icon { width: 3.35rem; height: 3.35rem; }
  .brand-copy strong { font-size: 1.22rem; }
  .subtitle { font-size: .86rem; }
  main { width: min(100% - 1rem, 1200px); margin-top: 1rem; }
  .toolbar { flex-direction: column; }
  .toolbar .secondary-button { width: 100%; }
  .filters { align-items: stretch; flex-direction: column; }
  .select-label { justify-content: space-between; }
  .select-label select, .language-filter { width: 100%; }
  .language-filter summary { text-align: center; }
  .language-checks { position: static; width: 100%; max-width: none; margin-top: .35rem; }
  .form-grid, .comparison { grid-template-columns: 1fr; }
  .field-full { grid-column: auto; }
  .new-language-box { grid-column: auto; grid-template-columns: 1fr; }
  .dialog-actions { align-items: stretch; flex-direction: column-reverse; }
  .dialog-actions button { width: 100%; }
  .stat-row { grid-template-columns: 5.5rem 1fr auto auto; }
  .proposal-card-header { flex-direction: column; }
  .proposal-actions { align-items: stretch; flex-direction: column; }
  .proposal-actions button { width: 100%; }
}