/* Partner dashboard preview, scoped to the sixth section. */
.oct-continuation #office {
  --ink:#0a1d39; --muted:#4f6480; --line:#d2dfef;
  font-family:var(--page-font); color:var(--ink); min-height:0;
}
#office > .wrap { width:min(1480px,calc(100% - 2 * var(--gutter))); padding-block:clamp(64px,6.6vw,108px); }
#office .split { grid-template-columns:minmax(0,34fr) minmax(0,66fr); gap:clamp(28px,3.7vw,62px); align-items:center; }
#office .office-copy h2 { font:500 clamp(44px,3.95vw,67px)/1.05 var(--page-font); letter-spacing:-.047em; text-wrap:initial; }
#office .office-copy h2 em { color:#3868a7; }
#office .office-copy > h2 + p { margin:18px 0 27px; max-width:37ch; color:var(--muted); line-height:1.55; }
#office .office-perk { display:flex; gap:14px; padding-block:17px; border-top:1px solid var(--line); max-width:390px; align-items:flex-start; }
#office .office-perk > svg { width:21px; height:21px; margin-top:2px; color:#396eaf; }
#office .office-perk h3 { font-size:18px; font-weight:600; letter-spacing:-.025em; }
#office .office-perk p { margin:5px 0 0; font-size:14px; color:var(--muted); }
#office .office-icon { flex-shrink:0; width:17px; height:17px; }
#office .dash {
  margin:0; align-self:center; border:1px solid #b9cbdf; border-radius:18px; background:#f0f5fc;
  box-shadow:0 18px 42px -26px #28548d7a,0 0 60px 2px #88b6f51f;
}
#office .account-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:14px 17px; background:white; border-bottom:1px solid var(--line); }
#office .account-bar strong { font-size:16px; font-weight:650; letter-spacing:-.025em; }
#office .account-bar small { margin-left:auto; font-size:11px; color:var(--muted); }
#office .desk-layout { display:grid; grid-template-columns:clamp(116px,9.4vw,160px) minmax(0,1fr); }
#office .desk-rail { background:linear-gradient(155deg,#132f52,#0a1c34 82%); border:0; padding:18px 8px; gap:4px; }
#office .desk-rail button {
  display:flex; align-items:center; gap:8px; border:1px solid transparent; border-radius:7px; background:transparent;
  color:#cfdeee; font:550 clamp(11px,.86vw,14px)/1.35 var(--page-font); padding:10px 7px; text-align:left;
}
#office .desk-rail button .office-icon { color:#9fbde2; width:15px; height:15px; }
#office .desk-rail button[aria-pressed=true] { background:linear-gradient(110deg,#285789,#244368); border-color:#669bcb66; color:white; }
#office .desk-rail button[aria-pressed=true] svg { color:#a5ddff; }
#office .desk-rail button:hover { background-color:#244264; }
#office .desk-rail button:focus-visible { outline:2px solid #a8dcff; outline-offset:-3px; }
#office .panel-stack { background:linear-gradient(135deg,#f8fbff,#edf4fd); min-width:0; }
#office .dashbody { min-width:0; padding:clamp(14px,1.4vw,24px); font-variant-numeric:tabular-nums; }
#office .dashbody h3 { margin:0 0 15px; color:var(--ink); font:600 clamp(20px,1.65vw,27px)/1.15 var(--page-font); letter-spacing:-.04em; }
#office .account-stats { display:flex; gap:10px; margin-bottom:13px; }
#office .account-stat { min-width:0; flex:1; padding:13px 16px; background:#fff; border:1px solid #d1deec; border-radius:10px; }
#office .account-stat.accent { background:linear-gradient(115deg,#dceeff,#ebf4ff 65%,#d3e8ff); border-color:#bdd6f2; }
#office .account-stat > div { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:550; color:#385777; }
#office .account-stat strong { display:block; margin-top:7px; font-size:clamp(27px,2.3vw,39px); font-weight:600; letter-spacing:-.05em; line-height:1.12; }
#office .account-stat em { font-size:.51em; color:#405c7e; font-weight:550; letter-spacing:0; }
#office .account-chart, #office .account-table { background:#fff; border:1px solid var(--line); border-radius:10px; margin:0 0 12px; padding:12px 15px; }
#office .account-chart figcaption,#office .account-table h4 { margin:0; font:650 13px/1.4 var(--page-font); letter-spacing:-.015em; }
#office .account-chart figcaption span { color:var(--muted); font-size:10px; font-weight:500; margin-left:3px; }
#office .account-chart svg { display:block; width:100%; height:88px; }
#office .account-chart > div { display:flex; justify-content:space-between; font-size:10px; color:var(--muted); }
#office .account-table { margin-bottom:0; }
#office .account-table table { margin-top:7px; border-collapse:collapse; width:100%; font-size:13px; line-height:1.4; }
#office .account-table th { color:var(--muted); font-weight:500; font-size:11px; }
#office .account-table :is(td,th) { padding:8px 0; text-align:left; border-bottom:1px solid #e2ebf5; }
#office .account-table :is(td,th):last-child { text-align:right; padding-left:8px; }
#office .account-table tr:last-child td { border:0; }
#office .account-status { padding:3px 8px; color:#17614e; background:#e4f3ed; border-radius:12px; font-size:11px; }
#office .account-meter { width:min(100%,260px); padding:2px 0; }
#office .account-meter i { display:block; margin:5px 0 1px; height:4px; border-radius:4px; background:#e6eff8; }
#office .account-meter b { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#3777c9,#78b8f5); }
#office .account-withdraw { margin-top:14px; padding:7px 12px; background:#e5eef9; color:#506580; border:1px solid #d1deec; border-radius:7px; font-size:12px; cursor:default; }
@media (max-width:1050px) {
  #office .split { grid-template-columns:minmax(0,32fr) minmax(0,68fr); gap:24px; }
  #office .office-copy h2 { font-size:clamp(37px,4vw,45px); }
}
@media (max-width:850px) {
  #office .split { grid-template-columns:minmax(0,1fr); gap:24px; }
  #office .office-copy { max-width:650px; }
  #office .office-copy > h2 + p { max-width:48ch; }
  #office .office-perk { max-width:100%; }
}
@media (max-width:600px) {
  #office > .wrap { width:calc(100% - 2 * var(--gutter)); padding-block:52px; }
  #office .office-copy h2 { font-size:clamp(34px,9vw,42px); }
  #office .office-copy > h2 + p { margin:14px 0 20px; font-size:15px; }
  #office .office-perk { padding-block:12px; }
  #office .dash { border-radius:12px; }
  #office .account-bar { gap:6px 9px; padding:10px 12px; }
  #office .account-bar strong { font-size:15px; }
  #office .account-bar small { flex-basis:100%; margin:0; }
  #office .desk-layout { grid-template-columns:minmax(0,1fr); }
  #office .desk-rail { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:3px; padding:7px; }
  #office .desk-rail button { grid-column:span 2; justify-content:center; min-height:34px; font-size:12px; padding:5px 4px; }
  #office .desk-rail button:nth-last-child(-n+2) { grid-column:span 3; }
  #office .desk-rail button svg { display:none; }
  #office .dashbody { padding:12px; }
  #office .account-stats { gap:6px; }
  #office .account-stat { padding:10px; }
  #office .account-stat > div { font-size:11px; gap:3px; }
  #office .account-stat > div svg { display:none; }
  #office .account-stat strong { font-size:26px; }
  #office .account-chart,#office .account-table { padding:10px; }
  #office .account-table table { font-size:12px; }
}
@media (min-width:601px) and (max-width:720px) {
  #office .desk-rail { flex-direction:column; flex-wrap:nowrap; }
}

