/* Media Guide Maker. The same look as the other free suite tools (navy bar, red and white stripe),
   kept in this folder so the tool can move to its own repo on its own. System fonts only. */
:root {
  --navy: #1b2a4a; --red: #b22234; --ink: #1d2433; --muted: #59627a; --line: #d5dae3; --bg: #f3f5f9; --card: #fff;
  --warnbg: #fff7e0; --warnline: #c99a1a; --okbg: #e8f4ea; --okline: #2e7d32;
  --longbg: #fff1b8; --jbg: #fde2e4; --jline: #b22234; --pline: #2f5fb8; --flash: #ffd24d; --link: #1b2a4a;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e8ecf3; --muted: #a9b2c2; --line: #3a4458; --bg: #141a26; --card: #1e2636;
    --warnbg: #3a3218; --okbg: #1d3322; --longbg: #4a3f12; --jbg: #4d2228; --jline: #ff8a95; --pline: #8fb3ff; --flash: #8a6d00; --link: #9fb7ea;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #e8ecf3; --muted: #a9b2c2; --line: #3a4458; --bg: #141a26; --card: #1e2636;
  --warnbg: #3a3218; --okbg: #1d3322; --longbg: #4a3f12; --jbg: #4d2228; --jline: #ff8a95; --pline: #8fb3ff; --flash: #8a6d00; --link: #9fb7ea;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.5; font-size: 16px; overflow-wrap: anywhere; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.mast { background: var(--navy); color: #fff; }
.mast .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; min-height: 56px; gap: 4px 12px; padding-top: 6px; padding-bottom: 6px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; }
.brand svg { width: 24px; height: 24px; flex: none; }
.tool { font-weight: 700; opacity: .9; }
/* Right side of the header (Fred, 3:44 PM ET 11-05): the app's own buttons, then the account badge,
   then the 9 dots. Signed in, suite-look.js moves the tool's name to the title and hides .tool. */
