/* IGM Reporting Dashboard — theme F (see RESKIN.md).
   Soft grey page, white rounded cards, IGM brand colours.
   Only presentation lives here: never rename a class that JS looks up. */

/* Manrope (SIL Open Font License, fonts/OFL.txt), self-hosted because the CSP
   only allows fonts from this site. One variable file per script covers 200–800. */
@font-face{
  font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;
  src:url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Brand (IGM Brand Guidelines) */
  --midnight:#0c1413;
  --sapphire:#004aad;
  --card-blue:#2d92c9;
  --card-blue-end:#1871bb;
  --cyan:#5de0e6;
  --electric-yellow:#f6ff80;
  --brand-gradient:linear-gradient(90deg,var(--card-blue),var(--card-blue-end));

  /* Surfaces and text */
  --page:#f4f4f5;
  --card:#ffffff;
  --soft:#e9e9eb;
  --soft-hover:#dedee1;
  --hairline:#f1f1f2;
  --border:#e4e4e7;
  --ink:var(--midnight);
  --ink-2:#3f3f46;
  --muted:#62626b;

  /* Status */
  --ok:#15803d;     --ok-bg:#ecfdf3;
  --warn:#a15c07;   --warn-bg:#fff7e6;
  --bad:#b91c1c;    --bad-bg:#fef2f2;
  --info:#1871bb;   --info-bg:#eef6fc;

  /* Shape and type */
  --radius-card:24px;
  --radius-inner:16px;
  --radius-field:12px;
  --radius-pill:999px;
  --font:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:var(--font);

  /* Type scale: body text is 16px. Inline styles in the JS use these too. */
  --text-2xs:12px;  /* smallest labels, uppercase captions */
  --text-xs:13px;   /* pills, table headers, hints */
  --text-sm:14px;   /* secondary text, table cells, labels */
  --text-base:16px; /* body, buttons, inputs, tabs */
  --text-md:18px;   /* card headlines */
  --text-lg:20px;   /* section headings */
  --text-xl:24px;   /* sub-page headings, mid-size numbers */
  --text-2xl:28px;  /* campaign title */
  --text-3xl:32px;  /* big numbers */
  --text-4xl:40px;  /* page titles */
  --text-5xl:56px;  /* hero numbers */

  /* Spacing: 8-pt grid, with 4 and 12 as half steps for tight spots.
     Every padding, margin and gap in the app uses one of these values. */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px;

  /* Legacy names still used by inline styles in the JS modules */
  --navy:var(--midnight);
  --blue:var(--sapphire);
  --teal:var(--cyan);
  --amber:#e7a020;
  --green:#16a24a;
  --red:#db2525;
  --igm-accent:var(--electric-yellow);
}

*{box-sizing:border-box;}
body{font-family:var(--font);font-size:var(--text-base);line-height:1.5;margin:0;background:var(--page);color:var(--ink);-webkit-font-smoothing:antialiased;}

/* ---------- App shell: icon rail + top bar ----------
   index.html shows #app-shell by clearing its inline display, so the
   layout comes from here. App.showTab toggles .active on .tab-btn. */
