/* Shared Invoices & Finance UI crops. */
.if-scene,.if-scene *{box-sizing:border-box}.if-scene{width:100%;height:100%;overflow:hidden;color:#17263d;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-align:left}.if-stage{position:relative;width:100%;height:100%;min-height:205px;overflow:hidden;background:#fff;font-size:10px}.if-top{height:31px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 13px;border-bottom:1px solid #e6ebf3;color:#8091a6;font-size:8px}.if-top b{color:#1355b2;font-size:9px}.if-cursor{position:absolute;z-index:9;left:50%;top:10%;width:23px;height:23px;pointer-events:none;transition:left .2s cubic-bezier(.35,0,.2,1),top .2s cubic-bezier(.35,0,.2,1),transform .09s ease;filter:drop-shadow(0 1px 1px #30406040)}.if-cursor svg{display:block;width:100%;height:100%}.if-cursor.if-click{transform:scale(.84)}
.if-only-b,.if-only-c,.if-bc{display:none!important}.if-scene[data-state=b] .if-only-a,.if-scene[data-state=b] .if-only-c,.if-scene[data-state=c] .if-only-a,.if-scene[data-state=c] .if-only-b{display:none!important}.if-scene[data-state=b] .if-only-b,.if-scene[data-state=c] .if-only-c,.if-scene[data-state=b] .if-bc,.if-scene[data-state=c] .if-bc{display:block!important}
/* Finance metrics and period controls. */
.if-overview{height:calc(100% - 31px);padding:13px 14px}.if-overview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:13px}.if-overview-head small,.if-breakdown-content small,.if-invoice-id small,.if-share small{display:block;color:#7186a0;font-size:7px;font-weight:800;letter-spacing:.07em}.if-overview-head strong{display:block;margin-top:4px;font-size:16px;letter-spacing:-.03em}.if-period{display:flex;gap:3px;padding:3px;border-radius:6px;background:#f0f4f9}.if-period span{padding:5px 7px;border-radius:4px;color:#70839c;font-size:8px;font-weight:800}.if-scene-1[data-state=a] .if-active-a,.if-scene-1[data-state=b] .if-active-b,.if-scene-1[data-state=c] .if-active-c{background:#fff;color:#1355b2;box-shadow:0 1px 3px #1f46711b}.if-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.if-metrics>div{min-width:0;padding:10px;border:1px solid #e3ebf4;border-radius:7px;background:#fbfcfe}.if-metrics small{display:block;margin-bottom:6px;color:#788ba3;font-size:7px;font-weight:800}.if-metrics strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:18px;letter-spacing:-.04em}.if-metrics .if-net{border-color:#d9e7f7;background:#edf5ff}.if-metrics .if-net strong{color:#1355b2}.if-chart-head{display:flex;justify-content:space-between;gap:8px;margin-top:17px;color:#526982;font-size:9px;font-weight:800}.if-chart-head span{color:#8b9bae;font-size:7px;font-weight:600}.if-chart{height:74px;display:flex;align-items:end;justify-content:space-around;gap:8px;margin-top:8px;padding:0 6px;border-bottom:1px solid #e4ebf4}.if-chart span{width:9%;height:var(--h);border-radius:4px 4px 0 0;background:#a9c6ee}.if-chart span:nth-child(3n){background:#1559b4}.if-chart span:nth-child(5){background:#ee8ab6}
/* Revenue, cost and recent records in one crop. */
.if-breakdown{height:calc(100% - 31px)}.if-view-tabs{display:flex;gap:5px;padding:10px 10px 8px;border-bottom:1px solid #e7edf5}.if-view-tabs span{flex:1;padding:6px 3px;border-radius:5px;background:#f1f4f8;color:#71849b;font-size:8px;font-weight:800;text-align:center}.if-scene-2[data-state=a] .if-active-a,.if-scene-2[data-state=b] .if-active-b,.if-scene-2[data-state=c] .if-active-c{background:#e5f0fd;color:#1355b2}.if-breakdown-content{padding:12px 13px}.if-breakdown-content strong{display:block;margin:6px 0 13px;color:#1355b2;font-size:19px;letter-spacing:-.04em}.if-break-row{display:flex;justify-content:space-between;gap:7px;padding:9px 1px;border-bottom:1px solid #e9eef5;color:#586d85;font-size:8px}.if-break-row b{color:#223a56;white-space:nowrap}
.if-break-chart-row{align-items:center;padding-block:7px}.if-break-label{flex:1;min-width:0}.if-break-track{display:block;height:4px;max-width:210px;margin-top:5px;overflow:hidden;border-radius:4px;background:#e8eef7}.if-break-track i{display:block;width:var(--share);height:100%;border-radius:4px;background:#1760bd}.if-scene-2[data-state=b] .if-break-track i{background:#dc6297}
/* Linked invoice and an in-UI share preview. */
.if-invoice{height:calc(100% - 31px)}.if-source-tabs{display:flex;gap:5px;padding:10px 11px 7px;border-bottom:1px solid #e7edf4}.if-source-tabs span{flex:1;padding:6px 4px;border-radius:5px;background:#f0f4f9;color:#72849b;font-size:8px;font-weight:800;text-align:center}.if-scene-3[data-state=a] .if-active-a,.if-scene-3[data-state=b] .if-active-b{background:#e5f0fd;color:#1355b2}.if-invoice-body{padding:11px 13px}.if-invoice-id strong{display:block;margin:5px 0 9px;font-size:14px;letter-spacing:-.03em}.if-invoice-line{display:flex;justify-content:space-between;gap:6px;padding:6px 1px;border-bottom:1px solid #e9eef5;color:#74869d;font-size:8px}.if-invoice-line b{color:#253c57;white-space:nowrap}.if-invoice-line .if-pending{color:#b87923}.if-invoice-line .if-paid{color:#278259}.if-invoice-actions{display:flex;gap:5px;margin-top:8px}.if-invoice-actions span{padding:6px 7px;border:1px solid #dbe7f6;border-radius:5px;background:#edf4fd;color:#1355b2;font-size:7px;font-weight:800;white-space:nowrap}.if-share{margin:11px 12px;padding:10px;border:1px solid #d9e5f4;border-radius:8px;background:#fbfcfe}.if-share-head{display:flex;justify-content:space-between;gap:5px;margin-bottom:10px;font-size:10px}.if-share-head span{color:#c94a84;font-size:8px;font-weight:800}.if-share-preview{margin-top:9px;padding:9px;border-radius:5px;background:#eaf3fd;color:#1456ac;font-size:9px;font-weight:750}.if-share p{margin:8px 0 0;color:#7d8fa4;font-size:7px}
/* Doki shows guidance, never a fabricated exported file. */
.if-doki{height:calc(100% - 31px);padding:12px 15px}.if-doki-head{display:flex;align-items:center;gap:8px;padding-bottom:9px;border-bottom:1px solid #e8edf4}.if-doki-avatar{width:25px;height:25px;display:grid;place-items:center;border-radius:7px;background:#e9f1fc;color:#1355b2;font-size:13px}.if-doki-head strong{display:block;font-size:10px}.if-doki-head small{display:block;margin-top:2px;color:#8393a7;font-size:7px}.if-doki-conversation{min-height:104px;padding:12px 2px}.if-doki-conversation>p{margin:10px 0;color:#74869c;font-size:10px}.if-question{width:max-content;max-width:78%;margin-left:auto;padding:9px;border-radius:8px 8px 2px 8px;background:#e8f1fd;color:#154d94;font-size:8px;font-weight:750}.if-answer{max-width:85%;margin-top:9px;padding:9px;border:1px solid #e4ebf3;border-radius:8px 8px 8px 2px;color:#526982;font-size:8px;line-height:1.45}.if-answer b{display:block;margin-top:6px;color:#1355b2}.if-doki-actions{display:flex;flex-wrap:wrap;gap:6px}.if-doki-actions span{padding:7px 9px;border:1px solid #dce8f6;border-radius:6px;background:#f0f6fe;color:#1456ae;font-size:8px;font-weight:800}.if-doki-actions .if-target-clear{border-color:#f3dfe9;background:#fdf1f6;color:#be4a80}
/* Existing collage width rhythm, inset crop and responsive heights. */
#module-06 .moment-grid{grid-auto-rows:435px}#module-06 .moment-card{background:#eaf2fb}#module-06 .moment-copy{min-height:137px}#module-06 .moment-demo-link{display:inline-flex;align-items:center;gap:4px;margin-top:8px;color:#1355b2;font-size:11px;font-weight:750}#module-06 .moment-demo-link:hover{text-decoration:underline;text-underline-offset:3px}#module-06 .moment-visual.finance-moment-visual{overflow:hidden;padding:0;border-color:#dce6f2;background:#fff}
.highlights .highlight-card,.highlights .highlight-card:nth-child(2),.highlights .highlight-card:nth-child(3),.highlights .highlight-card:nth-child(4){height:425px;background:#eaf2fb}.highlights .highlight-copy{min-height:148px}.highlights .highlight-visual.finance-moment-visual{margin:0 0 20px;padding:0;border:1px solid #dce6f2;border-radius:10px;background:#fff}
@media(max-width:900px){.if-overview,.if-breakdown-content,.if-doki{padding-right:10px;padding-left:10px}.if-metrics strong{font-size:15px}}
@media(max-width:620px){#module-06 .moment-grid{grid-auto-rows:420px}.highlights .highlight-card,.highlights .highlight-card:nth-child(2),.highlights .highlight-card:nth-child(3),.highlights .highlight-card:nth-child(4){height:425px}.highlights .highlight-copy{min-height:141px}}
/* The three period states update the chart as well as the totals. Keep bars anchored
   to the baseline, with a short transition that finishes before the next state. */
.if-scene-1 .if-chart span{transition:height 520ms cubic-bezier(.22,1,.36,1)}
.if-scene-1 .if-chart span:nth-child(1){--h-week:42%;--h-month:61%;--h-year:35%}
.if-scene-1 .if-chart span:nth-child(2){--h-week:66%;--h-month:49%;--h-year:53%}
.if-scene-1 .if-chart span:nth-child(3){--h-week:54%;--h-month:76%;--h-year:47%}
.if-scene-1 .if-chart span:nth-child(4){--h-week:78%;--h-month:63%;--h-year:70%}
.if-scene-1 .if-chart span:nth-child(5){--h-week:62%;--h-month:84%;--h-year:64%}
.if-scene-1 .if-chart span:nth-child(6){--h-week:88%;--h-month:70%;--h-year:92%}
.if-scene-1 .if-chart span:nth-child(7){--h-week:71%;--h-month:94%;--h-year:82%}
.if-scene-1[data-state=a] .if-chart span{height:var(--h-week)}
.if-scene-1[data-state=b] .if-chart span{height:var(--h-month)}
.if-scene-1[data-state=c] .if-chart span{height:var(--h-year)}
@media(prefers-reduced-motion:reduce){.if-cursor{display:none!important}.if-scene *{transition:none!important}}
.if-scene-3[data-state=c] .if-active-a{background:#e5f0fd;color:#1355b2}