.who { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.stripe { height: 8px; background: repeating-linear-gradient(90deg, var(--red) 0 40px, #fff 40px 52px); }
h1 { font-size: 28px; line-height: 1.2; margin: 18px 0 6px; }
h2 { font-size: 20px; margin: 0 0 10px; }
h3 { font-size: 16px; margin: 0 0 8px; }
.lede { margin: 0 0 12px; color: var(--muted); max-width: 70ch; }
.beta { margin: 16px 0 0; padding: 8px 12px; background: var(--warnbg); border-left: 4px solid var(--warnline); border-radius: 4px; font-size: 14px; }
.private { margin: 0 0 16px; padding: 10px 12px; background: var(--okbg); border-left: 4px solid var(--okline); border-radius: 4px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px 16px; margin: 0 0 16px; min-width: 0; }
label { display: block; font-weight: 700; font-size: 14px; margin: 0 0 4px; }
label.inline { display: inline; margin: 0; font-size: 16px; font-weight: 400; }
textarea, input { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); min-height: 44px; }
textarea { resize: vertical; min-height: 200px; line-height: 1.5; }
.hint { font-size: 14px; color: var(--muted); margin: 8px 0 0; }
.buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
button { font: inherit; font-weight: 700; border-radius: 6px; padding: 10px 16px; min-height: 44px; cursor: pointer; border: 2px solid var(--navy); background: var(--navy); color: #fff; }
button.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
button.link { background: none; border: 0; padding: 4px 0; min-height: 32px; color: var(--link); text-decoration: underline; font-weight: 400; }
button.use { padding: 6px 12px; min-height: 40px; font-size: 15px; }
button:disabled { opacity: .5; cursor: default; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) button:not(.secondary):not(.link) { background: #3b5b9a; border-color: #3b5b9a; } }
:root[data-theme="dark"] button:not(.secondary):not(.link) { background: #3b5b9a; border-color: #3b5b9a; }
button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #4d7bd6; outline-offset: 2px; }
.status { min-height: 1.5em; margin: 8px 0 0; font-size: 15px; }
.keep { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.keep .hint { margin-top: 0; }
.hint.top { margin: 0 0 6px; }
.hint.warnline, .keep .hint.warnline { color: var(--ink); background: var(--warnbg); border-left: 4px solid var(--warnline); border-radius: 4px; padding: 6px 10px; }
.tips ul { margin: 0; padding-left: 1.2em; }
.tips li { margin: 4px 0; }
.foot { margin-top: 32px; padding: 18px 0 28px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.foot a { color: inherit; }
.foot .thanks { color: var(--ink); font-size: 14px; }
select { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); min-height: 44px; }
textarea { min-height: 0; }
#intro, .sec-body > textarea { min-height: 88px; }
label.gap { margin-top: 12px; }
label.check { display: flex; align-items: center; gap: 10px; font-weight: 400; font-size: 16px; min-height: 44px; margin: 0; cursor: pointer; }
label.check input { width: 22px; height: 22px; min-height: 0; flex: none; margin: 0; }
button.danger { color: var(--red); }
button.small { padding: 6px 12px; min-height: 40px; font-size: 15px; }
button.icon { width: 44px; padding: 0; font-size: 18px; }

/* The form on the left, the download box and preview on the right; one column on an iPad held
   upright (820 px) and narrower, with the preview after the form. */
.layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.side { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sec-head h2 { margin: 0; }
.sec-body { margin-top: 8px; }
.sec-body > label { margin-top: 4px; }
.logo-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.logo-box { width: 180px; height: 90px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; flex: none; }
.logo-box img { max-width: 160px; max-height: 76px; }
.colors { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 12px; }
.colors label { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.colors input { width: 56px; height: 44px; padding: 2px; }

/* Contact people and table rows */
.person { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.person .row-tools { grid-column: 1 / -1; }
.rows { margin-top: 10px; }
.row { display: grid; grid-template-columns: var(--cols) auto; gap: 8px; align-items: end; padding: 6px 0; border-bottom: 1px solid var(--line); }
.row .cell label { font-size: 13px; }
.row label.sr-wide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.row textarea { resize: vertical; }
.row-tools { display: flex; gap: 4px; }
.row textarea { min-height: 44px; }
.jump { display: none; margin: 10px 0 0; }
.jump a { color: var(--link); font-weight: 700; display: inline-block; min-height: 32px; }

/* Download box */
.get .steps { margin: 8px 0 0; padding-left: 1.4em; }
.get .steps li { margin: 4px 0; }

/* Preview: pages drawn small, in the guide's own colors. */
.paper { --main: #1b2a4a; --accent: #c9a227; display: flex; flex-direction: column; gap: 14px; }
.page { background: #fff; color: #1d2433; border: 1px solid var(--line); box-shadow: 0 1px 4px rgba(0,0,0,.12); padding: 22px 24px; font-size: 13px; line-height: 1.45; border-radius: 2px; }
.page p { margin: 0 0 6px; }
.page ul { margin: 0 0 8px; padding-left: 1.4em; }
.page .p-h1 { color: var(--main); font-size: 20px; margin: 0 0 2px; }
.page .p-sub { color: #59627a; margin-bottom: 12px; }
.page .p-h2 { color: var(--main); font-size: 16px; margin: 16px 0 6px; }
.page .p-h3 { color: var(--main); font-size: 14px; margin: 12px 0 4px; }
.page .p-i { font-style: italic; }
.page .p-b { font-weight: 700; margin-bottom: 2px; }
.page .p-fields { margin-bottom: 8px; }
.page .p-fields p { margin: 0 0 2px; }
.page mark { background: #ffe58a; color: inherit; padding: 0 2px; }
.p-tablewrap { overflow-x: auto; margin-bottom: 10px; }
.page table { border-collapse: collapse; width: 100%; font-size: 12px; }
.page th { background: var(--main); color: #fff; text-align: left; }
.page th, .page td { border: 1px solid #a6aebb; padding: 3px 5px; vertical-align: top; }
.page.cover { background: var(--main); color: #fff; min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 40px 24px; }
.cover img { max-width: 60%; max-height: 90px; margin-bottom: 10px; }
.cover .c-title { font-size: 34px; letter-spacing: .02em; }
.cover .c-bar { display: block; width: 80%; height: 7px; background: var(--accent); }
.cover .c-name { font-size: 20px; }
.cover .c-date { font-size: 16px; }
.cover .c-office { font-size: 14px; margin-top: 24px; }

@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  .side { position: static; max-height: none; overflow: visible; }
  .jump { display: block; }
}
@media (max-width: 640px) {
  h1 { font-size: 24px; }
  .two, .person { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; }
  .row label.sr-wide { position: static; width: auto; height: auto; clip: auto; }
  .buttons button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* Suite page-width standard (task 75): header full width, the tool up to 1440px. */
.wrap { max-width: 1440px; padding-left: 24px; padding-right: 24px; }
.mast .wrap { max-width: none; }
@media (max-width: 640px) { .wrap { padding-left: 12px; padding-right: 12px; } }

/* "How people vote": three choices, each a full-width tap target (iPad). */
fieldset.voting { border: 1px solid var(--line, #d0d5dd); border-radius: 8px; padding: 10px 14px 6px; margin: 16px 0 0; }
fieldset.voting legend { font-weight: 600; padding: 0 6px; }
fieldset.voting label.check { align-items: flex-start; padding: 6px 0; }
fieldset.voting label.check input { margin-top: 2px; }
.hint.inline { display: inline; font-size: 14px; margin: 0; }