/* md2docx — "Composing Room" design system.
   Source world (what you type) speaks in mono; set world (output) in serif;
   one ink-blue does all the emphasis. Fonts self-hosted under /static/fonts. */

@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/static/fonts/fraunces-400.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/static/fonts/fraunces-600.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 900;
  font-display: swap; src: url('/static/fonts/fraunces-900.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/static/fonts/plexsans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/static/fonts/plexsans-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/static/fonts/plexmono-400.woff2') format('woff2'); }

:root {
  --page: #EEF1F3; --card: #FFFFFF; --ink: #1A1C1E; --blue: #274974;
  --blue-hover: #1C3557; --rule: #D5DBDF; --muted: #5D6B73; --brick: #A23B2E;
  --warn: #FBF6EC; --tint: #F1F4F6; --focus: #274974;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---- shell: one centered press sheet ---- */
.masthead {
  max-width: 60rem; margin: 1.75rem auto 0; padding: 1.1rem 1.6rem .85rem;
  background: var(--card); border: 1px solid var(--rule); border-bottom: 0;
  border-radius: 10px 10px 0 0;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem 1rem; flex-wrap: wrap;
}
.wordmark { font-size: 1.5rem; letter-spacing: -.01em; white-space: nowrap;
  text-decoration: none; }
.wordmark .md { font-family: var(--mono); font-weight: 400; color: var(--ink); }
.wordmark .arrow { color: var(--blue); margin: 0 .28em; font-family: var(--sans); }
.wordmark .docx { font-family: var(--serif); font-weight: 900; font-style: italic;
  color: var(--ink); }

nav.tabs { display: flex; gap: .15rem; font-size: .9rem; margin-left: auto; }
nav.tabs a {
  text-decoration: none; color: var(--muted); padding: .3rem .7rem;
  border-radius: 6px 6px 0 0; border-bottom: 2px solid transparent;
}
nav.tabs a:hover { color: var(--ink); }
nav.tabs a.active { color: var(--blue); border-bottom-color: var(--blue);
  font-weight: 600; }

form.logout { margin: 0 0 0 .5rem; }
form.logout button {
  font: inherit; font-size: .82rem; color: var(--muted); background: none;
  border: 1px solid var(--rule); border-radius: 6px; padding: .25rem .7rem;
  cursor: pointer;
}
form.logout button:hover { color: var(--ink); border-color: var(--muted); }

.sheet {
  max-width: 60rem; margin: 0 auto 3rem; padding: 1.5rem 1.6rem 2rem;
  background: var(--card); border: 1px solid var(--rule); border-top: 0;
  border-radius: 0 0 10px 10px;
}
.sheet.plain { border-top: 1px solid var(--rule); border-radius: 10px;
  margin-top: 1.75rem; }

/* ---- typographic devices ---- */
h2.hd { font-family: var(--serif); font-weight: 600; font-size: 1.5rem;
  letter-spacing: -.01em; margin: 0 0 .15rem; text-wrap: balance; }
.sub { color: var(--muted); font-size: .9rem; margin: .1rem 0 0; }
.eyebrow {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blue); font-weight: 400;
  display: flex; align-items: center; gap: .7rem; margin: 1.9rem 0 .7rem;
}
.eyebrow:first-of-type { margin-top: .4rem; }
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* ---- forms ---- */
form.stack { display: block; }
.field { margin: 0 0 .2rem; }
label.lbl { display: block; font-weight: 600; font-size: .9rem;
  margin-bottom: .35rem; }