#office .desk-rail { background:linear-gradient(155deg,#123561,#081c37 50%,#06152c); }
#office .desk-rail button[aria-pressed=true] { background:linear-gradient(105deg,#2467b1,#214e83); border-color:#5a93d2; box-shadow:inset 2px 0 #a1ddff; }
#office .account-bar { background:linear-gradient(100deg,#fff,#f1f7ff); }
#office .account-bar small { color:#374f70; }
#office .dashbody { padding:clamp(14px,1.25vw,21px); }
#office .dashbody h3 { margin-bottom:12px; }
#office .account-stat { background:linear-gradient(115deg,#e6f1ff,#cfdef7); border-color:#b6cdea; padding:12px 15px; }
#office .account-stat.accent { background:linear-gradient(115deg,#b5e5ff 0%,#98c9ff 60%,#88baff); border-color:#7faadc; }
#office .account-stat strong { color:#071c3c; font-size:clamp(29px,2.45vw,40px); }
#office .account-stat > div,#office .account-stat em { color:#183b63; }
#office .ledger-card,#office .analysis-card,#office .income-chart {
  display:block; min-height:0; margin:0 0 10px; padding:11px 14px;
  background:white; border:1px solid #cadbec; border-radius:10px;
}
#office .dashbody > :last-child { margin-bottom:0; }
#office .dashbody h4,#office .income-chart figcaption { margin:0; font:650 14px/1.35 var(--page-font); letter-spacing:-.02em; }
#office .ledger-card table { width:100%; border-collapse:collapse; font-size:13px; line-height:1.3; margin-top:7px; }
#office .ledger-card :is(th,td) { padding:7px 3px; text-align:left; border-bottom:1px solid #dde7f2; }
#office .ledger-card th { font-size:11px; font-weight:550; color:#435a75; }
#office .ledger-card tbody tr:last-child td { border-bottom:0; }
#office .ledger-card :is(th,td):not(:first-child) { text-align:right; white-space:nowrap; }
#office .row-title { display:block; font-weight:600; }
#office .row-detail { display:block; color:#415b79; margin-top:2px; font-size:11px; }
#office .account-status { display:inline-block; font-size:11px; font-weight:600; color:#155943; background:#e0f2ea; }
#office .account-status.pending { color:#724511; background:#fff0d6; }
#office .income-chart figcaption small { display:inline; font-size:11px; color:#48617d; }
#office .plot { display:flex; justify-content:space-around; align-items:end; height:106px; margin:20px 0 20px;
  background:repeating-linear-gradient(0deg,#dce7f3 0 1px,transparent 1px 26px); }
#office .plot-column { display:flex; align-items:flex-end; justify-content:center; position:relative; width:15%; height:100%; }
#office .plot-column > div { width:min(56%,38px); border-radius:4px 4px 0 0; position:relative; background:linear-gradient(#76a9ec,#bdd6f5); }
#office .plot-column:last-child > div { background:linear-gradient(#2469cc,#579cf2); }
#office .plot-column b,#office .plot-column span { position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:11px; }
#office .plot-column b { bottom:100%; color:#1e426f; font-weight:650; }
#office .plot-column span { top:100%; color:#47617f; padding-top:2px; }
#office .meter-row { padding:11px 0 5px; }
#office .meter-row > div:first-child { display:flex; justify-content:space-between; font-size:13px; }
#office .meter-line { display:flex; gap:9px; align-items:center; }
#office .meter-line i { flex:1; height:5px; border-radius:5px; background:#e3edf8; }
#office .meter-line i b { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#2870cc,#76baf9); }
#office .meter-line small { min-width:40px; text-align:right; color:#405979; }
#office .source-strip { display:flex; height:15px; overflow:hidden; border-radius:5px; gap:2px; margin:20px 0 12px; }
#office .channel-summary { --first:#2b6dbe; --second:#67a6e5; --third:#add7f3; }
#office .source-strip i:nth-child(1),#office .channel-summary li:nth-child(1) i { background:var(--first); }
#office .source-strip i:nth-child(2),#office .channel-summary li:nth-child(2) i { background:var(--second); }
#office .source-strip i:nth-child(3),#office .channel-summary li:nth-child(3) i { background:var(--third); }
#office .channel-summary ul { list-style:none; padding:0; margin:0; }
#office .channel-summary li { display:flex; align-items:center; gap:9px; font-size:13px; padding:7px 0; }
#office .channel-summary li i { width:8px; height:8px; border-radius:2px; }
#office .channel-summary li strong { margin-left:auto; font-weight:650; }
#office .account-withdraw { margin-top:2px; border:1px solid #82b5ea; background:linear-gradient(105deg,#bceaff,#74adff); color:#102a49; font-weight:650; padding:10px 16px; border-radius:10px; opacity:1; }
@media(max-width:600px){
  #office .dashbody { padding:10px; }
  #office .account-stat { padding:9px; }
  #office .account-stat strong { font-size:clamp(23px,6.5vw,31px); white-space:nowrap; }
  #office .account-stat em { font-size:.47em; }
  #office .ledger-card,#office .analysis-card,#office .income-chart { padding:9px; }
  #office .ledger-card table { font-size:12px; }
  #office .ledger-card :is(th,td) { padding:6px 2px; }
  #office .ledger-card th,#office .row-detail { font-size:10.5px; }
  #office .account-status { padding:3px 4px; font-size:10px; }
  #office .plot { height:76px; }
  #office .plot-column b,#office .plot-column span { font-size:10px; }
}
/* The overview sets the shared stack height. Give the other reports' rows
   that space while keeping every value visible at narrow widths. */
#office .dashbody:not(:first-child) { display:flex; flex-direction:column; }
#office .dashbody:not(:first-child) .ledger-card { flex:1; display:flex; flex-direction:column; }
#office .dashbody:not(:first-child) .ledger-card table { flex:1; height:100%; }
#office .dashbody:not(:first-child) .account-withdraw { align-self:flex-start; }
#office #office-pane-1 .analysis-card { flex:1; display:flex; flex-direction:column; justify-content:space-evenly; }

/* The outer width already matches Quality. Only redistribute its available space. */
#office > .wrap { padding-block:clamp(64px,6.2vw,100px) clamp(48px,5vw,78px); }
#office .split {
  grid-template-columns:minmax(0,40fr) minmax(0,60fr);
  gap:clamp(32px,3.15vw,52px);
}
#office .account-bar { padding-block:10px; }
#office .desk-rail button { white-space:nowrap; }
#office .dashbody { padding:clamp(12px,1vw,16px); }
#office .dashbody h3 { margin-bottom:9px; }
#office .account-stats { margin-bottom:9px; }
#office .account-stat { padding:9px 13px; }
#office .account-stat strong { margin-top:4px; font-size:clamp(28px,2.15vw,35px); }
#office :is(.ledger-card,.analysis-card,.income-chart) { padding:9px 12px; margin-bottom:8px; }
#office .dashbody > :last-child { margin-bottom:0; }
#office .plot { height:83px; margin-block:16px; }
#office .ledger-card table { margin-top:4px; }
#office .ledger-card :is(td,th) { padding-block:5px; }
#office #office-pane-1 .analysis-card { flex:1 0 auto; }
#office .meter-row { padding-block:6px 3px; }
/* The landing-page preview shows the latest entries of each existing ledger. */
#office-pane-0 tbody tr:nth-child(n+4),
#office-pane-2 tbody tr:nth-child(n+6),
#office-pane-4 tbody tr:nth-child(n+6) { display:none; }
@media(max-width:1024px) {
  #office .split { grid-template-columns:minmax(0,1fr); gap:25px; }
  #office .office-copy { max-width:680px; }
}
@media(max-width:600px) {
  #office > .wrap { padding-block:50px; }
  #office .desk-layout { grid-template-columns:minmax(0,1fr); }
  #office .dashbody { padding:10px; }
  #office .account-stat { padding:9px; }
  #office .account-stat strong { font-size:clamp(23px,6.5vw,31px); }
  #office :is(.ledger-card,.analysis-card,.income-chart) { padding:9px; }
  #office .plot { height:72px; }
}

@media (min-width: 1025px) {
  .oct-continuation #office {
    /* Allow for fractional scroll alignment at both viewport edges. */
    min-height: calc(100svh + 2px);
    box-sizing: border-box;
    align-content: center;
    scroll-margin-block-start: -1px;
  }
  #office > .wrap { padding-block: clamp(32px, 4vh, 48px); }
}
/* Reserve the table footer inside the UTM card instead of stretching the
   table to the entire card height alongside its heading. */
#office #office-pane-3 .ledger-card {
  display: grid;
  grid-template-rows: auto minmax(min-content, 1fr);
  gap: 4px;
  padding-bottom: 14px;
}
#office #office-pane-3 .ledger-card table { margin: 0; height: auto; }

@media screen and (prefers-reduced-motion: no-preference) {
  #office .dash[data-await-entry]:not(:focus-within) { opacity:0; }
}
#office .meter-line i b { transform-origin:left center; }
