/* ===================================================================
   PomoZentra — App-UI visuals for marketing pages.
   Native HTML/CSS recreations of real product screens, brand-true.
   Built on site.css tokens. Load AFTER site.css.
   =================================================================== */

/* ---------- figure wrapper ---------- */
.figure{ position:relative; }
.figure .fig-cap{ margin-top:16px; font-size:13px; color:var(--muted); line-height:1.55; max-width:46ch; }
.figure .fig-cap b{ color:var(--graphite); font-weight:600; }

/* ---------- the app window ---------- */
.appwin{ background:var(--paper); border:1px solid var(--hair); border-radius:var(--r-xl); box-shadow:var(--e3); overflow:hidden; }
.appwin .chrome{ display:flex; align-items:center; gap:18px; height:58px; padding:0 20px; border-bottom:1px solid var(--hair); background:color-mix(in srgb, var(--bone) 70%, var(--paper)); }
.appwin .chrome .traffic{ display:flex; gap:7px; }
.appwin .chrome .traffic i{ width:9px; height:9px; border-radius:50%; background:#dcd9cd; display:block; }
.appwin .chrome .abrand{ display:flex; align-items:center; gap:9px; }
.appwin .chrome .abrand .w{ font-family:Sora,sans-serif; font-weight:600; font-size:15px; letter-spacing:-.02em; color:var(--obsidian); }
.appwin .chrome .abrand .w .dot{ color:var(--o-500); }
.appwin .chrome .atabs{ display:flex; gap:2px; margin-left:6px; }
.appwin .chrome .atabs a{ position:relative; font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:var(--r-sm); }
.appwin .chrome .atabs a.on{ color:var(--obsidian); }
.appwin .chrome .atabs a.on::after{ content:""; position:absolute; left:12px; right:12px; bottom:2px; height:2px; border-radius:2px; background:var(--o-500); }
.appwin .chrome .aright{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.appwin .chrome .apts{ display:inline-flex; align-items:center; gap:7px; font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:600; color:var(--graphite); background:var(--paper); border:1px solid var(--hair); border-radius:var(--r-pill); padding:6px 12px; }
.appwin .chrome .apts i{ width:7px; height:7px; border-radius:50%; background:var(--o-500); display:block; }
.appwin .chrome .av{ width:30px; height:30px; border-radius:50%; background:var(--obsidian); color:var(--bone); display:grid; place-items:center; font-size:11px; font-weight:700; letter-spacing:.02em; }
.appwin .screen{ padding:30px 30px 32px; }
.appwin.compact .screen{ padding:24px 24px 26px; }

/* screen heading inside the app */
.app-h{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.app-h .eye{ font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.app-h h3{ font-family:Sora,sans-serif; font-weight:600; font-size:24px; letter-spacing:-.02em; color:var(--obsidian); margin:8px 0 0; }
.app-tabs2{ display:inline-flex; gap:16px; }
.app-tabs2 span{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding-bottom:6px; }
.app-tabs2 span.on{ color:var(--obsidian); border-bottom:2px solid var(--o-500); }

/* ---------- report: KPI metric cards ---------- */
.metric-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:24px; }
.metric{ background:var(--paper); border:1px solid var(--hair); border-radius:var(--r-md); padding:16px 16px 17px; }
.metric .top{ display:flex; align-items:center; gap:8px; }
.metric .mlabel{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.metric .delta{ margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:700; padding:2px 6px; border-radius:5px; }
.metric .delta.up{ color:var(--success); background:var(--cat-revenue-soft); }
.metric .delta.down{ color:var(--danger); background:var(--cat-waste-soft); }
.metric .big{ font-family:"JetBrains Mono",monospace; font-weight:700; font-size:34px; letter-spacing:-.03em; color:var(--obsidian); margin-top:12px; line-height:1; }
.metric .big .u{ font-size:15px; color:var(--muted); font-weight:600; }
.metric .msub{ font-size:11.5px; color:var(--muted); margin-top:9px; }
.metric .mdot{ width:18px; height:18px; border-radius:5px; display:grid; place-items:center; }

/* ---------- time allocation stacked bar ---------- */
.alloc-card{ margin-top:18px; background:var(--paper); border:1px solid var(--hair); border-radius:var(--r-md); padding:20px; }
.alloc-card .ah{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.alloc-card .at{ font-family:Sora,sans-serif; font-weight:600; font-size:16px; color:var(--obsidian); margin:6px 0 16px; }
.alloc{ display:flex; height:16px; border-radius:var(--r-pill); overflow:hidden; gap:2px; }
.alloc span{ display:block; height:100%; }
.alloc span:first-child{ border-radius:var(--r-pill) 0 0 var(--r-pill); }
.alloc span:last-child{ border-radius:0 var(--r-pill) var(--r-pill) 0; }
.alloc-legend{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px 22px; margin-top:18px; }
.alloc-legend .lg{ display:flex; align-items:baseline; gap:8px; }
.alloc-legend .lg i{ width:8px; height:8px; border-radius:50%; flex:none; position:relative; top:-1px; }
.alloc-legend .lg .nm{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--slate); }
.alloc-legend .lg .vl{ margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:12.5px; font-weight:600; color:var(--obsidian); }
.alloc-legend .lg .pc{ font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--muted); }

/* ---------- flip clock (timer) ---------- */
.flip{ display:flex; align-items:center; justify-content:center; gap:7px; }
.flip .grp{ display:flex; gap:7px; }
.flip .tile{ width:74px; height:96px; border-radius:14px; background:linear-gradient(180deg,#23262d,#15171c); color:#fbfaf6; font-family:Sora,sans-serif; font-weight:600; font-size:56px; letter-spacing:-.02em; display:grid; place-items:center; position:relative; box-shadow:var(--e2); }
.flip .tile::after{ content:""; position:absolute; left:8px; right:8px; top:50%; height:1px; background:rgba(255,255,255,.08); }
.flip .colon{ display:flex; flex-direction:column; gap:11px; padding:0 3px; }
.flip .colon i{ width:7px; height:7px; border-radius:50%; background:var(--graphite); display:block; }
.timer-meta{ display:flex; align-items:center; justify-content:space-between; }
.timer-meta .rnd{ font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:600; color:var(--slate); letter-spacing:.02em; }
.timer-meta .rnd b{ color:var(--obsidian); }
.timer-quip{ text-align:center; font-size:13.5px; color:var(--muted); font-style:italic; margin-top:20px; }

/* ---------- rotation weekly grid ---------- */
.rot{ margin-top:22px; border:1px solid var(--hair); border-radius:var(--r-md); overflow:hidden; }
.rot .rhead,.rot .rrow{ display:grid; grid-template-columns:84px 1fr 52px; align-items:center; gap:14px; padding:11px 16px; }
.rot .rhead{ background:color-mix(in srgb, var(--bone) 70%, var(--paper)); border-bottom:1px solid var(--hair); }
.rot .rhead .dh{ font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.rot .rrow{ border-top:1px solid var(--hairline); }
.rot .rrow:first-of-type{ border-top:0; }
.rot .rrow.today{ background:color-mix(in srgb, var(--o-100) 38%, var(--paper)); }
.rot .day{ display:flex; flex-direction:column; }
.rot .day .dn{ font-family:Sora,sans-serif; font-weight:600; font-size:14px; color:var(--obsidian); display:flex; align-items:center; gap:7px; }
.rot .day .tag{ font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--o-500); border-radius:4px; padding:1px 5px; }
.rot .day .ds{ font-size:11px; color:var(--muted); margin-top:2px; }
.rot .blocks{ display:flex; gap:5px; }
.rot .blocks b{ display:block; height:18px; flex:1; border-radius:4px; }
.rot .tot{ text-align:right; }
.rot .tot .n{ font-family:"JetBrains Mono",monospace; font-weight:700; font-size:16px; color:var(--obsidian); }
.rot .tot .s{ font-family:"JetBrains Mono",monospace; font-size:10px; color:var(--muted); }

/* ---------- focus heatmap ---------- */
.heat-card{ margin-top:4px; }
.heat-head{ display:flex; align-items:center; justify-content:space-between; }
.heat-scale{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); }
.heat-scale i{ width:11px; height:11px; border-radius:3px; display:block; }
.heat{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(7,1fr); gap:3px; margin-top:16px; }
.heat i{ width:11px; height:11px; border-radius:2.5px; background:var(--cat-revenue-soft); display:block; }
.heat i.l1{ background:var(--o-100); }
.heat i.l2{ background:var(--o-200); }
.heat i.l3{ background:var(--o-500); }
.heat i.l4{ background:var(--o-700); }

/* ---------- scoring breakdown card ---------- */
.score-card{ background:var(--obsidian); border-radius:var(--r-lg); padding:26px 26px 24px; color:var(--bone); box-shadow:var(--e3); }
.score-card .sc-h{ display:flex; align-items:center; gap:10px; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.score-card .sc-h .pt{ width:8px; height:8px; border-radius:50%; background:var(--o-500); display:block; }
.score-card .sc-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.score-card .sc-row:first-of-type{ margin-top:16px; }
.score-card .sc-row .lbl{ font-size:14px; color:#cfcdc4; }
.score-card .sc-row .lbl b{ color:#fff; font-weight:600; }
.score-card .sc-row .val{ font-family:"JetBrains Mono",monospace; font-weight:700; font-size:15px; }
.score-card .sc-row .val.pos{ color:#5fb89d; }
.score-card .sc-row .val.neg{ color:#e08a7e; }
.score-card .sc-total{ display:flex; align-items:baseline; justify-content:space-between; margin-top:18px; }
.score-card .sc-total .t1{ font-family:Sora,sans-serif; font-weight:600; font-size:16px; color:#fff; }
.score-card .sc-total .t2{ font-family:"JetBrains Mono",monospace; font-weight:700; font-size:30px; letter-spacing:-.02em; color:var(--o-500); }

/* ---------- floating output chip (reuse-friendly) ---------- */
.figchip{ position:absolute; background:var(--paper); border:1px solid var(--hair); border-radius:var(--r-md); box-shadow:var(--e3); padding:11px 14px; display:flex; align-items:center; gap:11px; }
.figchip .ok{ width:26px; height:26px; border-radius:50%; background:var(--o-100); display:grid; place-items:center; flex:none; }
.figchip .t1{ font-size:13px; font-weight:600; color:var(--obsidian); }
.figchip .t2{ font-size:11.5px; color:var(--muted); margin-top:1px; }

/* ---------- two-column media row ---------- */
.media-row{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.media-row.flip-cols .media-copy{ order:2; }
.media-copy h2{ font-family:Sora,sans-serif; font-weight:600; font-size:32px; letter-spacing:-.025em; color:var(--obsidian); margin:14px 0 0; line-height:1.12; }
.media-copy p{ font-size:16px; line-height:1.66; color:var(--slate); margin:16px 0 0; }

/* ---------- home hero: live timer ---------- */
.hero-timer .body{ padding:24px 26px 26px; }
.hero-timer .seg{ display:flex; width:100%; }
.hero-timer .seg button{ flex:1; cursor:pointer; transition:background var(--t-fast),color var(--t-fast); }
.hero-timer .seg button:hover:not(.active){ color:var(--graphite); }
.hero-timer .flip{ margin-top:24px; }
.hero-timer .flip .tile{ width:62px; height:82px; font-size:46px; border-radius:13px; }
.hero-timer.is-break .flip .tile{ background:linear-gradient(180deg,#2c3a34,#1c2a24); }
.ht-quip{ text-align:center; font-size:13px; color:var(--muted); margin-top:18px; min-height:1.2em; }
.ht-controls{ display:flex; align-items:center; gap:12px; margin-top:20px; }
.ht-controls .btn-primary{ min-width:118px; justify-content:center; }
.ht-controls .ht-round{ margin-left:auto; font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.hero-timer.running .ht-round{ color:var(--o-600); }
#htFill{ transition:width 1s linear; }
.hero-timer.done #htFill{ box-shadow:0 0 0 3px var(--o-100); }
.mockwrap .outchip > span:last-child{ display:flex; flex-direction:column; }

/* ---------- guide / doc-column figures ---------- */
.gfig{ margin:26px 0 10px; }
.gfig figcaption{ margin-top:12px; font-size:12.5px; line-height:1.55; color:var(--muted); }
.gfig figcaption b{ color:var(--graphite); font-weight:600; }
.doc-content .metric-row{ grid-template-columns:repeat(2,1fr); }
.doc-content .alloc-legend{ grid-template-columns:repeat(2,1fr); }
.doc-content .appwin .chrome{ gap:12px; padding:0 16px; }
.doc-content .appwin .chrome .atabs a{ padding:8px 9px; }
.doc-content .appwin .screen{ padding:24px 22px 26px; }
.doc-content .flip .tile{ width:60px; height:78px; font-size:44px; }
.doc-content .score-card{ margin:0; }

/* ---------- round-log card ---------- */
.logcard .lc-head{ display:flex; align-items:center; gap:10px; }
.logcard .lc-head .cdot{ width:10px; height:10px; border-radius:50%; background:var(--cat-revenue); }
.logcard .lc-head .t{ font-family:Sora,sans-serif; font-weight:600; font-size:16px; color:var(--obsidian); }
.logcard .lc-head .m{ margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--muted); }
.logcard .out{ display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--hairline); }
.logcard .out .on{ font-weight:600; font-size:14px; color:var(--obsidian); }
.logcard .out .ow{ font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--o-600); margin-left:8px; }
.logcard .out .step{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.logcard .out .step button{ width:26px; height:26px; border-radius:7px; border:1px solid var(--hair); background:var(--paper); color:var(--graphite); font-size:15px; font-weight:600; display:grid; place-items:center; cursor:default; }
.logcard .out .step .val{ font-family:"JetBrains Mono",monospace; font-weight:700; font-size:15px; min-width:18px; text-align:center; color:var(--obsidian); }
.logcard .rate{ display:flex; align-items:center; gap:8px; margin-top:18px; }
.logcard .rate .rl{ font-size:12.5px; color:var(--muted); margin-right:4px; }
.logcard .rate .chip{ font-size:12.5px; font-weight:600; padding:6px 13px; border-radius:var(--r-pill); border:1px solid var(--hair); color:var(--slate); background:var(--paper); }
.logcard .rate .chip.on{ background:var(--cat-revenue-soft); border-color:var(--cat-revenue); color:var(--cat-revenue); }

@media (max-width:900px){
  .metric-row{ grid-template-columns:repeat(2,1fr); }
  .media-row{ grid-template-columns:1fr; gap:34px; }
  .media-row.flip-cols .media-copy{ order:0; }
  .alloc-legend{ grid-template-columns:repeat(2,1fr); }
  .flip .tile{ width:58px; height:76px; font-size:42px; }
}
@media (max-width:560px){
  .metric-row{ grid-template-columns:1fr 1fr; }
  .appwin .chrome .atabs{ display:none; }
  .heat i{ width:9px; height:9px; }
}