input[type=text], input[type=password], input[list], select, textarea {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--rule);
  border-radius: 7px; font: inherit; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--blue);
}
textarea { font-family: var(--mono); font-size: .9rem; line-height: 1.5;
  min-height: 12rem; background: #FBFCFD; resize: vertical; }
.hint { color: var(--muted); font-size: .82rem; margin: .4rem 0 0; }

.combo { position: relative; }
/* leading magnifier marks this as a search field */
.combo::before {
  content: "\2315"; position: absolute; left: .8rem; top: 50%;
  transform: translateY(-50%); color: var(--blue); pointer-events: none;
  font-size: 1.05rem; z-index: 1;
}
/* the template search box is styled explicitly (the input has role=combobox,
   no type=text, so the base input rule doesn't reach it): mono like the rest
   of the source/data world, a chip tint that lifts to white on focus. */
.combo input {
  width: 100%; padding: .6rem 2.2rem .6rem 2.3rem;
  border: 1px solid var(--rule); border-radius: 7px;
  font-family: var(--mono); font-size: .92rem;
  background: var(--tint); color: var(--ink);
}
.combo input::placeholder { color: var(--muted); font-family: var(--mono); }
.combo input:focus {
  outline: 2px solid var(--focus); outline-offset: 1px;
  border-color: var(--blue); background: #fff;
}
/* clear-search (×): only shown when the box has text */
.combo-clear {
  position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
  z-index: 2; display: none; border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 1.2rem; line-height: 1; padding: .1rem .35rem;
  border-radius: 6px;
}
.combo-clear:hover { color: var(--ink); background: var(--tint); }
.combo-clear:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.combo.has-text .combo-clear { display: block; }
.combo-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: .25rem; list-style: none; background: #fff;
  border: 1px solid var(--rule); border-radius: 8px; max-height: 15rem;
  overflow-y: auto; box-shadow: 0 6px 24px rgba(26, 28, 30, .12);
}
.combo-list[hidden] { display: none; }
.combo-list li {
  padding: .45rem .6rem; border-radius: 6px; cursor: pointer; font-size: .92rem;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.combo-list li .cname { font-weight: 600; }
.combo-list li .note { color: var(--muted); font-size: .78rem;
  font-family: var(--mono); text-align: right; }
.combo-list li:hover { background: var(--tint); }
.combo-list li.active { background: var(--blue); color: #fff; }
.combo-list li.active .note { color: #DBE6F2; }
.combo-list .empty { color: var(--muted); font-size: .85rem; padding: .45rem .6rem; }

/* file uploader: style the native "browse" control */
input[type=file] { font-size: .85rem; color: var(--muted); }
input[type=file]::file-selector-button {
  font: inherit; font-weight: 600; font-size: .85rem; margin-right: .8rem;
  color: var(--blue); background: #fff; border: 1px solid var(--blue);
  border-radius: 7px; padding: .4rem .9rem; cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--tint); }

/* secondary button (e.g. row "Styles") */
button.btn {
  font: inherit; font-size: .85rem; font-weight: 600; color: var(--blue);
  background: #fff; border: 1px solid var(--rule); border-radius: 6px;
  padding: .3rem .8rem; cursor: pointer;
}
button.btn:hover { border-color: var(--blue); }

.dropzone {
  border: 1.5px dashed var(--rule); border-radius: 8px; padding: 1.1rem;
  text-align: center; color: var(--muted); font-size: .9rem; background: #FBFCFD;
}
.dropzone.drag { border-color: var(--blue); background: var(--tint); color: var(--ink); }
.dropzone b { color: var(--ink); font-weight: 600; }
.dropzone input[type=file] { margin-top: .5rem; }

details { margin-top: .5rem; }
summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--blue); }
summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cover-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
  margin-top: .8rem; }
.cover-grid label.lbl { font-weight: 400; color: var(--muted); font-size: .8rem; }
@media (max-width: 34rem) { .cover-grid { grid-template-columns: 1fr; } }

.actions { margin-top: 1.8rem; display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap; }
button.press {
  font: inherit; font-weight: 600; font-size: 1rem; color: #fff;
  background: var(--blue); border: 0; border-radius: 8px; padding: .7rem 1.5rem;
  cursor: pointer; display: inline-flex; align-items: center; gap: .5rem;
  box-shadow: 0 1px 0 var(--blue-hover);
}
button.press .ar { font-family: var(--serif); font-style: italic; }
button.press:hover { background: var(--blue-hover); }
button.press:disabled { opacity: .5; cursor: default; }
.pill { display: inline-block; font-family: var(--mono); font-size: .7rem;
  color: var(--blue); border: 1px solid var(--rule); border-radius: 20px;
  padding: .15rem .6rem; background: var(--tint); }

/* ---- tables ---- */
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; margin-top: 1rem;
  font-size: .9rem; }
thead th {
  text-align: left; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  font-weight: 400; padding: .4rem .7rem; border-bottom: 1.5px solid var(--rule);
  white-space: nowrap;
}
tbody td { padding: .65rem .7rem; border-bottom: 1px solid var(--rule);
  vertical-align: middle; }
tbody tr:hover { background: #F7F9FA; }
th.col-name, td.name { width: 34%; }
td.name { font-weight: 600; }
td.uploaded { white-space: nowrap; }
.uploaded-sha { display: block; margin-top: .25rem; }
.uploaded-sha code { font-size: .72rem; }
code { font-family: var(--mono); font-size: .82rem; color: var(--muted);
  background: var(--tint); padding: .1rem .35rem; border-radius: 4px; }
a.rowlink { color: var(--blue); text-decoration: none; font-weight: 600;
  font-size: .85rem; }
a.rowlink:hover { text-decoration: underline; }
button.delete {
  font: inherit; font-size: .82rem; color: var(--brick); background: none;
  border: 1px solid var(--rule); border-radius: 6px; padding: .25rem .6rem;
  cursor: pointer; margin-left: .4rem;
}
button.delete:hover { border-color: var(--brick); }

/* ---- messages ---- */
.warnings, .error {
  border-left: 3px solid var(--blue); background: var(--warn);
  padding: .6rem .85rem; border-radius: 0 6px 6px 0; margin-top: 1.2rem;
  font-size: .88rem;
}
.warnings ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.error { border-left-color: var(--brick); background: #FBEEEC; }
#status { color: var(--muted); font-size: .88rem; margin-top: .8rem;
  min-height: 1.2em; }
#status.ok { color: var(--blue); }
#status.bad { color: var(--brick); }

@media (prefers-reduced-motion: no-preference) {
  button.press, nav.tabs a, a.rowlink { transition: background .15s, color .15s; }
}