/* Haafingar Wolves field log: parchment, ink and Nordic capitals. */
@font-face { font-family: "Cinzel Decorative"; src: url("/static/fonts/CinzelDecorative-Bold.ttf"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("/static/fonts/Cinzel.ttf"); font-display: swap; }
@font-face { font-family: "IM Fell"; src: url("/static/fonts/IMFeENrm28P.ttf"); font-display: swap; }
@font-face { font-family: "IM Fell"; src: url("/static/fonts/IMFeENit28P.ttf"); font-style: italic; font-display: swap; }

:root {
  --ink: #33200f;
  --faded: rgba(51, 32, 15, .6);
  --red: #731710;
  --leather: #3a2414;
  --paper: #f3e3c3;
}

* { box-sizing: border-box; }
html { background: #2a1a0e; }
body {
  margin: 0; color: var(--ink);
  font: 18px/1.45 "IM Fell", Georgia, serif;
  background: #2a1a0e radial-gradient(ellipse at top, #4a3020, #1d1209 70%) fixed;
  min-height: 100vh;
}
a { color: var(--red); }

/* top bar ----------------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
  background: linear-gradient(#4a2e19, #2d1b0e); border-bottom: 2px solid #8a6a3a;
  box-shadow: 0 2px 10px rgba(0,0,0,.5); position: sticky; top: 0; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #f1dfb4; }
.brand img { width: 40px; height: 40px; filter: invert(.9) sepia(.6) saturate(2) hue-rotate(-10deg); }
.brand b { font: 700 20px "Cinzel Decorative", serif; display: block; line-height: 1; white-space: nowrap; }
.brand small { font: 11px "Cinzel", serif; letter-spacing: .12em; opacity: .8; }
nav { display: flex; align-items: center; gap: 14px; }
nav a, nav .link {
  font: 13px "Cinzel", serif; letter-spacing: .08em; text-transform: uppercase;
  color: #f1dfb4; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer;
}
nav form { margin: 0; }

/* sheets ------------------------------------------------------------------ */
main { max-width: 760px; margin: 0 auto; padding: 16px 12px 48px; }
.sheet {
  position: relative; margin: 0 0 18px; padding: 26px 22px;
  background: var(--paper) url("/static/img/parchment.jpg") center / cover;
  border: 2px solid var(--ink); outline: 1px solid var(--ink); outline-offset: -8px;
  box-shadow: 0 6px 24px rgba(0,0,0,.55);
}
.sheet::before, .sheet::after {
  content: ""; position: absolute; width: 12px; height: 12px; background: var(--ink);
  transform: rotate(45deg); top: -7px; left: -7px;
}
.sheet::after { left: auto; right: -7px; }
.narrow { max-width: 460px; margin-left: auto; margin-right: auto; }
.center { text-align: center; }

h1, h2 { font-family: "Cinzel Decorative", serif; font-weight: 700; text-align: center; margin: 0; }
h1 { font-size: clamp(24px, 6vw, 32px); }
h2 { font-size: 22px; margin-top: 4px; }
.sub { font-style: italic; text-align: center; margin: 4px 0 0; }
.unit { font: 12px "Cinzel", serif; letter-spacing: .14em; color: var(--faded); text-align: center; margin: 4px 0 0; text-transform: uppercase; }
.muted { color: var(--faded); font-style: italic; }

.ornament { position: relative; height: 1px; background: var(--ink); margin: 14px 12% 18px; }
.ornament span {
  position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px;
  background: var(--ink); transform: rotate(45deg); box-shadow: 0 0 0 4px var(--paper);
}
.sheet-head { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 6px; }
.sheet-head img { width: 56px; height: 56px; }
.crest-lg { width: 160px; height: 160px; }

/* forms ------------------------------------------------------------------- */
.stack { display: flex; flex-direction: column; gap: 14px; }
.field span {
  display: block; font: 12.5px "Cinzel", serif; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red); font-weight: 700;
}
.field input, .field textarea, .filters input, .filters select {
  width: 100%; font: italic 19px "IM Fell", Georgia, serif; color: var(--ink);
  background: rgba(255, 248, 230, .35); border: 0; border-bottom: 1px solid var(--faded);
  padding: 6px 6px 4px; border-radius: 0;
}
.field textarea {
  resize: vertical; line-height: 30px; padding-top: 2px;
  background: rgba(255, 248, 230, .25)
    repeating-linear-gradient(transparent 0 29px, var(--faded) 29px 30px);
  background-attachment: local;
}
.field input:focus, .field textarea:focus, .filters input:focus {
  outline: none; background-color: rgba(255, 250, 236, .7); border-bottom-color: var(--red);
}

.btn {
  display: inline-block; font: 700 14px "Cinzel", serif; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; text-align: center; cursor: pointer;
  padding: 10px 16px; border: 1.5px solid var(--ink); background: rgba(255, 248, 230, .45);
  box-shadow: inset 0 0 0 3px rgba(243, 227, 195, .8), inset 0 0 0 4px var(--faded);
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--leather); color: #f1dfb4; box-shadow: inset 0 0 0 3px var(--leather), inset 0 0 0 4px #b08a50; }
.btn.danger { color: var(--red); border-color: var(--red); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.actions form { margin: 0; }
.new-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

.filters { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 14px 0; }
@media (min-width: 560px) { .filters { grid-template-columns: 180px 1fr auto; } }

.error { color: var(--red); font-weight: bold; text-align: center; }
.ok { color: #2d5a2d; font-weight: bold; text-align: center; }

/* ledger ------------------------------------------------------------------ */
.ledger { list-style: none; padding: 0; margin: 0; }
.ledger li { border-bottom: 1px solid var(--faded); }
.ledger a { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 10px 4px; text-decoration: none; color: var(--ink); }
.ledger .kind { font: 11px "Cinzel", serif; letter-spacing: .12em; text-transform: uppercase; color: var(--red); grid-column: 1; }
.ledger .title { grid-column: 1; font-size: 19px; }
.ledger .date { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: italic; color: var(--faded); white-space: nowrap; }

/* filled report ----------------------------------------------------------- */
.filled dt { font: 700 12.5px "Cinzel", serif; letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-top: 12px; }
.filled dd { margin: 2px 0 0; padding: 0 6px 4px; font-style: italic; font-size: 19px; border-bottom: 1px solid var(--faded); white-space: pre-wrap; overflow-wrap: anywhere; }
.discord {
  width: 100%; margin-top: 10px; font: 14px/1.4 ui-monospace, Menlo, Consolas, monospace;
  color: var(--ink); background: rgba(255, 248, 230, .55); border: 1px solid var(--faded); padding: 10px;
}

@media (max-width: 480px) {
  body { font-size: 17px; }
  .sheet { padding: 22px 14px; }
  .sheet-head { grid-template-columns: 38px 1fr 38px; }
  .sheet-head img { width: 38px; height: 38px; }
  .brand small { display: none; }
  .brand b { font-size: 17px; }
  .brand img { width: 34px; height: 34px; }
  nav { gap: 10px; }
  nav a, nav .link { font-size: 12px; letter-spacing: .04em; }
  .btn { flex: 1 1 auto; }
}