:root {
  font: 100%/1.6 system-ui;
  color: #14233b;
  background: #f3f6fb;
  --accent: #174fc4;
  --line: #c8d2e1;
}
* { box-sizing: border-box; }
body { margin: 0; overflow-wrap: anywhere; }
#workspace-controls { min-width: 0; border: 0; padding: 0; margin: 0; }
header { padding: 1rem 4vw; display: flex; justify-content: space-between; background: #122b51; color: white; }
a { color: var(--accent); }
header a { color: white; font-weight: 750; }
main { max-width: 1120px; margin: auto; padding: 1.5rem; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; margin: .3rem 0; }
h2 { font-size: 1.2rem; margin: 0 0 1rem; }
.eyebrow { font-size: .85rem; letter-spacing: .12em; font-weight: 750; color: var(--accent); }
.notice { border-left: 4px solid var(--accent); padding: .8rem 1rem; background: #e3edff; }
.grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1rem; margin: 1rem 0; }
.card, .item { min-width: 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: .75rem; background: white; }
.item { margin: 1rem 0; overflow-wrap: anywhere; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
label { display: grid; min-width: 0; gap: .4rem; margin: .8rem 0; font-weight: 650; }
select { width: 100%; min-width: 0; }
input, textarea, button, select { font: inherit; max-width: 100%; }
input, textarea { padding: .65rem; border: 1px solid #899bb5; border-radius: .4rem; background: white; color: inherit; width: 100%; min-width: 0; }
button { border: 1px solid var(--accent); border-radius: .4rem; background: var(--accent); color: white; padding: .6rem .85rem; cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
.secondary { background: white; color: var(--accent); }
.danger { background: white; color: #9f2530; border-color: #9f2530; }
.actions, .row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.row { justify-content: space-between; }
.template-card label, .project-card label { flex: 1 1 12rem; min-width: 0; }
.template-card select, .project-card select { width: 100%; min-width: 0; }
.project-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 1.4fr); gap: 1rem; align-items: center; margin-top: 1rem; }
.document-card { margin-top: 1rem; }
.document-card img { display: block; max-height: 24rem; max-width: 100%; margin: 1rem auto; border: 1px solid var(--line); border-radius: .5rem; }
.document-card [hidden] { display: none; }
.muted, footer { font-size: .9rem; color: #485a73; }
#status { min-height: 3rem; }
.item details { margin: .8rem 0; }
.item summary { cursor: pointer; font-weight: 650; }
.item pre { white-space: pre-wrap; font: inherit; }
.badge { font-size: .85rem; font-weight: 700; background: #e3edff; padding: .2rem .5rem; border-radius: .3rem; }
footer { margin: 2rem 0; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: white; padding: 1rem; }
*:focus-visible { outline: 3px solid #cc7800; outline-offset: 3px; }
@media (max-width: 720px) {
  main { padding: 1rem; }
  .grid, .pair, .project-card { grid-template-columns: 1fr; }
  header { gap: 1rem; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}