/* Submit a mod (AoE3 Decomp Online): the same parchment-and-wood look as ADO Home (../ado/). */
:root {
  --wood-1: #2a1a0e; --wood-2: #3b2414; --wood-3: #4a2e19; --wood-edge: #120a04;
  --gold: #c9a24a; --gold-soft: #e7cf8a; --red: #7a1f12; --red-deep: #5a150b;
  --parch-1: #efe0b9; --parch-2: #e3cd97; --parch-3: #d4b778; --ink: #2b1d10; --ink-soft: #5b4329;
  --ok: #2f6b1f; --bad: #8a1d10; --wait: #8a6414; --unknown: #6b5536;
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
}
* { box-sizing: border-box; }
html { background: var(--wood-1); }
body {
  margin: 0; color: var(--ink); font: 17px/1.55 var(--serif);
  background-color: var(--wood-2);
  background-image:
    repeating-linear-gradient(92deg, rgba(0,0,0,.10) 0 2px, transparent 2px 9px, rgba(255,220,160,.035) 9px 11px, transparent 11px 23px),
    linear-gradient(180deg, var(--wood-3), var(--wood-1));
  min-height: 100vh; padding: 28px 16px 40px;
}
.frame {
  max-width: 880px; margin: 0 auto; border: 3px solid var(--wood-edge); border-radius: 6px;
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 5px var(--wood-edge), 0 18px 50px rgba(0,0,0,.6);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,250,230,.55), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(120,80,30,.22), transparent 55%),
    linear-gradient(180deg, var(--parch-1), var(--parch-2) 70%, var(--parch-3));
}
header {
  display: flex; align-items: center; gap: 18px; padding: 18px 24px;
  background: linear-gradient(180deg, var(--red), var(--red-deep)); color: var(--gold-soft);
  border-bottom: 2px solid var(--gold); border-radius: 3px 3px 0 0;
}
header img { width: 76px; height: 76px; flex: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
header h1 { margin: 0; font-size: 1.9rem; line-height: 1.15; font-weight: normal; font-variant: small-caps;
            letter-spacing: .02em; text-shadow: 0 2px 2px rgba(0,0,0,.55); }
header p { margin: 4px 0 0; font-style: italic; color: #f3e3b6; opacity: .9; }
main { padding: 6px 28px 24px; }
section { padding: 18px 0 8px; }
section + section { border-top: 1px solid rgba(91,67,41,.35); }
h2 { margin: 0 0 10px; font-size: 1.35rem; font-weight: normal; font-variant: small-caps; letter-spacing: .03em; color: var(--red); }
h2::after { content: ""; display: block; width: 72px; height: 2px; margin-top: 4px; background: linear-gradient(90deg, var(--gold), transparent); }
h3 { margin: 14px 0 6px; font-size: 1.08rem; font-variant: small-caps; letter-spacing: .03em; color: var(--ink); }
p { margin: 0 0 10px; }
a { color: var(--red); text-underline-offset: 2px; }
a:hover { color: var(--red-deep); }
ul.rules, ol.steps { margin: 0 0 10px; padding-left: 22px; }
ul.rules li, ol.steps li { padding-left: 4px; margin-bottom: 4px; }
ol.steps li::marker { color: var(--red); font-weight: bold; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .86em; background: rgba(91,67,41,.12);
       padding: 1px 4px; border-radius: 3px; overflow-wrap: anywhere; }
.panel { background: rgba(255,250,235,.45); border: 1px solid rgba(91,67,41,.4); border-radius: 4px; padding: 14px 16px; margin: 8px 0 12px; }
label { display: block; font-variant: small-caps; letter-spacing: .03em; color: var(--ink-soft); margin: 8px 0 4px; }
label.check { display: flex; gap: 8px; align-items: center; font-variant: normal; letter-spacing: 0; color: var(--ink); }
input[type=email], input[type=text], textarea, input[type=file] {
  width: 100%; max-width: 32rem; font: inherit; color: var(--ink); padding: 6px 9px;
  background: #fbf3dc; border: 1px solid #8a6a3e; border-radius: 3px; box-shadow: inset 0 1px 2px rgba(0,0,0,.15);
}
input[type=file] { padding: 5px; }
textarea { min-height: 5.5em; resize: vertical; }
input:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
button {
  font: inherit; font-variant: small-caps; letter-spacing: .03em; cursor: pointer; color: var(--gold-soft);
  padding: 6px 16px; border-radius: 3px; border: 1px solid var(--wood-edge);
  background: linear-gradient(180deg, var(--red), var(--red-deep)); box-shadow: inset 0 0 0 1px rgba(201,162,74,.6);
}
button:hover { color: #fff3cf; }
button.quiet { color: var(--ink); background: linear-gradient(180deg, #f1e2bb, #d9c08a); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
button:disabled { opacity: .55; cursor: default; }
.msg { min-height: 1.4em; margin: 8px 0 0; font-style: italic; color: var(--ink-soft); }
.msg.err { color: var(--bad); font-style: normal; }
.msg.ok { color: var(--ok); }
.who { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; }
.who b { font-size: 1.05rem; }
.subs { list-style: none; margin: 0; padding: 0; }
.subs li { border: 1px solid rgba(91,67,41,.4); border-radius: 4px; background: rgba(255,250,235,.5); padding: 10px 14px; margin-bottom: 10px; }
.subs .top { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.subs .name { font-weight: bold; }
.subs dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 8px 0 0; font-size: .92rem; }
.subs dt { color: var(--ink-soft); font-variant: small-caps; }
.subs dd { margin: 0; overflow-wrap: anywhere; }
.subs .note { white-space: pre-wrap; }
.badge { display: inline-block; padding: 0 8px; border-radius: 10px; font-size: .85rem; font-variant: small-caps; letter-spacing: .03em; color: #fff7e0; background: var(--unknown); }
.badge.pending { background: var(--wait); } .badge.approved { background: var(--ok); }
.badge.rejected { background: var(--bad); } .badge.changes_requested { background: #9a4a12; }
.badge.native { background: #3d3f6b; }
.empty { color: var(--ink-soft); font-style: italic; }
[hidden] { display: none !important; }
footer { padding: 12px 28px 18px; color: var(--ink-soft); font-size: .85rem; border-top: 1px solid rgba(91,67,41,.35); }
@media (max-width: 560px) {
  body { padding: 16px 16px 28px; font-size: 16px; }
  header { padding: 14px 16px; gap: 12px; }
  header img { width: 54px; height: 54px; }
  header h1 { font-size: 1.45rem; }
  main { padding: 4px 16px 16px; }
  footer { padding: 10px 16px 14px; }
}