#app-shell{display:flex;min-height:100vh;}
.app-rail{flex:0 0 96px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 0;}
.rail-mark{width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:var(--text-base);letter-spacing:-.01em;margin-bottom:24px;}
.rail-bottom{margin-top:auto;display:flex;flex-direction:column;gap:12px;}
.app-rail .tab-btn,.rail-btn{position:relative;width:48px;height:48px;border-radius:50%;border:0;background:var(--soft);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font:inherit;transition:background .15s,color .15s;}
.app-rail .tab-btn:hover,.rail-btn:hover{background:var(--soft-hover);}
.app-rail .tab-btn.active{background:var(--ink);color:#fff;}
.app-rail .tab-btn:focus-visible,.rail-btn:focus-visible{outline:2px solid var(--card-blue-end);outline-offset:2px;}
.app-rail svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
/* Name of each icon, shown beside it on hover or keyboard focus */
.rail-label{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);background:var(--ink);color:#fff;font-size:var(--text-xs);font-weight:500;padding:4px 8px;border-radius:8px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s;z-index:50;}
.app-rail .tab-btn:hover .rail-label,.app-rail .tab-btn:focus-visible .rail-label,.rail-btn:hover .rail-label,.rail-btn:focus-visible .rail-label{opacity:1;}

/* Logo at the top of the menu: the "IGM" mark on the icon rail, the full logo
   and product name on the desktop side menu. */
.rail-brand{display:flex;flex-direction:column;align-items:center;gap:8px;}
.rail-logo,.rail-product{display:none;}
/* Signed-in user beside Sign out: initials circle (name on hover), plus name
   and role on the desktop side menu. */
.rail-user{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:12px;border-top:1px solid #d4d4d8;}
.rail-avatar{flex:none;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--cyan);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:700;letter-spacing:.02em;}
.rail-avatar:empty{display:none;}
.rail-user-text{display:none;}

.app-main{flex:1 1 auto;min-width:0;}

.tab-content{display:none;padding:40px 32px 40px 24px;}
.tab-content.active{display:block;}

/* Desktop: the rail opens into a labelled side menu on a white panel, with a
   wider gap before the content. Narrower screens keep the icon rail (names on
   hover); phones get the icon row further down. */
@media (min-width: 1100px){
  .app-rail{flex-basis:248px;align-items:stretch;gap:4px;padding:24px 16px;}
  .rail-brand{align-items:flex-start;padding:0 16px;margin-bottom:24px;}
  .rail-logo{display:block;height:40px;width:auto;}
  .rail-mark{display:none;}
  .rail-product{display:block;font-size:var(--text-xs);font-weight:600;color:var(--muted);}
  .rail-user{flex-direction:row;gap:12px;margin-top:8px;padding:16px 4px 0 16px;}
  .rail-user-text{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3;}
  .rail-user-name{font-size:var(--text-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rail-user-role{font-size:var(--text-xs);color:var(--muted);}
  .rail-user .rail-signout{flex:none;width:40px;height:40px;padding:0;justify-content:center;border-radius:50%;}
  .rail-user .rail-signout .rail-label{display:none;}
  .rail-bottom{gap:4px;}
  .app-rail .tab-btn,.rail-btn{width:100%;height:48px;justify-content:flex-start;gap:12px;padding:0 16px;border-radius:var(--radius-pill);background:transparent;font-size:var(--text-base);font-weight:500;}
  .app-rail .tab-btn:hover,.rail-btn:hover{background:var(--soft);}
  .app-rail .tab-btn.active{background:var(--ink);color:#fff;}
  .rail-label{position:static;transform:none;opacity:1;padding:0;border-radius:0;background:none;color:inherit;font-size:var(--text-base);font-weight:500;pointer-events:auto;}
  .tab-content{padding-left:48px;}
}

/* ---------- Cards ---------- */
.section{background:var(--card);border:0;border-radius:var(--radius-card);padding:24px 24px;margin-bottom:16px;}
.section h3{margin:0 0 16px;font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;letter-spacing:-.02em;color:var(--ink);}
.section .section{background:var(--page);border-radius:var(--radius-inner);padding:16px 24px;}

.campaign-card{background:var(--card);border:0;border-radius:20px;padding:16px 24px;cursor:pointer;box-shadow:0 0 0 1px transparent;transition:box-shadow .15s;}
.campaign-card:hover{box-shadow:0 0 0 2px var(--soft-hover);}
.campaign-card.selected{box-shadow:0 0 0 2px var(--card-blue-end);background:var(--card);}
/* Completed campaigns sit back a little (60% white) so live and running ones
   stand out; text keeps full contrast, and hovering brings the card forward. */
.campaign-card.is-completed{background:rgba(255,255,255,.6);transition:box-shadow .15s,background .15s;}
.campaign-card.is-completed:hover{background:var(--card);}
/* Every card is the same height: the title always takes two lines and the
   ref/tactics line one; longer text is cut with "…" (full text on hover). */
.campaign-card-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.35;min-height:2.7em;margin-right:8px;}
.campaign-card-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.insight-card{background:var(--card);border:1px solid var(--hairline);border-radius:20px;padding:24px 24px;margin-bottom:12px;}
.insight-card .theme{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-bottom:8px;}
.insight-card .headline{font-family:var(--font-display);font-size:var(--text-md);font-weight:600;letter-spacing:-.01em;margin-bottom:8px;}
.insight-card .narrative{font-size:var(--text-sm);color:var(--muted);line-height:1.6;margin-bottom:12px;}
.insight-card .metric{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:600;letter-spacing:-.02em;}
.insight-card .metric-label{font-size:var(--text-xs);color:var(--muted);font-weight:400;}

.pacing-card{background:var(--card);border:1px solid var(--hairline);border-radius:20px;padding:16px 24px;margin-bottom:12px;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 24px;border:0;border-radius:var(--radius-pill);font-size:var(--text-base);font-family:inherit;font-weight:500;white-space:nowrap;cursor:pointer;transition:background .15s;}
/* Drawn icons on buttons: .ic-* adds the icon before the text; .ic-chevron adds a dropdown chevron after it. Icons take the text colour. */
.ic::before,.ic-chevron::after{content:"";flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:var(--ic) center / contain no-repeat;mask:var(--ic) center / contain no-repeat;}
.ic-chevron{display:inline-flex;align-items:center;gap:4px;}
.ic-upload{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E");}
.ic-download{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E");}
.ic-edit{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");}
.ic-erase{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 21h10M5.6 15.6l7.8-7.8M3 13.2 13.2 3a2 2 0 0 1 2.8 0l5 5a2 2 0 0 1 0 2.8L12 19.8a2 2 0 0 1-1.4.6H8.4a2 2 0 0 1-1.4-.6L3 16a2 2 0 0 1 0-2.8z'/%3E%3C/svg%3E");}
.ic-trash{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M10 11v6M14 11v6'/%3E%3C/svg%3E");}
.ic-chevron{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");}
.btn:disabled{opacity:.5;cursor:not-allowed;}
.btn-primary{background:var(--ink);color:#fff;}
.btn-primary:hover{background:#26302e;}
.btn-amber{background:var(--brand-gradient);color:#fff;}
.btn-amber:hover{background:var(--card-blue-end);}
.btn-outline{background:var(--soft);color:var(--ink);border:0;}
.btn-outline:hover{background:var(--soft-hover);}

/* ---------- Forms ---------- */
input[type=text],input[type=number],input[type=date],input[type=email],input[type=password],input[type=url],select,textarea{
  width:100%;padding:8px 16px;border:1px solid var(--border);border-radius:var(--radius-field);font-size:var(--text-base);font-family:inherit;color:var(--ink);background:var(--card);
}
textarea{line-height:1.5;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--card-blue-end);outline-offset:1px;border-color:transparent;}
label{font-size:var(--text-xs);font-weight:600;color:var(--ink-2);display:block;margin-bottom:8px;}
.form-row{margin-bottom:16px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field-invalid input,.field-invalid select{border-color:var(--bad) !important;background:var(--bad-bg);}
.field-invalid label{color:var(--bad);}
.field-error-text{margin-top:4px;font-size:var(--text-xs);color:var(--bad);}

.drop-zone{border:2px dashed var(--border);border-radius:var(--radius-inner);padding:24px;text-align:center;background:var(--page);transition:border-color .15s,background .15s;cursor:pointer;}
.drop-zone:hover{border-color:var(--card-blue);}
.drop-zone.dragover{border-color:var(--card-blue-end);background:var(--info-bg);}
.drop-zone input[type=file]{display:none;}
.file-attached{background:var(--info-bg);border:0;border-radius:var(--radius-field);padding:8px 16px;font-size:var(--text-sm);color:var(--info);margin-top:8px;}

/* ---------- Status pills ---------- */
/* Status markers live here: a broadcast icon for Live, a trending-up chart
   for Running and a green check for Completed (green is the one non-brand colour). Bars match (.bar-* below). */
.badge-live,.badge-running,.badge-completed{display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--radius-pill);font-size:var(--text-2xs);font-weight:600;letter-spacing:.03em;white-space:nowrap;}
.badge-live{background:#e6fbfc;color:#0b6e75;}
.badge-running{background:#e8f0fb;color:var(--sapphire);}
.badge-completed{background:#e7f6ec;color:#15803d;}
.badge-live::before{content:"";flex:none;width:12px;height:12px;margin-right:6px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.9 19.1C1 15.2 1 8.8 4.9 4.9M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5M19.1 4.9C23 8.8 23 15.1 19.1 19M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.9 19.1C1 15.2 1 8.8 4.9 4.9M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5M19.1 4.9C23 8.8 23 15.1 19.1 19M12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E") center / contain no-repeat;}
.badge-running::before{content:"";flex:none;width:12px;height:12px;margin-right:6px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8M15 7h6v6'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8M15 7h6v6'/%3E%3C/svg%3E") center / contain no-repeat;}
.badge-completed::before{content:"";flex:none;width:12px;height:12px;margin-right:4px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;}
/* Campaign card bars use the same colour as the card's status badge */
.bar-live{background:var(--cyan);}
.bar-running{background:var(--sapphire);}
.bar-completed{background:#16a34a;}
/* Pace (Overview): its own shapes and colours, so it never reads as a status */
.pace{display:inline-flex;align-items:center;gap:6px;flex:none;padding:4px 12px;border-radius:var(--radius-pill);font-size:var(--text-2xs);font-weight:600;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;}
.pace::before{content:"";flex:none;width:12px;height:12px;background:currentColor;}
.pace-on{background:#e7f6ec;color:#15803d;}.pace-on::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12zM12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12zM12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E") center / contain no-repeat;}
.pace-over{background:var(--warn-bg);color:var(--warn);}.pace-over::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 11l-5-5-5 5M17 18l-5-5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 11l-5-5-5 5M17 18l-5-5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;}
.pace-behind{background:var(--bad-bg);color:var(--bad);}.pace-behind::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat;}
/* Overview campaign rows open the campaign */
.overview-campaign{padding:16px 8px;margin:0 -8px;border-top:1px solid var(--hairline);border-radius:var(--radius-inner);cursor:pointer;transition:background .15s;}
.overview-campaign:hover{background:var(--page);}
.overview-campaign:focus-visible{outline:2px solid var(--card-blue-end);outline-offset:-2px;}
/* Completed rows on Overview: "N% Completed" in the Completed green */
.overview-pct-done{color:#15803d;font-weight:600;}
/* Overview header card icons, tinted by meaning */
.kpi-icon{flex:none;width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;}
.kpi-icon-active{background:#e8f0fb;color:var(--sapphire);}
.kpi-icon-done{background:#e7f6ec;color:#15803d;}
.kpi-icon-leads{background:var(--info-bg);color:var(--card-blue-end);}
.kpi-icon-impressions{background:#e6fbfc;color:#0b6e75;}

.tag{display:inline-flex;align-items:center;background:var(--soft);border:0;color:var(--ink-2);padding:8px 16px;border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:500;cursor:pointer;user-select:none;}
.tag:hover{background:var(--soft-hover);}
.tag.active{background:var(--ink);color:#fff;}

/* ---------- Progress ---------- */
.progress-bar-wrap{height:6px;background:var(--hairline);border-radius:var(--radius-pill);margin:8px 0;overflow:hidden;}
.progress-bar-fill{height:100%;border-radius:var(--radius-pill);}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;font-size:var(--text-sm);}
th{text-align:left;padding:8px 12px;font-weight:500;color:var(--muted);font-size:var(--text-xs);border-bottom:1px solid var(--hairline);}
td{padding:12px;border-bottom:1px solid var(--hairline);}

/* ---------- Layout helpers ---------- */
/* minmax(0,…) lets columns shrink below their content's one-line width */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}

/* ---------- Messages ---------- */
.notice,.error,.success{padding:8px 16px;border:0;border-radius:var(--radius-field);font-size:var(--text-sm);}
.notice{background:var(--info-bg);color:var(--info);}
.error{background:var(--bad-bg);color:var(--bad);}
.success{background:var(--ok-bg);color:var(--ok);}

/* ---------- Login overlay: sign-in, forgot, reset, link and invite views ---------- */
#login-screen{
  display:flex;align-items:center;justify-content:center;
  /* Brand hexagon outlines (cyan → sapphire), faint, top right and bottom left */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='480' viewBox='0 0 260 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%235de0e6'/%3E%3Cstop offset='1' stop-color='%23004aad'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' opacity='.5'%3E%3Cpath stroke-width='2.5' d='M130 10 240 75v130l-110 65L20 205V75z'/%3E%3Cpath stroke-width='1.5' d='M130 70l58 34v68l-58 34-58-34v-68z'/%3E%3C/g%3E%3C/svg%3E") right -80px top -120px / 420px 480px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='340' viewBox='0 0 260 300'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%235de0e6'/%3E%3Cstop offset='1' stop-color='%23004aad'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='none' stroke='url(%23g)' stroke-width='2.5' opacity='.4' d='M130 10 240 75v130l-110 65L20 205V75z'/%3E%3C/svg%3E") left -90px bottom -110px / 300px 340px no-repeat,
    var(--page);
  padding:24px 16px;
}
#login-screen > div{width:100%;max-width:400px;}
.login-card{background:var(--card);border-radius:28px;padding:48px 40px 32px;width:100%;max-width:400px;box-shadow:0 1px 2px rgba(12,20,19,.04),0 24px 48px -24px rgba(12,20,19,.14);}
.login-card h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;}
.login-card p{color:var(--muted) !important;}
.login-subtitle{font-size:var(--text-2xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:24px;}
.login-btn{display:flex;align-items:center;justify-content:center;width:100%;height:48px;padding:0 24px;background:var(--ink);color:#fff;border:0;border-radius:var(--radius-pill);font-size:var(--text-base);font-weight:500;cursor:pointer;font-family:inherit;margin-top:8px;transition:background .15s;}
.login-btn:hover{background:#26302e;}
.login-btn:disabled{opacity:.5;cursor:not-allowed;}
.login-link{background:none;border:0;color:var(--card-blue-end);font-size:var(--text-sm);font-weight:500;cursor:pointer;padding:0;font-family:inherit;text-decoration:none;}
.login-link:hover{text-decoration:underline;}
.login-input{width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-field);font-size:var(--text-base);font-family:inherit;margin-bottom:16px;color:var(--ink);background:var(--card);display:block;}
.login-input:focus{outline:2px solid var(--card-blue-end);outline-offset:1px;border-color:transparent;}
.login-label{font-size:var(--text-xs);font-weight:600;color:var(--ink-2);display:block;margin-bottom:8px;}
.login-error{background:var(--bad-bg);border:0;border-radius:var(--radius-field);padding:8px 16px;font-size:var(--text-sm);color:var(--bad);margin-bottom:16px;}
.login-error:empty{display:none;}
.login-success{background:var(--ok-bg);border:0;border-radius:var(--radius-field);padding:8px 16px;font-size:var(--text-sm);color:var(--ok);margin-bottom:16px;}

@media (max-width: 720px){
  /* Rail becomes a row of icons across the top */
  #app-shell{flex-direction:column;}
  .app-rail{flex:none;position:static;height:auto;flex-direction:row;justify-content:flex-start;gap:8px;padding:12px 16px;overflow-x:auto;}
  .app-rail{flex-wrap:wrap;}
  .rail-brand{flex-basis:100%;flex-direction:row;align-items:center;margin-bottom:8px;}
  .rail-logo{display:block;height:24px;width:auto;}
  .rail-mark{display:none;}
  .rail-user{flex-direction:row;gap:8px;padding-top:0;border-top:0;}
  .rail-avatar{display:none;}
  .rail-bottom{margin:0 0 0 auto;flex-direction:row;gap:8px;}
  .app-rail .tab-btn,.rail-btn{flex:none;width:40px;height:40px;}
  .rail-label{display:none;}
  .tab-content{padding:24px 16px;}
  .form-grid,.grid2,.grid3{grid-template-columns:minmax(0,1fr);}
  /* Grids laid out inline by the JS (Overview, deliverable cards, …) stack too */
  .tab-content [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important;}
  /* Wide tables scroll sideways in their own box instead of widening the page */
  .tab-content table{display:block;max-width:100%;overflow-x:auto;}
}

@media print{
  .app-rail,button,.drop-zone{display:none !important;}
  .tab-content{display:none !important;}
  .tab-content.active{display:block !important;padding:0 !important;}
  body{background:#fff;}
  .section{break-inside:avoid;}
}