/* Helium Swan Client Portal - chrome design system.
   The constant HS shell: navy backdrop, orange accent, Hanken Grotesk + Fraunces.
   Client-brand-faithful content lives INSIDE framed asset views, not here. */

:root {
  --navy:        #0D2A4D;
  --navy-mid:    #163a63;
  --navy-line:   #244a72;
  --blue:        #2A6FB8;
  --blue-soft:   #5b91cf;
  --orange:      #E66B2A;
  --orange-dk:   #D9551C;
  --ink:         #0c1b2e;
  --paper:       #f4f7fb;
  --paper-2:     #e7eef6;
  --mute:        #9fb2c4;
  --mute-2:      #c3d2e2;
  --white:       #ffffff;
  --ok:          #2faf74;
  --warn:        #e0a93a;

  --font:  "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  /* No serif in the Helium Swan system - alias kept so legacy rules resolve to Inter */
  --serif: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --r:  14px;   /* card radius */
  --r-s: 9px;
  --maxw: 1180px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html, body { overflow-x: clip; }

body {
  font-family: var(--font);
  color: #16314f;
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(42,111,184,.10), transparent 60%),
    var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: inherit; }

/* =====================================================================
   UNIFIED HELIUM SWAN SHELL - one chrome on every screen.
   Top bar (logo left) + persistent navy nav sidebar + main content.
   ===================================================================== */
.app { display: flex; flex-direction: column; height: 100vh; }

