:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #283223;
  background: #f4eedf;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #f4eedf; }
body { min-height: 100vh; margin: 0; line-height: 1.5; background: #f4eedf url("topography.svg") center 3rem / min(90rem, 150vw) auto repeat-y; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.skip-link { position: fixed; z-index: 10; top: .75rem; left: .75rem; padding: .65rem .85rem; border-radius: .5rem; background: #273f2d; color: #fffdf5; font-weight: 800; text-decoration: none; transform: translateY(calc(-100% - 1rem)); }
.skip-link:focus { transform: translateY(0); }

.site-header { border-bottom: 1px solid rgb(53 70 43 / 20%); background: rgb(255 252 243 / 92%); backdrop-filter: blur(8px); }
.site-header__inner, .app-shell { width: min(100% - 32px, 72rem); margin-inline: auto; }
.site-header__inner { min-height: 4.1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: baseline; gap: .45rem; color: #526a36; text-decoration: none; letter-spacing: -.035em; }
.brand__name { font-size: 1.38rem; font-weight: 900; line-height: 1; }
.brand sup { margin-left: .1rem; color: #bf780d; font-size: .52em; letter-spacing: 0; }
.brand__place { color: #9c650e; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.site-header__label { color: #5d614f; font-size: .82rem; font-weight: 700; text-align: right; }

.app-shell { padding-block: clamp(2rem, 5vw, 4.5rem); }
.page-intro { max-width: 48rem; margin-bottom: 2rem; }
.eyebrow { margin: 0 0 .45rem; color: #9e6304; font-size: .74rem; font-weight: 850; letter-spacing: .095em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { max-width: 20ch; margin-bottom: .55rem; color: #35462b; font-size: clamp(1.9rem, 3.8vw, 3.15rem); font-weight: 850; letter-spacing: -.048em; line-height: 1.02; }
h2 { margin-bottom: 0; color: #3e512f; font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.page-intro__copy { max-width: 66ch; margin-bottom: 0; color: #59604d; font-size: 1rem; }

.notice { margin: 0 0 1.25rem; padding: .8rem 1rem; border: 1px solid; border-radius: .65rem; box-shadow: 0 .25rem .75rem rgb(47 60 34 / 7%); }
.notice--success { border-color: #b8d6ae; background: #ecf4e7; color: #284d2e; }
.notice--error { border-color: #e6b8a7; background: #fcede7; color: #742d1e; }

.dashboard-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; }
.dashboard-actions__summary { display: flex; align-items: baseline; gap: .45rem; color: #646b57; font-size: .9rem; }
.dashboard-actions__summary strong { color: #9e6304; font-size: 1.5rem; line-height: 1; }
.logout-form { display: block; }

.panel, .auth-card { position: relative; overflow: hidden; margin: 0 0 1.5rem; padding: clamp(1.15rem, 3vw, 2rem); border: 1px solid rgb(84 102 57 / 25%); border-radius: 1rem; background: rgb(255 253 246 / 94%); box-shadow: 0 1rem 2.5rem rgb(47 60 34 / 10%); }
.panel--upload { margin-bottom: 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.2rem; }
.section-heading__help { max-width: 34ch; margin-bottom: 0; color: #68705c; font-size: .87rem; text-align: right; }

form { display: grid; gap: 1rem; }
form p { margin-bottom: 0; }
label { display: grid; gap: .35rem; color: #414b37; font-size: .9rem; font-weight: 750; }
label span { color: #aa6800; }
input, textarea { width: 100%; min-height: 2.75rem; padding: .65rem .72rem; border: 1px solid #aab09b; border-radius: .52rem; background: #fffef9; color: #273021; transition: border-color 140ms ease, box-shadow 140ms ease; }
input[type="file"] { padding: .48rem; font-size: .88rem; }
textarea { min-height: 7.2rem; resize: vertical; }
small { display: block; margin-top: .35rem; color: #6b725f; font-size: .78rem; font-weight: 500; line-height: 1.35; }
code { color: #665519; font-size: .86em; overflow-wrap: anywhere; }
input:hover, textarea:hover { border-color: #788765; }
input:focus, textarea:focus { border-color: #a66d0a; box-shadow: 0 0 0 3px rgb(202 142 36 / 23%); outline: 0; }
:focus-visible { outline: 3px solid #a66d0a; outline-offset: 3px; }

button { min-height: 2.65rem; padding: .64rem 1rem; border: 1px solid #40592f; border-radius: .5rem; background: #40592f; color: #fffdf5; font-weight: 780; line-height: 1.2; transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease; }
button:hover { border-color: #2c4524; background: #2c4524; }
button:active { transform: translateY(1px); }
.button--quiet { min-height: 2.3rem; border-color: #8b9779; background: transparent; color: #46593a; font-size: .86rem; }
.button--quiet:hover { border-color: #526a36; background: #eff3e7; color: #344a2c; }

.table-filter { width: min(100%, 17rem); }
.table-filter input { min-height: 2.4rem; font-size: .87rem; }
.filter-result { min-height: 1.3em; margin-bottom: .65rem; color: #68705c; font-size: .83rem; }
.table-wrap { max-height: 29rem; overflow: auto; border: 1px solid #d6dacb; border-radius: .65rem; background: #fffef9; scrollbar-color: #9aa68a #edf0e6; }
table { width: 100%; min-width: 45rem; border-collapse: collapse; }
caption { text-align: left; }
th, td { padding: .8rem .85rem; border-bottom: 1px solid #e1e4d9; text-align: left; vertical-align: middle; }
th { position: sticky; z-index: 1; top: 0; background: #eaf0e1; color: #40592f; font-size: .76rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
tbody tr { transition: background-color 120ms ease; }
tbody tr:hover { background: #f6f8ef; }
tbody tr:last-child td { border-bottom: 0; }
.table-actions form { display: block; }
.table-actions button { min-height: 2.2rem; padding: .48rem .68rem; font-size: .82rem; white-space: nowrap; }
.publication-status { display: inline-flex; padding: .22rem .55rem; border-radius: 999px; font-size: .77rem; font-weight: 800; white-space: nowrap; }
.is-published { background: #dfefda; color: #27522e; }
.is-unpublished { background: #f6e3d9; color: #873820; }
.empty-state { margin: .3rem 0 0; color: #68705c; }

fieldset { min-width: 0; margin: 0; padding: 1rem; border: 1px solid #d3d8c6; border-radius: .7rem; background: #fcfdf8; }
legend { padding: 0 .35rem; color: #41562f; font-size: .92rem; font-weight: 850; }
.metadata-fields { padding-top: 1.1rem; }
.form-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(8rem, 1fr) minmax(10rem, 1fr); gap: 1rem; }
.language-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.language-fields { display: grid; align-content: start; gap: .9rem; }
.language-fields legend span { margin-left: .25rem; color: #737c65; font-size: .78rem; font-weight: 650; }
.language-fields--es { border-top: 3px solid #bf780d; }
.language-fields--pt { border-top: 3px solid #6b7c2d; }
.language-fields--en { border-top: 3px solid #526a61; }
.form-submit { display: flex; align-items: center; gap: 1rem; margin-top: .1rem; }
.form-submit p { margin-bottom: 0; color: #64705a; font-size: .84rem; }

.auth-card { width: min(100%, 28rem); padding-top: 1.45rem; }
.auth-card__accent { width: 4.75rem; height: .28rem; margin-bottom: 1rem; border-radius: 99px; background: #bf780d; }
.auth-card h2 { margin-bottom: 1.25rem; }
.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; }

@media (max-width: 860px) {
  .language-grid { grid-template-columns: 1fr; }
  .language-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .language-fields p:first-of-type { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .site-header__inner, .app-shell { width: min(100% - 24px, 72rem); }
  .site-header__label { display: none; }
  .page-intro { margin-bottom: 1.5rem; }
  h1 { font-size: clamp(1.8rem, 10vw, 2.45rem); }
  .dashboard-actions, .section-heading, .form-submit { align-items: stretch; flex-direction: column; }
  .dashboard-actions .logout-form { align-self: flex-start; }
  .section-heading__help { max-width: none; text-align: left; }
  .table-filter { width: 100%; }
  .panel, .auth-card { padding: 1rem; border-radius: .8rem; }
  .form-grid, .language-fields { grid-template-columns: 1fr; }
  .language-fields p:first-of-type { grid-column: auto; }
  .form-submit button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
