/* Shared styles for donut /admin pages — burn.cy design language.
   Page-specific rules stay in each template's inline <style>. */

@font-face {
  font-family: 'Jost';
  src: url('fonts/Jost-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg: #FDFAF6;
  --color-bg-alt: #F2EDE4;
  --color-text: #0F1F3C;
  --color-muted: rgba(15, 31, 60, 0.65);
  --color-accent: #0ABFBF;
  --color-white: #FFFFFF;
  --color-border: rgba(15, 31, 60, 0.12);
  --color-danger: #b00020;
  --radius-md: 8px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  font-family: 'Jost', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-bg);
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

h1 { font-size: 1.75rem; line-height: 1.15; margin: 0 0 16px; }
h2 { font-size: 1.3rem; margin: 24px 0 12px; }

a { color: var(--color-text); }
a:hover { color: var(--color-accent); }

input, select, textarea {
  font: inherit;
  font-size: 16px; /* below this iOS zooms on focus */
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-text);
}

button {
  font: inherit;
  font-size: 16px;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.2s ease-in-out;
}
button:hover { border-color: var(--color-accent); }

fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px;
  margin: 0 0 12px;
}
fieldset legend { font-weight: 600; padding: 0 6px; }
fieldset label { display: inline-block; margin-right: 16px; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 16px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border); white-space: nowrap; }

img.thumb { height: 48px; width: auto; border-radius: 4px; display: block; margin: 2px 0; }
audio { display: block; max-width: 220px; }

ul.links { list-style: none; padding: 0; margin: 0 0 24px; }
ul.links li { padding: 12px 0; border-bottom: 1px solid var(--color-border); }
ul.links a { font-size: 1.15em; font-weight: 600; text-decoration: none; }
ul.links span { color: var(--color-muted); margin-left: 12px; font-size: 0.9em; }

.back { display: inline-block; margin-bottom: 16px; }
.error, .negative { color: var(--color-danger); }

/* Desktop: tables use the full page width; form controls stay readable. */
@media (min-width: 1024px) {
  body { max-width: none; padding-left: 32px; padding-right: 32px; }
  input, select, textarea, fieldset { max-width: 720px; }
}