/* Design variants for Tiego's review (11 Oct 2026). Same pages and data; only the look changes.
   Tiego chose BOLD on 11 Oct 2026; it is the default. html[data-look="calm"] is the earlier design (no overrides). Red stays brand-only: never a data or people colour. */

/* ---------- Look switch (prototype only). Hidden unless ?compare is in the address, since Tiego chose Bold (11 Oct). */
.look{display:none}
.look.show{display:flex}
.look{position:fixed;left:16px;bottom:16px;z-index:20;align-items:center;gap:4px;background:#1a1a1a;color:#fff;border-radius:999px;padding:5px 6px 5px 14px;box-shadow:0 6px 24px rgb(0 0 0 / 25%);font:600 12px/1 "Public Sans",system-ui,sans-serif}
.look span{margin-right:6px;opacity:.75}
.look button{background:none;border:0;color:#fff;font:inherit;padding:7px 11px;border-radius:999px;cursor:pointer}
.look button.on{background:#E4002B}
@media (max-width:820px){.look{left:8px;right:8px;bottom:8px;justify-content:center;flex-wrap:wrap}}

/* =====================================================================
   BOLD: KFC brand-forward. Charcoal and white, condensed headings, the
   bucket stripes as the one motif, square corners, big numbers.
   ===================================================================== */
html[data-look="bold"]{--font:"Barlow",system-ui,sans-serif;--r:0px;--r-lg:0px;--bg:#f2f0ed;--line:#dedad4;--sunk:#ebe8e3}
html[data-look="bold"] h1,html[data-look="bold"] .card-head h2,html[data-look="bold"] .d-head h2,html[data-look="bold"] .sidebar .brand b{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:.01em;font-weight:600}
html[data-look="bold"] h1{font-size:38px;line-height:1.05;max-width:22ch}
html[data-look="bold"] .card-head h2{font-size:19px}
html[data-look="bold"] .sidebar{background:#1a1a1a;border-right:0}
html[data-look="bold"] .sidebar .brand{background:#1a1a1a;height:92px;align-items:flex-end;padding-bottom:16px;position:relative}
html[data-look="bold"] .sidebar .brand::before{content:"";position:absolute;left:20px;right:20px;top:0;height:22px;background:repeating-linear-gradient(90deg,#E4002B 0 18px,#fff 18px 30px)}
html[data-look="bold"] .sidebar .brand-mark{background:#E4002B;color:#fff;border-radius:0}
html[data-look="bold"] .nav-label{color:#8d8d8d}
html[data-look="bold"] .nav a{color:#e6e6e6;border-radius:0;font-weight:600}
html[data-look="bold"] .nav a:hover{background:#2a2a2a;color:#fff}
html[data-look="bold"] .nav a.on{background:#E4002B;color:#fff}
html[data-look="bold"] .nav a.on::before{display:none}
html[data-look="bold"] .nav .count{background:#333;color:#fff}
html[data-look="bold"] .nav a.on .count{background:#fff;color:#C8102E}
html[data-look="bold"] .sidebar-foot{border-top-color:#333;color:#fff}
html[data-look="bold"] .topbar{background:#fff;color:#1a1a1a;border-bottom:4px solid #1a1a1a}
html[data-look="bold"] .topbar .crumbs,html[data-look="bold"] .topbar .crumbs b{color:#1a1a1a}
html[data-look="bold"] .topbar .org{border-color:#1a1a1a;color:#1a1a1a}
html[data-look="bold"] .topbar .org::before{background:#1a1a1a}
html[data-look="bold"] .topbar .badge{background:#1a1a1a;color:#fff}
html[data-look="bold"] .lang{border-color:#1a1a1a}
html[data-look="bold"] .lang button{color:#1a1a1a}
html[data-look="bold"] .lang button.on{background:#1a1a1a;color:#fff}
html[data-look="bold"] .card{border:0;box-shadow:none;border-top:6px solid #1a1a1a}
html[data-look="bold"] .tile{border:0;border-top:6px solid #E4002B;background:#fff}
html[data-look="bold"] .tile .label{text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:11.5px;color:#1a1a1a}
html[data-look="bold"] .tile .value{font-family:"Oswald",sans-serif;font-size:40px;font-weight:500;line-height:1.05}
html[data-look="bold"] .btn{text-transform:uppercase;letter-spacing:.04em;font-weight:700;border-width:2px;border-color:#1a1a1a}
html[data-look="bold"] .btn.primary{background:#E4002B;border-color:#E4002B;color:#fff}
html[data-look="bold"] .note.brand{background:#1a1a1a;color:#fff}
html[data-look="bold"] .chip{border-radius:0;border-width:2px}
html[data-look="bold"] .chip.on{background:#1a1a1a;color:#fff;border-color:#1a1a1a}
html[data-look="bold"] .badge{border-radius:0}
html[data-look="bold"] .table th{text-transform:uppercase;letter-spacing:.05em;color:#1a1a1a;border-bottom:2px solid #1a1a1a}
html[data-look="bold"] .inbox{border:0;border-top:6px solid #1a1a1a}
html[data-look="bold"] .inbox-item.on{background:#fff;border-left:6px solid #E4002B}
html[data-look="bold"] .inbox-group{background:#1a1a1a;color:#fff}
html[data-look="bold"] .page-head .eyebrow{color:#E4002B}

/* =====================================================================
   EDITORIAL: reads like a finance report. Top navigation, serif headings,
   paper background, rules instead of boxes.
   ===================================================================== */
html[data-look="editorial"]{--font:"Source Sans 3",system-ui,sans-serif;--bg:#faf8f4;--surface:#faf8f4;--line:#d9d4ca;--sunk:#f1ede5;--r:2px;--r-lg:2px}
html[data-look="editorial"] .app{grid-template-columns:1fr}
html[data-look="editorial"] .sidebar{flex-direction:row;align-items:stretch;height:auto;min-height:0;position:sticky;top:0;z-index:5;border-right:0;border-bottom:1px solid #1a1a1a;background:#faf8f4}
html[data-look="editorial"] .sidebar .brand{background:#faf8f4;color:#1a1a1a;height:56px;border-right:1px solid var(--line);flex:none}
html[data-look="editorial"] .sidebar .brand small{color:#767676}
html[data-look="editorial"] .sidebar .brand-mark{background:#E4002B;color:#fff}
html[data-look="editorial"] .nav{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:0 12px;gap:0;align-items:stretch}
html[data-look="editorial"] .nav-label,html[data-look="editorial"] .sidebar-foot{display:none}
html[data-look="editorial"] .nav a{height:auto;white-space:nowrap;border-radius:0;padding:0 12px;font-size:13.5px;border-bottom:3px solid transparent}
html[data-look="editorial"] .nav a.on{background:none;color:#1a1a1a;border-bottom-color:#E4002B}
html[data-look="editorial"] .nav a.on::before{display:none}
html[data-look="editorial"] .nav .count{background:none;padding:0 0 0 2px;color:#767676}
html[data-look="editorial"] .topbar{background:#faf8f4;color:#1a1a1a;border-bottom:1px solid var(--line);height:44px}
html[data-look="editorial"] .topbar .crumbs,html[data-look="editorial"] .topbar .crumbs b{color:#4a4a4a}
html[data-look="editorial"] .topbar .org{border:0;color:#767676;font-weight:500}
html[data-look="editorial"] .topbar .org::before{background:#767676}
html[data-look="editorial"] .topbar .badge{background:none;color:#C8102E;padding:0}
html[data-look="editorial"] .lang{border-color:var(--line)}
html[data-look="editorial"] .lang button{color:#4a4a4a}
html[data-look="editorial"] .lang button.on{background:#1a1a1a;color:#fff}
html[data-look="editorial"] .page{max-width:1120px;margin:0 auto}
html[data-look="editorial"] h1,html[data-look="editorial"] .card-head h2,html[data-look="editorial"] .d-head h2{font-family:"Fraunces",Georgia,serif;font-weight:600;letter-spacing:-.01em}
html[data-look="editorial"] h1{font-size:40px;line-height:1.1;max-width:24ch}
html[data-look="editorial"] .page-head p{font-size:17px;line-height:1.55;color:#4a4a4a}
html[data-look="editorial"] .page-head .eyebrow{color:#767676;letter-spacing:.12em}
html[data-look="editorial"] .card{background:none;border:0;box-shadow:none;border-top:2px solid #1a1a1a;padding:18px 0 0}
html[data-look="editorial"] .card-head h2{font-size:22px}
html[data-look="editorial"] .tile{background:none;border:0;border-left:1px solid var(--line);border-radius:0;padding:4px 18px}
html[data-look="editorial"] .tile .value{font-family:"Fraunces",Georgia,serif;font-size:34px;font-weight:500}
html[data-look="editorial"] .note.brand{background:none;border-left:3px solid #E4002B;border-radius:0}
html[data-look="editorial"] .btn{border-radius:2px}
html[data-look="editorial"] .btn.primary{background:#1a1a1a;border-color:#1a1a1a;color:#fff}
html[data-look="editorial"] .chip{border-radius:2px}
html[data-look="editorial"] .chip.on{border-color:#1a1a1a;color:#1a1a1a}
html[data-look="editorial"] .inbox{background:#fff;border-color:#1a1a1a}
html[data-look="editorial"] .inbox-item.on{background:#faf3e9;border-left-color:#1a1a1a}
html[data-look="editorial"] .inbox-search,html[data-look="editorial"] .inbox-list{background:#fff}
html[data-look="editorial"] details.tv summary{color:#1a1a1a;text-decoration:underline}

/* =====================================================================
   WARM: friendly and calm for store teams. Cream background, soft rounded
   panels without borders, red used as a small accent only.
   ===================================================================== */
html[data-look="warm"]{--font:"DM Sans",system-ui,sans-serif;--bg:#f7f1e8;--surface:#ffffff;--sunk:#f3ebdf;--line:#ece3d5;--line-2:#dccfbc;--r:12px;--r-lg:20px;--ink:#2b2622;--ink-2:#5c534b;--ink-3:#8a7f74}
html[data-look="warm"] .sidebar{background:#f7f1e8;border-right:0}
html[data-look="warm"] .sidebar .brand{background:#f7f1e8;color:#2b2622}
html[data-look="warm"] .sidebar .brand small{color:#8a7f74}
html[data-look="warm"] .sidebar .brand-mark{background:#E4002B;color:#fff;border-radius:50%}
html[data-look="warm"] .nav a{border-radius:999px;color:#5c534b}
html[data-look="warm"] .nav a:hover{background:#efe6d8}
html[data-look="warm"] .nav a.on{background:#fff;color:#2b2622;box-shadow:0 2px 8px rgb(80 50 20 / 8%)}
html[data-look="warm"] .nav a.on::before{left:8px;top:15px;bottom:auto;width:8px;height:8px;border-radius:50%;background:#E4002B}
html[data-look="warm"] .nav a.on{padding-left:26px}
html[data-look="warm"] .nav .count{background:#efe6d8}
html[data-look="warm"] .sidebar-foot{border-top-color:#ece3d5}
html[data-look="warm"] .topbar{background:#f7f1e8;color:#2b2622;border-bottom:0}
html[data-look="warm"] .topbar .crumbs,html[data-look="warm"] .topbar .crumbs b{color:#2b2622}
html[data-look="warm"] .topbar .org{border-color:#dccfbc;color:#5c534b;border-radius:999px}
html[data-look="warm"] .topbar .org::before{background:#E4002B}
html[data-look="warm"] .topbar .badge{background:#fff;color:#C8102E}
html[data-look="warm"] .lang{border-color:#dccfbc;border-radius:999px}
html[data-look="warm"] .lang button{color:#5c534b}
html[data-look="warm"] .lang button.on{background:#2b2622;color:#fff}
html[data-look="warm"] h1{font-size:32px;font-weight:700;letter-spacing:-.02em}
html[data-look="warm"] .card,html[data-look="warm"] .tile,html[data-look="warm"] .inbox{border:0;box-shadow:0 4px 18px rgb(80 50 20 / 7%)}
html[data-look="warm"] .tile .value{font-size:30px}
html[data-look="warm"] .note.brand{background:#fff;border-radius:16px;box-shadow:inset 4px 0 0 #E4002B}
html[data-look="warm"] .btn{border-radius:999px}
html[data-look="warm"] .chip.on{background:#2b2622;color:#fff;border-color:#2b2622}
html[data-look="warm"] .inbox-item.on{background:#fbf6ee;border-left-color:#E4002B}
html[data-look="warm"] .inbox-group{background:#fbf6ee}
html[data-look="warm"] .page-head .eyebrow{color:#C8102E}
html[data-look="bold"] .note.brand{justify-content:flex-start;text-align:left}
html[data-look="bold"] .note.brand b{color:#fff;font-family:"Oswald",sans-serif;text-transform:uppercase;font-weight:500}