@font-face{font-family:"Archivo Black";font-weight:400;font-display:swap;src:url(fonts/archivoblack.woff2) format("woff2");}
@font-face{font-family:"Archivo";font-weight:100 900;font-display:swap;src:url(fonts/archivo.woff2) format("woff2");}
@font-face{font-family:"Figtree";font-weight:300 900;font-display:swap;src:url(fonts/figtree.woff2) format("woff2");}
html,body{margin:0;background:#F9F1E4;}
/* Gloria Jean's Coffees design system tokens (from the Claude Design project "Gloria Jean's Coffees AU — Design System").
   Layout: cream ground, white cards, orange as accent only (rules, active controls, the primary series). */
.mc {
  --gj-orange-100:#FEEDDD; --gj-orange-500:#F5822E; --gj-orange-600:#DC6B18; --gj-orange-700:#B0530F;
  --gj-brown-300:#8A6248; --gj-brown-500:#4E2E1E; --gj-espresso:#1E120B;
  --gj-caramel-400:#DDA868; --gj-caramel-500:#C88A4A; --gj-biscuit:#E9D7BC;
  --gj-cream-050:#FDF9F2; --gj-cream-100:#F9F1E4; --gj-cream-200:#F2E5D2; --gj-cream-300:#E5D4BC; --gj-white:#FFFFFF;
  --gj-grey-500:#8C8279; --gj-grey-700:#544C45;
  --gj-go:#3F7D46; --gj-attention-text:#9A6206; --gj-stop:#B93221;
  --hair: #E5D4BC; --shadow-card: 0 1px 2px rgba(30,18,11,.06), 0 4px 14px rgba(30,18,11,.06);
  --f-display: "Archivo Black", "Archivo", system-ui, sans-serif;
  --f-title: "Archivo", system-ui, sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
  background: var(--gj-cream-100); color: var(--gj-espresso);
  font-family: var(--f-body); font-size: 15px;
  display: flex; flex-direction: column; gap: 28px;
  padding-block: 0 40px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  min-height: 100%;
}
.mc-head { margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding: 22px max(16px, env(safe-area-inset-left, 0px)) 22px; background: var(--gj-espresso); color: var(--gj-cream-100); display: flex; flex-direction: column; gap: 14px; border-bottom: 6px solid var(--gj-orange-500); }
.mc-brandrow { display: flex; align-items: center; gap: 16px; }
.mc-logo { width: 64px; height: 64px; border-radius: 50%; background: var(--gj-cream-100); padding: 6px; flex: none; }
.mc-eyebrow { font-family: var(--f-title); font-weight: 800; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gj-orange-500); margin: 0; }
.mc h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(30px, 5vw, 46px); line-height: .9; letter-spacing: -.02em; text-transform: uppercase; margin: 4px 0 0; }
.mc-sub { color: var(--gj-cream-300); margin: 0; max-width: 70ch; line-height: 1.5; }
.mc-take { font-size: 17px; line-height: 1.5; max-width: 74ch; margin: 0; color: var(--gj-white); }
.mc h2 { font-family: var(--f-title); font-weight: 800; font-size: 22px; margin: 0; padding-bottom: 8px; border-bottom: 3px solid var(--gj-orange-500); align-self: flex-start; text-wrap: balance; }
.mc-bar { display: flex; flex-wrap: wrap; gap: 18px; align-items: end; }
.mc-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--f-title); font-weight: 800; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gj-brown-300); }
.mc-seg { display: inline-flex; background: var(--gj-white); border: 1px solid var(--hair); border-radius: 999px; padding: 3px; gap: 2px; }
.mc-seg button { font-family: var(--f-title); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; background: transparent; color: var(--gj-brown-500); border: 0; border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: background-color 160ms ease, color 160ms ease; }
.mc-seg button:hover { background: var(--gj-orange-100); }
.mc-seg button[aria-pressed="true"] { background: var(--gj-orange-500); color: var(--gj-espresso); }
.mc-seg button:focus-visible, .mc-date:focus-visible { outline: 2px solid var(--gj-white); box-shadow: 0 0 0 4px var(--gj-orange-500); }
.mc-date { font: 600 14px var(--f-body); padding: 7px 12px; border: 1px solid var(--hair); border-radius: 999px; background: var(--gj-white); color: var(--gj-espresso); letter-spacing: 0; text-transform: none; }
.mc-range { font-family: var(--f-body); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--gj-espresso); padding: 7px 0; }
.mc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.mc-tile { background: var(--gj-white); border: 1px solid var(--hair); box-shadow: var(--shadow-card); border-radius: 24px; padding: 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mc-tile.hero { background: var(--gj-orange-500); border-color: var(--gj-orange-500); }
.mc-tile .lbl { font-family: var(--f-title); font-weight: 800; font-size: 11px; color: var(--gj-brown-300); text-transform: uppercase; letter-spacing: .16em; }
.mc-tile.hero .lbl, .mc-tile.hero .note { color: var(--gj-espresso); }
.mc-tile .big { font-family: var(--f-title); font-weight: 900; font-size: 38px; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.01em; }
.mc-tile .note { font-size: 13px; color: var(--gj-grey-700); font-variant-numeric: tabular-nums; line-height: 1.4; }
.mc-meter { height: 8px; background: rgba(30,18,11,.15); border-radius: 999px; overflow: hidden; }
.mc-meter span { display: block; height: 100%; border-radius: 999px; background: var(--gj-espresso); }
.mc-sec { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mc-sec > p { margin: 0; color: var(--gj-grey-700); font-size: 14px; max-width: 78ch; line-height: 1.5; }
.mc-card { background: var(--gj-white); border: 1px solid var(--hair); box-shadow: var(--shadow-card); border-radius: 24px; padding: 8px 6px; min-width: 0; }
.mc-scroll { overflow-x: auto; }
.mc table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 14px; }
.mc th { text-align: right; font-family: var(--f-title); font-weight: 800; color: var(--gj-brown-300); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 10px 12px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.mc td { text-align: right; padding: 10px 12px; border-bottom: 1px solid var(--gj-cream-200); white-space: nowrap; }
.mc tbody tr:last-child td { border-bottom: 0; }
.mc th:first-child, .mc td:first-child { text-align: left; }
.mc td:first-child { font-weight: 600; }
.mc tr.tot td { font-family: var(--f-title); font-weight: 800; background: var(--gj-cream-050); border-top: 2px solid var(--gj-orange-500); }
.mc td.muted { color: var(--gj-grey-500); }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-family: var(--f-title); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border: 1.5px solid currentColor; }
.pill.ok { color: var(--gj-go); background: #EAF3EB; } .pill.warn { color: var(--gj-attention-text); background: #FBF0D9; } .pill.bad { color: var(--gj-stop); background: #F8E3DF; } .pill.none { color: var(--gj-grey-500); }
.chg.good { color: var(--gj-go); } .chg.badc { color: var(--gj-stop); }
.mc-chart { position: relative; min-height: 290px; padding: 12px 10px 4px; }
.mc-chart svg { display: block; }
.mc-chart .axis text { fill: var(--gj-grey-700); font-family: var(--f-body); font-size: 11px; }
.mc-chart .axis path, .mc-chart .axis line { stroke: var(--gj-cream-300); }
.mc-chart .grid line { stroke: var(--gj-cream-200); }
.mc-tip { position: absolute; pointer-events: none; background: var(--gj-espresso); color: var(--gj-cream-100); border-radius: 16px; padding: 10px 12px; font-size: 12px; font-variant-numeric: tabular-nums; min-width: 160px; z-index: 2; box-shadow: 0 8px 24px rgba(30,18,11,.25); }
.mc-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--gj-grey-700); }
.mc-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.mc-focus { margin: 0; padding: 18px 20px 18px 40px; display: flex; flex-direction: column; gap: 10px; line-height: 1.5; background: var(--gj-white); border: 1px solid var(--hair); border-radius: 24px; box-shadow: var(--shadow-card); }
.mc-focus li::marker { color: var(--gj-orange-500); font-weight: 900; }
.mc-prods { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.mc-prods > div { min-width: 0; background: var(--gj-white); border: 1px solid var(--hair); border-radius: 24px; padding: 16px 10px 8px; box-shadow: var(--shadow-card); }
.mc-prods h3 { font-family: var(--f-title); font-weight: 800; font-size: 16px; margin: 0 6px 6px; }
.mc details { font-size: 14px; color: var(--gj-grey-700); background: var(--gj-cream-050); border: 1px solid var(--hair); border-radius: 16px; padding: 14px 18px; }
.mc details ul { line-height: 1.55; max-width: 82ch; padding-left: 18px; }
.mc summary { cursor: pointer; color: var(--gj-espresso); font-family: var(--f-title); font-weight: 800; }
.mc [data-dash-source-state=refreshing] { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .mc-seg button { transition: none; } }

.mc, .mc * { box-sizing: border-box; }
.mc { overflow-x: clip; max-width: 1280px; margin: 0 auto; }
.mc-prods td, .mc-prods th { padding: 8px 6px; }
.mc-prods td:first-child { white-space: normal; }
.mc-prods > div { overflow-x: auto; }
.mc-userbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }
.mc-user { display:flex; gap:10px; align-items:center; font-size:13px; color: var(--gj-cream-300); }
.mc-user a, .mc-user button { color: var(--gj-cream-100); font: 800 12px var(--f-title); letter-spacing:.08em; text-transform:uppercase; background:transparent; border:1px solid rgba(249,241,228,.35); border-radius:999px; padding:6px 12px; cursor:pointer; text-decoration:none; }
.mc-alert { background:#F8E3DF; color:#7A1F14; border:1px solid #E7B4AB; border-radius:16px; padding:12px 16px; font-size:14px; }
.mc-sign { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:14px; }
.mc-signcard { background: var(--gj-white); border:1px solid var(--hair); border-radius:24px; padding:18px; box-shadow: var(--shadow-card); display:flex; flex-direction:column; gap:10px; min-width:0; }
.mc-signcard.done { border-color: var(--gj-go); }
.mc-signcard h3 { margin:0; font: 800 17px var(--f-title); display:flex; justify-content:space-between; gap:8px; align-items:center; }
.mc-signcard textarea { font: 14px var(--f-body); border:1px solid var(--hair); border-radius:12px; padding:8px 10px; min-height:70px; resize:vertical; background: var(--gj-cream-050); color: var(--gj-espresso); }
.mc-btn { font: 800 13px var(--f-title); letter-spacing:.06em; text-transform:uppercase; background: var(--gj-orange-500); color: var(--gj-espresso); border:0; border-radius:999px; padding:10px 18px; cursor:pointer; align-self:flex-start; }
.mc-btn[disabled] { opacity:.5; cursor:default; }
.mc-small { font-size:13px; color: var(--gj-grey-700); line-height:1.45; }
.mc-note { white-space: pre-wrap; font-size:14px; line-height:1.5; }