/* ---- top bar ---------------------------------------------------------- */
.topbar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 18px; height: 58px;
  background: linear-gradient(180deg, var(--navy), #0a2240);
  border-bottom: 1px solid var(--navy-line); color: #cdddec;
}
.topbar-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-r { display: flex; align-items: center; gap: 9px; }
.tb-burger { background: transparent; border: 0; color: #9fb6cf; font-size: 19px; cursor: pointer; padding: 4px 6px; border-radius: 7px; }
.tb-burger:hover { background: rgba(255,255,255,.08); color: #fff; }
.tb-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.tb-logo { width: 32px; height: 32px; border-radius: 8px; box-shadow: 0 3px 12px rgba(0,0,0,.35); }
.tb-name { color: #fff; font-weight: 700; font-size: 14.5px; line-height: 1; }
.tb-name small { display: block; color: var(--blue-soft); font-weight: 600; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; margin-top: 3px; }
.tb-crumb { color: #8aa6c4; font-size: 13px; margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--navy-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-crumb a { color: #8aa6c4; text-decoration: none; }
.tb-crumb a:hover { color: #cdddec; }
.tb-crumb b { color: #fff; font-weight: 600; }
.tb-user { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #cdddec; text-decoration: none; padding: 5px 12px 5px 10px; border: 1px solid var(--navy-line); border-radius: 999px; }
.tb-user:hover { background: rgba(255,255,255,.08); }
.tb-user i { width: 14px; height: 14px; color: #9fb6cf; }
.tb-user.is-preview { background: var(--orange); border-color: var(--orange); color: #fff; }
.tb-user.is-preview i { color: #fff; }
.tb-ico { color: #9fb6cf; text-decoration: none; font-size: 16px; padding: 5px 8px; border-radius: 8px; }
.tb-ico:hover { background: rgba(255,255,255,.08); color: #fff; }

/* ---- preview-as-client banner ----------------------------------------- */
.preview-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 8px 18px; background: #fdeede; color: #8a3f12; font-size: 13px; border-bottom: 1px solid #f4d3b8; }
.preview-bar span { display: inline-flex; align-items: center; gap: 7px; }
.preview-bar i { width: 15px; height: 15px; }
.preview-bar b { font-weight: 700; }
.preview-bar a { color: #fff; background: var(--orange); text-decoration: none; font-weight: 600; padding: 5px 12px; border-radius: 8px; }
.preview-bar a:hover { filter: brightness(1.04); }

/* ---- body = sidebar + main ------------------------------------------- */
.body { flex: 1; display: flex; min-height: 0; }
.sidebar {
  flex: 0 0 244px; width: 244px; overflow-y: auto;
  padding: 0 12px 18px; color: var(--mute-2);
  background: linear-gradient(180deg, var(--navy) 0%, #0a2240 100%);
  border-right: 1px solid var(--navy-line);
  transition: margin-left .2s ease;
}
body.nav-collapsed .sidebar { margin-left: -244px; }

/* fixed-height head so the back-link / "Clients" label sit at the SAME spot
   on every screen - no vertical jump when entering/leaving a client */
.side-head { height: 50px; display: flex; align-items: center; padding: 0 8px;
  border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 12px; }
.side-head-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-soft); font-weight: 700; }
.side-back { display: inline-flex; align-items: center; gap: 5px; color: #8aa6c4; text-decoration: none; font-size: 13px; }
.side-back:hover { color: #fff; }
.side-back i { width: 15px; height: 15px; }

.side-client { color: #fff; font-weight: 700; font-size: 15px; letter-spacing: -.01em; padding: 0 8px; margin-bottom: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-group { margin-bottom: 6px; }
.side-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; background: 0; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-soft); font-weight: 700; padding: 8px 8px; border-radius: 7px;
}
.side-group-head:hover { background: rgba(255,255,255,.05); color: #cdddec; }
.side-group-head i { width: 14px; height: 14px; flex: 0 0 14px; transition: transform .18s ease; }
.side-group:not(.open) .side-group-head i { transform: rotate(-90deg); }
.side-group:not(.open) .side-group-body { display: none; }
.side-group-t { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-soft); font-weight: 700; padding: 0 8px; margin-bottom: 6px; }

.side-link {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--mute-2);
  padding: 10px 10px; border-radius: var(--r-s); font-size: 13.5px; font-weight: 500;
}
.side-link i { width: 16px; height: 16px; flex: 0 0 16px; color: #6f8bab; }
.side-link span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.side-link:hover i { color: #9fb6cf; }
.side-link.active { background: var(--orange); color: #fff; }
.side-link.active i { color: #fff; }
/* deliverable sub-nav (jump to a banner size / a post) */
.side-sub { display: flex; flex-direction: column; margin: 2px 0 6px; padding-left: 14px; }
.side-sublink { text-align: left; background: 0; border: 0; border-left: 1px solid rgba(255,255,255,.12);
  cursor: pointer; font-family: var(--font); color: #8aa6c4; font-size: 12.5px;
  padding: 6px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-sublink:hover { color: #fff; border-left-color: var(--blue-soft); }
.side-sublink.on { color: #fff; border-left-color: var(--orange); font-weight: 600; }

/* fine hairlines between top-level items (client list) */
.side-list .side-link { border-bottom: 1px solid rgba(255,255,255,.06); border-radius: 0; }
.side-list .side-link:last-child { border-bottom: 0; }
.side-list .side-link.active { border-radius: var(--r-s); }

/* ---- main column ------------------------------------------------------ */
.main { flex: 1; min-width: 0; overflow-y: auto; }
.main:not(.main--flush) { padding: 34px; }
.main--flush { padding: 0; display: flex; min-height: 0; }

.kicker { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--orange); font-weight: 700; }
h1 { font-family: var(--font); font-weight: 700; font-size: 32px; letter-spacing: -.02em; color: var(--ink); margin: 8px 0 6px; }
.lede { color: #5c7390; font-size: 16px; max-width: 60ch; }

.kicker { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--orange); font-weight: 700; }
h1 { font-family: var(--serif); font-weight: 400; font-size: 38px; letter-spacing: -.01em; color: var(--ink); margin: 8px 0 6px; }
.lede { color: #5c7390; font-size: 16px; max-width: 60ch; }

/* ---- client welcome intro --------------------------------------------- */
.welcome { position: relative; background: linear-gradient(135deg, #fff, #fbf4ee); border: 1px solid var(--paper-2); border-radius: 16px; padding: 24px 26px; margin-top: 24px; box-shadow: 0 10px 30px rgba(13,42,77,.06); }
.welcome-x { position: absolute; top: 12px; right: 15px; background: 0; border: 0; font-size: 24px; line-height: 1; color: #c3d0dd; cursor: pointer; }
.welcome-x:hover { color: #6a7f99; }
.welcome h2 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 4px 0 4px; color: var(--ink); }
.welcome-lede { color: #5c7390; font-size: 15px; max-width: 64ch; }
.welcome-points { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; }
.welcome-points li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: #33485f; }
.welcome-points i { width: 18px; height: 18px; flex: 0 0 18px; color: var(--orange); margin-top: 2px; }

/* ---- cards ------------------------------------------------------------- */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 26px; }
.card {
  background: var(--white); border: 1px solid var(--paper-2);
  border-radius: var(--r); padding: 20px; text-decoration: none; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(13,42,77,.12); border-color: var(--mute-2); }
.card h3 { margin: 0 0 4px; font-size: 17px; color: var(--ink); }
.card p { margin: 0; color: #6a7f99; font-size: 13.5px; }

.pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.pill.pitch { background: #fdeede; color: var(--orange-dk); }
.pill.live  { background: #e3f5ec; color: #1f7a52; }

/* ---- buttons + forms --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--font); font-weight: 600; font-size: 14px;
  padding: 11px 18px; border-radius: 10px; border: 1px solid transparent;
  text-decoration: none; transition: filter .15s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(135deg, var(--orange), var(--orange-dk)); color: #fff; box-shadow: 0 8px 20px rgba(230,107,42,.3); }
.btn-primary:hover { filter: brightness(1.04); }
.btn-ghost { background: transparent; border-color: var(--navy-line); color: #fff; }

input[type=email], input[type=text] {
  width: 100%; font-family: var(--font); font-size: 16px;
  padding: 13px 15px; border-radius: 11px; border: 1px solid #cdd9e6;
  background: #fff; color: #16314f; outline: none;
}
input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(42,111,184,.16); }

.notice { padding: 11px 14px; border-radius: 10px; font-size: 13.5px; margin-bottom: 14px; }
.notice.info { background: #e8f1fb; color: #1f4d80; }
.notice.err  { background: #fdecea; color: #b23223; }

/* ---- login ------------------------------------------------------------- */
.auth-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(900px 600px at 50% -20%, rgba(42,111,184,.18), transparent 65%),
    linear-gradient(180deg, var(--navy), #0a2240);
  background-size: 100% 100%;
}
.auth-card {
  width: 100%; max-width: 420px; background: #fff; border-radius: 18px;
  padding: 34px 32px; box-shadow: 0 30px 80px rgba(5,18,36,.45);
}
/* brand lockup used on the login + error auth cards */
.brand { display: flex; align-items: center; gap: 11px; }
.brand .logo { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.25); flex: 0 0 auto; }
.brand .name { font-weight: 700; font-size: 16px; line-height: 1.1; color: var(--ink); }
.brand .name small { display: block; color: #8aa0b8; font-weight: 500; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; }
.auth-card .brand { justify-content: center; margin-bottom: 18px; }
.auth-card h1 { font-size: 25px; text-align: center; margin: 4px 0 4px; }
.auth-card .sub { text-align: center; color: #6a7f99; font-size: 14px; margin-bottom: 22px; }
.auth-card label { display: block; font-size: 12.5px; font-weight: 600; color: #50667f; margin: 0 0 7px; }
.auth-card .btn { width: 100%; justify-content: center; margin-top: 16px; }
.auth-card .alt { text-align: center; margin-top: 16px; font-size: 13px; }
.auth-card .alt a { color: var(--blue); text-decoration: none; }
.code-input { letter-spacing: .5em; text-align: center; font-size: 22px; font-weight: 700; }

/* ---- asset viewer ------------------------------------------------------ */
.viewer-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.bp-toggle { display: inline-flex; background: #fff; border: 1px solid var(--paper-2); border-radius: 11px; padding: 4px; gap: 2px; }
.bp-toggle button {
  font-family: var(--font); font-weight: 600; font-size: 13px; cursor: pointer;
  border: 0; background: transparent; color: #6a7f99; padding: 7px 13px; border-radius: 8px;
}
.bp-toggle button.on { background: var(--navy); color: #fff; }

.timeline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 22px; padding: 12px 14px; background: #fff; border: 1px solid var(--paper-2); border-radius: var(--r); }
.timeline-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #9fb2c4; font-weight: 700; margin-right: 4px; }
.vchip {
  text-decoration: none; font-size: 13px; font-weight: 600;
  color: #4d6483; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--paper-2);
  background: var(--paper); transition: all .12s ease;
}
.vchip:hover { border-color: var(--mute-2); }
.vchip.sel { background: var(--navy); color: #fff; border-color: var(--navy); }
.vchip.cur:not(.sel) { border-color: var(--ok); color: #1f7a52; }

.stage { margin-top: 22px; display: flex; justify-content: center; }
.device {
  width: 100%; background: #fff; border: 1px solid var(--paper-2); border-radius: 14px;
  overflow: hidden; box-shadow: 0 18px 50px rgba(13,42,77,.12); transition: width .25s ease;
}
.device-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f2f6fb; border-bottom: 1px solid var(--paper-2); }
.device-bar span { width: 10px; height: 10px; border-radius: 50%; background: #d6e0ec; }
.device-bar em { margin-left: auto; font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #9fb2c4; font-weight: 700; }
.device-frame { display: block; width: 100%; height: 78vh; border: 0; background: #fff; }

/* ---- review layer ------------------------------------------------------ */
.bp-count { display:inline-block; min-width:16px; padding:0 4px; margin-left:3px; border-radius:8px; background:#e2e9f1; color:#7c93ad; font-size:11px; }
.bp-toggle button.on .bp-count { background:rgba(255,255,255,.25); color:#fff; }
.bp-count.on { background:var(--orange); color:#fff; }
#modeBtn.on { background: var(--navy); box-shadow:none; }
#modeBtn:disabled { opacity:.45; cursor:not-allowed; }

.roundbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:18px; padding:11px 14px; background:#fff; border:1px solid var(--paper-2); border-radius:var(--r); }
.round-badge { font-size:12px; font-weight:700; letter-spacing:.04em; padding:5px 11px; border-radius:999px; background:#eef3f9; color:#4d6483; }
.round-badge.is-open { background:#e3f5ec; color:#1f7a52; }
.round-badge.is-committed { background:#fdeede; color:var(--orange-dk); }
.round-badge.is-closed { background:#eef3f9; color:#7c93ad; }
.round-note { font-size:12.5px; color:#6a7f99; }
.btn-mini { padding:7px 12px; font-size:12.5px; border-radius:9px; background:var(--paper); border:1px solid var(--paper-2); color:#4d6483; text-decoration:none; }
.btn-mini:hover { border-color:var(--mute-2); }
.btn-commit { background:var(--orange); color:#fff; border-color:transparent; }
.btn-close  { background:var(--navy); color:#fff; border-color:transparent; }

.review-body { display:grid; grid-template-columns: 1fr 330px; gap:20px; margin-top:20px; align-items:start; }
.stage { display:flex; justify-content:center; min-width:0; }
.frame-host { position:relative; }
.overlay { position:absolute; inset:0; z-index:3; pointer-events:none; }
.overlay.arming { pointer-events:auto; cursor:crosshair; background:rgba(230,107,42,.04); }
.overlay .pin {
  position:absolute; width:26px; height:26px; transform:translate(-50%,-50%);
  border-radius:50% 50% 50% 2px; background:var(--pin-color,#E83C7C); color:#fff;
  font-size:12px; font-weight:800; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.3); border:2px solid #fff; pointer-events:auto;
}
.overlay .pin.is-resolved { opacity:.45; }
.overlay .pin.is-other-bp { opacity:.3; }
.overlay .pin.is-active { outline:3px solid rgba(42,111,184,.5); }
.overlay .pin.is-new { animation:pinpulse .9s ease; }
@keyframes pinpulse { 0%{ transform:translate(-50%,-50%) scale(1.8); } 100%{ transform:translate(-50%,-50%) scale(1); } }
.pin-banner { position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:4; background:var(--orange); color:#fff; font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:999px; box-shadow:0 6px 16px rgba(230,107,42,.4); }

.cpanel { background:#fff; border:1px solid var(--paper-2); border-radius:var(--r); position:sticky; top:90px; max-height:82vh; display:flex; flex-direction:column; }
.cpanel-head { display:flex; align-items:center; gap:12px; padding:14px; border-bottom:1px solid var(--paper-2); flex-wrap:wrap; }
.cpanel-head b { font-size:14px; }
.mini-check { font-size:11.5px; color:#7c93ad; display:flex; align-items:center; gap:4px; }
.author-chips { display:flex; gap:6px; flex-wrap:wrap; padding:10px 14px 0; }
.achip { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:4px 9px; border-radius:999px; border:1px solid var(--paper-2); background:var(--paper); color:#4d6483; cursor:pointer; }
.achip.on { background:var(--navy); color:#fff; border-color:var(--navy); }
.achip-dot { width:8px; height:8px; border-radius:50%; background:var(--pin-color,#999); }
.clist { list-style:none; margin:0; padding:8px; overflow-y:auto; flex:1; }
.clist-empty { color:#8aa0b8; font-size:13px; padding:18px 10px; line-height:1.5; }
.clist-group { font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#9fb2c4; font-weight:700; padding:12px 8px 5px; }
.clist-item { padding:10px; border-radius:10px; cursor:pointer; border:1px solid transparent; }
.clist-item:hover { background:var(--paper); }
.clist-item.is-active { background:#eaf2fb; border-color:#cfe0ee; }
.clist-item.is-resolved { opacity:.55; }
.ci-head { display:flex; align-items:center; gap:7px; }
.ci-num { font-size:11px; font-weight:800; color:#fff; background:var(--pin-color,#999); border-radius:6px; padding:1px 6px; }
.ci-meta { font-size:11px; color:#7c93ad; }
.ci-author { color:#4d6483; font-weight:600; }
.ci-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--pin-color,#999); margin-right:3px; }
.ci-page { background:#fdeede; color:var(--orange-dk); padding:0 5px; border-radius:5px; }
.ci-text { margin:5px 0 0; font-size:13px; color:#33485f; }
.cpanel-foot { padding:10px 14px; border-top:1px solid var(--paper-2); font-size:11.5px; color:#9fb2c4; }

.modal { position:fixed; inset:0; z-index:50; background:rgba(7,20,38,.5); display:grid; place-items:center; padding:20px; }
.modal[hidden] { display:none !important; }
.pin-banner[hidden] { display:none !important; }
.modal-card { width:100%; max-width:460px; background:#fff; border-radius:16px; padding:22px; box-shadow:0 30px 80px rgba(5,18,36,.4); }
.modal-head { display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:16px; margin-bottom:12px; }
.modal-x { border:0; background:transparent; font-size:24px; line-height:1; color:#9fb2c4; cursor:pointer; }
.editor-target { font-size:12.5px; color:#6a7f99; margin-bottom:6px; }
.editor-meta { font-size:11.5px; color:#9fb2c4; margin-bottom:10px; }
#editorText, #commitModal input { width:100%; font-family:var(--font); font-size:15px; padding:11px 13px; border:1px solid #cdd9e6; border-radius:11px; resize:vertical; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.btn-ghost-dk { background:var(--paper); border:1px solid var(--paper-2); color:#4d6483; }
.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:60; background:var(--navy); color:#fff; font-size:13px; font-weight:600; padding:11px 18px; border-radius:11px; box-shadow:0 12px 30px rgba(5,18,36,.4); }

@media (max-width: 1080px) { .review-body { grid-template-columns:1fr; } .cpanel { position:static; max-height:none; } }

/* ---- admin table ------------------------------------------------------ */
.atable { width: 100%; max-width: 880px; border-collapse: collapse; margin-top: 22px; background: #fff; border: 1px solid var(--paper-2); border-radius: var(--r); overflow: hidden; }
.atable th { text-align: left; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #9fb2c4; font-weight: 700; padding: 11px 14px; border-bottom: 1px solid var(--paper-2); }
.atable td { padding: 9px 14px; border-bottom: 1px solid var(--paper-2); font-size: 13.5px; vertical-align: middle; }
.atable tr:last-child td { border-bottom: 0; }
.atable td.email { font-weight: 600; color: var(--ink); }
.atable form { display: contents; }
.atable select { font-family: var(--font); font-size: 13px; padding: 6px 8px; border: 1px solid #cdd9e6; border-radius: 8px; background: #fff; color: var(--ink); }
.invite { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.invite input { flex: 1; min-width: 160px; width: auto; }
.invite select { font-family: var(--font); font-size: 14px; padding: 11px 12px; border: 1px solid #cdd9e6; border-radius: 11px; background: #fff; }

/* ---- deliverable view (within the unified shell) ---------------------- */
.deliverable { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dbar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 10px 16px;
  background: #fff; border-bottom: 1px solid var(--paper-2);
}
.dbar-l, .dbar-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dbar-label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #9fb2c4; font-weight: 700; }
.dbar-prev { font-size: 12px; color: #b06a2a; margin-left: 6px; }
.dbar-prev a { color: var(--blue); }
.dstage { flex: 1; display: flex; min-height: 0; background: #e9edf2; }
.frame-host { flex: 1; position: relative; min-width: 0; background: #fff; }
.dframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }

/* ---- full-bleed present mode (legacy, unused) ------------------------- */
body.bleed { height:100vh; overflow:hidden; display:flex; flex-direction:column; background:#0a2240; }
.bleedbar { display:flex; align-items:center; gap:14px; padding:9px 14px; background:linear-gradient(180deg,var(--navy),#0a2240); border-bottom:1px solid var(--navy-line); color:#cdddec; flex:0 0 auto; }
.bleedbar-l, .bleedbar-r { display:flex; align-items:center; gap:9px; }
.bleedbar-c { display:flex; align-items:center; gap:6px; flex:1; justify-content:center; flex-wrap:wrap; min-width:0; }
.bleedbar-r { margin-left:auto; }
.bb-back { font-size:26px; line-height:1; color:#9fb6cf; text-decoration:none; padding:0 4px; }
.bb-back:hover { color:#fff; }
.brand--mini .mark { width:30px; height:30px; border-radius:8px; }
.bb-crumb { line-height:1.15; }
.bb-crumb b { display:block; color:#fff; font-size:13.5px; }
.bb-crumb span { font-size:11.5px; color:#8aa6c4; }
.bb-vlabel { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#6f8bab; margin-right:2px; }
.bleedbar .vchip { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:#cdddec; padding:5px 11px; }
.bleedbar .vchip.sel { background:var(--orange); border-color:var(--orange); color:#fff; }
.bleedbar .vchip.cur:not(.sel) { border-color:#5fae8f; color:#9fe6c4; }
.bleedbar .round-badge { background:rgba(255,255,255,.08); color:#cdddec; }
.bleedbar .round-badge.is-open { background:#1f7a52; color:#fff; }
.bleedbar .round-badge.is-committed { background:var(--orange); color:#fff; }
.bleedbar .btn-mini { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); color:#e8f1f8; }
.bleedbar .btn-mini:hover { background:rgba(255,255,255,.16); }
.bleedbar #modeBtn.on { background:#fff; color:var(--navy); }
.reviews-toggle { border-color:rgba(255,255,255,.18) !important; }
.bleedbar .reviews-toggle.on { background:#1f7a52 !important; color:#fff !important; border-color:#1f7a52 !important; }
.bleed-prev-note { flex:0 0 auto; background:#13314f; color:#bcd2e8; font-size:12.5px; text-align:center; padding:6px; }
.bleed-prev-note a { color:#7fb2e6; }

.bleed-stage { flex:1; display:flex; min-height:0; position:relative; }
.bleed-host { flex:1; position:relative; min-width:0; background:#fff; }
.bleed-frame { width:100%; height:100%; border:0; display:block; background:#fff; }
.cdrawer { width:0; overflow:hidden; background:#fff; border-left:1px solid var(--paper-2); display:flex; flex-direction:column; transition:width .2s ease; }
body.drawer-open .cdrawer { width:330px; }
@media (max-width:760px){ body.drawer-open .cdrawer { width:100%; position:absolute; inset:0 0 0 auto; z-index:20; } }
@media (max-width: 820px) {
  .sidebar { flex-basis: 240px; width: 240px; }
  body.nav-collapsed .sidebar { margin-left: -240px; }
  .main:not(.main--flush) { padding: 22px; }
  .tb-name small { display: none; }
}