@font-face {
  font-family: "Instrument Sans";
  src: url("./assets/fonts/InstrumentSans.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("./assets/fonts/Manrope.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("./assets/fonts/InstrumentSerif-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  font-family: "Instrument Sans", Arial, sans-serif;
  color: #102b3c;
  background: #f3f0e8;
}
body { background: #f3f0e8; }
.app-shell { grid-template-columns: 244px minmax(0, 1fr); }
.sidebar,
.auth-hero {
  background: linear-gradient(146deg, #0b2534 0%, #15394b 60%, #2a5568 100%);
  color: #f3f0e8;
}
.sidebar { border-right: 1px solid rgba(185, 211, 218, .25); }
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0 14px;
  letter-spacing: normal;
  line-height: 1;
}
.brand-logo-window {
  display: block;
  position: relative;
  overflow: hidden;
  width: 192px;
  height: 33px;
}
.brand-wordmark {
  position: absolute;
  top: -18px;
  left: -8px;
  width: 205px;
  max-width: none;
  height: auto;
}
.brand-subline {
  display: block;
  padding-left: 1px;
  color: #a9c5d0;
  font-family: "Instrument Sans", Arial, sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .29em;
}
.side-group-label,
.profile-role { color: #a9c5d0; }
.side-link { color: #d5e3e7; }
.side-link.active { background: rgba(169, 197, 208, .17); color: #fff; }
.side-link .count { background: #3a6274; }
.profile { border-top-color: rgba(169, 197, 208, .25); }
.avatar { background: #dce9ec; color: #102b3c; }
.signout { color: #d5e3e7; }
.crumb strong,
.page-header h1,
.column-title,
.card h3,
.detail-heading,
.dialog h2,
.drawer h2,
.auth-card h2,
.access-denied h2,
.approval-bar strong { color: #102b3c; }
.eyebrow,
.modal-kicker { color: #517f95; }
.mode-badge { background: #e1ebed; color: #38677d; }
.btn { background: #102b3c; color: #fff; }
.btn.secondary { color: #20455a; border-color: #d8e3e5; }
.btn.ghost { color: #517f95; border-color: #c8dade; }
.summary-pill { border-color: #e0e4e2; }
.summary-pill strong { color: #102b3c; }
.summary-pill.approved .summary-dot,
.approved-col .column-title .dot { background: #517f95; }
.column { background: #edece7; border-color: #e1e2dc; }
.column.approved-col { background: #e7edef; border-color: #dbe5e8; }
.column-count { color: #517185; }
.card { border-color: #dfe6e6; box-shadow: 0 3px 12px rgba(16, 43, 60, .04); }
.card:hover { box-shadow: 0 9px 22px rgba(16, 43, 60, .12); }
.card-cover { background: #b9cfd5; }
.card-cover .cover-fallback,
.media-stage .cover-fallback {
  background: linear-gradient(130deg, #698d9b, #102b3c);
  color: #f3f0e8;
}
.format-badge { color: #173e51; }
.slide-count { background: rgba(16, 43, 60, .82); }
.status.approved { background: #e1edf1; color: #37677e; }
.empty-icon,
.drop-icon,
.media-symbol { background: #e3edef; color: #517f95; }
.empty strong { color: #436678; }
.dialog,
.approval-bar { background: #fff; }
.drawer { background: #f7f7f3; }
.dialog-head,
.drawer-head,
.approval-bar { border-color: #dfe7e8; }
.icon-btn,
.media-row,
.caption-box { border-color: #dce6e8; }
.icon-btn { color: #517f95; }
.input,
.textarea { border-color: #d7e2e4; color: #102b3c; }
.input:focus,
.textarea:focus { border-color: #517f95; box-shadow: 0 0 0 3px #e1eef2; }
.dropzone { background: #f7faf9; border-color: #9ebfca; }
.dropzone:hover,
.dropzone.dragover { background: #edf5f6; }
.dropzone strong,
.field label { color: #244e62; }
.file-item,
.media-stage { background: #e9eff0; border-color: #dae6e9; }
.gallery-arrows button,
.thumb { border-color: #d8e4e7; color: #517f95; }
.thumb.active { border-color: #517f95; }
.caption-box { color: #284b5d; }
.caption-box.muted { background: #f2f5f5; }
.note { background: #e8f1f3; color: #416d7f; }
.auth-hero::after { border-color: rgba(200, 224, 232, .19); box-shadow: 0 0 0 70px rgba(200, 224, 232, .04), 0 0 0 140px rgba(200, 224, 232, .025); }
.auth-hero .brand { padding: 0; }
.auth-hero .brand-logo-window { width: 270px; height: 45px; }
.auth-hero .brand-wordmark { width: 290px; top: -27px; left: -11px; }
.auth-hero .brand-subline { font-size: 10px; }
.auth-hero h1 { color: #f3f0e8; }
.auth-hero h1 em {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  color: #b9d3da;
}
.auth-hero p { color: #b9d3da; }
.auth-card .eyebrow { letter-spacing: .18em; }
.auth-success { background: #eaf3f4; border-color: #c4dce3; color: #416d7f; }
#toast { background: #102b3c; }

@media (max-width: 1080px) {
  .app-shell { grid-template-columns: 210px minmax(0, 1fr); }
  .sidebar .brand-logo-window { width: 172px; }
  .sidebar .brand-wordmark { width: 185px; top: -17px; left: -7px; }
}
@media (max-width: 740px) {
  .app-shell { display: block; }
  .sidebar .brand { flex-direction: row; align-items: center; padding: 0; }
  .sidebar .brand-logo-window { width: 159px; height: 25px; }
  .sidebar .brand-wordmark { width: 170px; top: -16px; left: -6px; }
  .sidebar .brand-subline { display: none; }
}

.page-title-row { display: flex; align-items: center; gap: 12px; }
.beta-badge {
  border: 1px solid #c9dcdf;
  border-radius: 999px;
  padding: 4px 8px;
  color: #406b7d;
  background: #eaf2f3;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}

html.modal-open, body.modal-open { overflow: hidden; }
.overlay { overscroll-behavior: contain; }
.drawer {
  width: min(760px, 100%);
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.drawer-head {
  flex: none;
  align-items: center;
  padding: 10px 22px;
  background: #fff;
}
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: #244e62;
  font-size: 16px;
  font-weight: 750;
}
.back-btn svg { width: 18px; height: 18px; transform: rotate(180deg); }
.close-btn { width: 48px; height: 48px; border-radius: 12px; }
.close-btn svg { width: 21px; height: 21px; }
.drawer-scroll {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer-content { width: min(100%, 700px); margin: 0 auto; padding: 24px 28px 32px; }
.post-heading { margin-bottom: 19px; }
.post-heading h2 { font-size: 26px; line-height: 1.22; margin-bottom: 10px; }
.detail-meta { font-size: 13px; flex-wrap: wrap; }
.media-stage { height: min(48vh, 420px); max-height: none; }
.media-stage img, .media-stage video { max-height: none; }
.gallery-controls { margin-top: 12px; }
.gallery-count { font-size: 14px; }
.gallery-arrows { gap: 10px; }
.gallery-arrows button { width: 48px; height: 48px; border-radius: 12px; }
.gallery-arrows svg { width: 22px; height: 22px; }
.caption-section { margin-top: 24px; }
.caption-section h3, .request-form h3, .feedback-card h3 {
  color: #102b3c;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
}
.caption-box { font-size: 16px; line-height: 1.62; min-height: 0; padding: 17px; }
.caption-actions .btn, .review-actions .btn { min-height: 44px; font-size: 14px; }
.request-form, .feedback-card {
  margin-top: 24px;
  padding: 19px;
  border: 1px solid #dce6e8;
  border-radius: 13px;
  background: #fff;
}
.request-form > p { color: #58717c; font-size: 14px; line-height: 1.5; margin-bottom: 17px; }
.request-form .field label { font-size: 15px; }
.request-form .textarea { font-size: 16px; min-height: 112px; line-height: 1.5; }
.optional { color: #7f9198; font-size: 13px; font-weight: 500; }
.feedback-comment, .feedback-wording p { white-space: pre-wrap; color: #284b5d; font-size: 16px; line-height: 1.6; }
.feedback-wording { margin-top: 16px; padding: 15px; background: #f2f5f5; border-radius: 10px; }
.feedback-wording strong { display: block; margin-bottom: 6px; color: #3e697b; font-size: 14px; }
.feedback-card small { display: block; margin-top: 15px; color: #748a95; font-size: 12px; line-height: 1.45; }
.request-review .review-note { padding: 13px 0; border-top: 1px solid #e4ecee; }
.request-review .review-note strong { display: block; margin-bottom: 7px; color: #244e62; font-size: 14px; }
.request-review .review-note p, .history-wording { white-space: pre-wrap; overflow-wrap: anywhere; color: #284b5d; font-size: 16px; line-height: 1.55; }
.feedback-history { margin-top: 16px; border: 1px solid #dce6e8; border-radius: 12px; background: #fff; }
.feedback-history summary { min-height: 48px; padding: 13px 17px; color: #244e62; font-size: 15px; font-weight: 750; cursor: pointer; }
.history-entry { margin: 0 17px; padding: 15px 0; border-top: 1px solid #e4ecee; }
.history-entry strong { display: block; margin-bottom: 7px; text-transform: capitalize; color: #244e62; font-size: 14px; }
.history-entry small { display: block; margin-top: 8px; color: #748a95; font-size: 12px; }
.downloads { margin-top: 23px; border: 1px solid #dce6e8; border-radius: 12px; background: #fff; }
.downloads summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 11px 16px;
  cursor: pointer;
  color: #244e62;
  font-size: 15px;
  font-weight: 750;
  list-style: none;
}
.downloads summary::-webkit-details-marker { display: none; }
.downloads summary::after { content: '⌄'; margin-left: auto; font-size: 22px; line-height: 1; }
.downloads[open] summary::after { transform: rotate(180deg); }
.downloads summary span { margin-left: 8px; margin-right: 13px; color: #688b99; font-size: 13px; }
.downloads .media-list { padding: 0 12px 12px; }
.media-file { min-width: 0; flex: 1; }
.media-row .media-title { max-width: none; font-size: 13px; }
.media-row .icon-btn { width: 44px; height: 44px; }
.owner-danger { margin-top: 26px; }
.approval-bar {
  flex: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 12px 22px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(16, 43, 60, .06);
}
.approval-bar .btn { min-height: 50px; min-width: 166px; padding: 12px 16px; font-size: 16px; }
.approval-bar .btn svg { width: 19px; height: 19px; }
.approval-bar p { width: 100%; color: #496674; font-size: 14px; line-height: 1.45; }
.approval-bar .approval-scope { flex: 1; width: auto; max-width: 260px; font-size: 13px; }
body.modal-open #toast { bottom: 90px; }

@media (max-width: 740px) {
  .main { padding-top: 10px; }
  .topbar { justify-content: flex-end; padding-bottom: 9px; }
  .topbar .crumb, .page-header .eyebrow, .page-subtitle, .summary { display: none; }
  .page-header { align-items: center; margin-bottom: 13px; gap: 10px; }
  .page-header h1 { font-size: 24px; }
  .preview-banner { padding: 10px 12px; margin-bottom: 13px; }
  .column { padding: 12px; }
  .column-head { margin-bottom: 11px; }
  .drawer-content { padding: 17px 17px 27px; }
  .drawer-head { padding: 7px 14px; }
  .post-heading h2 { font-size: 23px; }
  .media-stage { height: 290px; }
  .approval-bar { display: grid; grid-template-columns: 1fr 1fr; padding: 11px 14px calc(11px + env(safe-area-inset-bottom)); }
  .approval-bar .btn { width: 100%; min-width: 0; }
  .approval-bar p { grid-column: 1 / -1; }
  .approval-bar .approval-scope { max-width: none; width: 100%; }
}
@media (max-width: 380px) {
  .page-title-row { gap: 8px; }
  .beta-badge { font-size: 10px; }
  .approval-bar .btn { padding: 11px 8px; }
}
@media (max-width: 460px) {
  .topbar.demo .top-actions .btn.secondary { display: inline-flex; }
  .topbar.demo .top-actions [data-action="signout"] { display: none; }
  .page-header { flex-wrap: nowrap; }
  .page-header h1 { font-size: 21px; letter-spacing: -1.1px; }
  .page-title-row { gap: 7px; }
  .page-header .header-buttons { margin-left: auto; flex: none; }
  .page-header .header-buttons .btn { padding: 8px 10px; }
  .page-header .header-buttons .btn.secondary { display: none; }
}
@media (max-width: 380px) {
  .topbar.demo .crumb { display: none; }
}
@media (max-width: 350px) {
  .approval-bar { grid-template-columns: 1fr; }
}