/* Page-level layout for the DTS build. Tokens and .dts-* components come from
   the design system's styles.css — link that first. Nothing here re-styles a component. */

.page{max-width:1120px;margin:0 auto;padding:0 40px}
.hidden{display:none !important}

/* Site */
.site-head{border-bottom:var(--border-hairline) solid var(--border-subtle);background:var(--surface-page)}
.site-head .page{height:72px;display:flex;align-items:center}
.site-hero{padding:40px 0 72px}
.site-hero .page{display:grid;grid-template-columns:1.5fr 1fr;gap:64px;align-items:start;padding:0 40px}
.site-hero h1{font-size:48px;line-height:1.05;letter-spacing:-.026em;font-weight:var(--weight-medium);max-width:19ch}
.site-hero p{margin-top:24px;font-size:var(--text-body-l);line-height:var(--lh-body-l);color:var(--text-muted);max-width:54ch}
.portal{background:var(--surface-inverse);border-radius:var(--radius-card);padding:24px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.portal h2{font-size:var(--text-h2);letter-spacing:var(--ls-h2);color:var(--n-0);font-weight:var(--weight-medium)}
.services{padding-bottom:88px}
.services-panel{background:var(--surface-card);border:var(--border-hairline) solid var(--border-subtle);border-radius:var(--radius-card)}
.services-panel>header{padding:20px 28px;border-bottom:var(--border-hairline) solid var(--border-subtle)}
.service{display:grid;grid-template-columns:44px 24px 300px 1fr;gap:20px;align-items:baseline;padding:26px 28px;border-top:var(--border-hairline) solid var(--border-subtle)}
.service:first-of-type{border-top:0}
.service .num{font-family:var(--font-data);font-size:var(--text-caption);color:var(--text-disabled)}
.service .name{font-size:var(--text-h2);line-height:1.3;letter-spacing:var(--ls-h2);font-weight:var(--weight-medium);color:var(--text-strong)}
.service p{font-size:var(--text-body);line-height:1.6;color:var(--text-muted);max-width:54ch}
@media (max-width:900px){
.site-hero .page{grid-template-columns:1fr;gap:40px}
.service{grid-template-columns:44px 24px 1fr;grid-template-rows:auto auto}
.service p{grid-column:3}
}
@media (max-width:640px){
.page{padding:0 20px}
.site-head .page{height:60px}
.site-hero{padding:32px 0 48px}
.site-hero .page{gap:32px;padding:0 20px}
.site-hero h1{font-size:32px;line-height:1.1}
.site-hero p{margin-top:16px}
.services{padding-bottom:48px}
.services-panel>header{padding:16px 20px}
.service{grid-template-columns:24px 1fr;gap:6px 14px;align-items:center;padding:20px}
.service .num{display:none}
.service p{grid-column:1 / -1}
}

/* Auth */
.auth{min-height:100vh;background:var(--surface-page);display:flex;flex-direction:column;align-items:center;padding:72px 24px 48px}
.auth-card{width:100%;max-width:400px;margin-top:32px;background:var(--surface-card);border:var(--border-hairline) solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--shadow-xs);padding:32px}
.auth-card.wide{max-width:560px}
.auth-card h1{font-size:var(--text-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);font-weight:var(--weight-semibold)}
.auth-card .sub{margin-top:8px;font-size:var(--text-body-s);line-height:1.6;color:var(--text-muted)}
.auth-form{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.auth-alt{margin-top:24px;padding-top:16px;border-top:var(--border-hairline) solid var(--border-subtle);font-size:var(--text-body-s);color:var(--text-muted);display:flex;gap:6px;flex-wrap:wrap}
.auth-alt a{color:var(--text-strong);font-weight:var(--weight-medium)}
.auth-badge{display:inline-flex;padding:9px;border-radius:var(--radius-pill);background:var(--surface-sunken);color:var(--text-body);margin-bottom:18px}
.auth-badge.ok{background:var(--status-ok-bg);color:var(--status-ok-fg)}
.legend{padding-bottom:10px;border-bottom:var(--border-hairline) solid var(--border-subtle)}
.group{display:flex;flex-direction:column;gap:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-city{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:16px}

/* App shell */
.shell{display:grid;grid-template-columns:var(--sidenav-w) 1fr;min-height:100vh;background:var(--surface-page)}
.shell-nav{border-right:var(--border-hairline) solid var(--border-subtle);background:var(--surface-shell);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.shell-nav>.brand{height:var(--topbar-h);display:flex;align-items:center;padding:0 14px;border-bottom:var(--border-hairline) solid var(--border-subtle);overflow:hidden}
.shell-nav>.brand .dts-wordmark-name{font-size:10px;letter-spacing:.07em}
.shell-nav>nav{padding:4px 10px;flex:1;overflow:auto}
.shell-user{border-top:var(--border-hairline) solid var(--border-subtle);padding:12px;display:flex;align-items:center;gap:10px}
.shell-user .who{min-width:0;flex:1}
.shell-user .name{font-size:var(--text-body-s);font-weight:var(--weight-medium);color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell-user .org{font-size:var(--text-caption);color:var(--text-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell-main{min-width:0;display:flex;flex-direction:column}
.topbar{height:var(--topbar-h);display:flex;align-items:center;gap:16px;padding:0 24px;border-bottom:var(--border-hairline) solid var(--border-subtle);background:var(--surface-shell);position:sticky;top:0;z-index:10}
.topbar .title{font-size:var(--text-h3);font-weight:var(--weight-semibold);letter-spacing:var(--ls-h3);color:var(--text-strong)}
.topbar .sub{font-size:var(--text-caption);color:var(--text-muted);margin-top:1px}
.topbar .tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.topbar .tools>#tools{display:flex;align-items:center;gap:8px}
.content{padding:24px;display:flex;flex-direction:column;gap:16px;flex:1}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.kpis>*{min-width:0}
.split{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start}
.split.split-13{grid-template-columns:1.3fr 1fr}
.split>*{min-width:0}
.kpis.kpis-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){.split,.split.split-13{grid-template-columns:1fr}.summary{position:static}}
@media (max-width:900px){.kpis.kpis-3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}}
.stack{display:flex;flex-direction:column;gap:16px}
.toolbar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:var(--border-hairline) solid var(--border-subtle)}
.rowlist>div{display:flex;gap:10px;padding:10px 4px;border-top:var(--border-hairline) solid var(--border-subtle);font-size:var(--text-body-s);color:var(--text-body)}
.rowlist>div:first-child{border-top:0}
.rowlist .when{font-family:var(--font-data);font-size:var(--text-caption);color:var(--text-subtle);white-space:nowrap;margin-left:auto}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:var(--text-body-s)}
.kv b{font-family:var(--font-data);font-size:var(--text-caption);color:var(--text-strong);font-weight:var(--weight-regular);text-align:right}
.toasts{position:fixed;right:24px;bottom:24px;z-index:50;display:flex;flex-direction:column;gap:10px}
.detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.detail-head h1{font-size:var(--text-h1);letter-spacing:var(--ls-h1)}
.tagrow{margin-top:8px;display:flex;gap:8px}
.head-actions{display:flex;gap:8px}
.foot-split{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%}
.note{font-size:var(--text-caption);line-height:1.6;color:var(--text-muted)}

/* Admin — client list */
.searchrow{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:var(--border-hairline) solid var(--border-subtle)}
.searchrow .search{width:300px}
#clients-table,#history-table,#inv-table{overflow-x:auto}
#clients-table .dts-table,#inv-table .dts-table{min-width:840px}
#history-table .dts-table{min-width:640px}
.rowcount{margin-left:auto;white-space:nowrap;font-family:var(--font-data);font-size:var(--text-caption);color:var(--text-subtle)}
.detailgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px 24px}
.detailgrid .metaval{overflow-wrap:anywhere}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.grid-3>*{min-width:0}
.who{display:flex;align-items:center;gap:10px}
.rowgo{display:inline-flex;color:var(--n-300)}
tr:hover .rowgo{color:var(--text-body)}
.crumbrow{margin-bottom:4px}

/* Admin — invoice composer */
.lines{display:flex;flex-direction:column}
.lines-head,.line{display:grid;grid-template-columns:1fr 104px 132px 28px;gap:12px;align-items:center}
.lines-head{padding-bottom:8px}
.lines-head>span:nth-child(2),.lines-head>span:nth-child(3){text-align:right}
.line{padding:8px 0;border-top:var(--border-hairline) solid var(--border-subtle)}
.line .hrs{text-align:right}
.line .amount{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:var(--text-body-s);color:var(--text-strong);text-align:right}
.running{font-family:var(--font-data);font-size:var(--text-caption);color:var(--text-muted)}
.rate-row{display:grid;grid-template-columns:minmax(140px,180px) 1fr;gap:16px;align-items:start}
.rate-row>*{min-width:0}
.dpick{position:relative;max-width:280px}
.dpick-btn{display:flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--font-data);font-size:var(--text-body-s);color:var(--text-strong)}
.dpick-btn>.dts-icon:last-child{margin-left:auto;color:var(--text-subtle)}
.dpick-val{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpick-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:30;width:276px;padding:12px;background:var(--surface-card);border:var(--border-hairline) solid var(--border-subtle);border-radius:var(--radius-panel);box-shadow:var(--shadow-md)}
.dpick-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dpick-month{font-size:var(--text-body-s);font-weight:var(--weight-medium);color:var(--text-strong)}
.dpick-dow,.dpick-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dpick-dow{margin-bottom:4px}
.dpick-dow span{text-align:center;font-family:var(--font-data);font-size:var(--text-eyebrow);letter-spacing:var(--ls-eyebrow);color:var(--text-subtle)}
.dpick-day{height:32px;padding:0;border:0;background:transparent;border-radius:var(--radius-sm);font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:var(--text-body-s);color:var(--text-body);cursor:pointer;transition:var(--transition-control)}
.dpick-day:hover{background:var(--surface-hover);color:var(--text-strong)}
.dpick-day[data-off=true]{color:var(--text-disabled)}
.dpick-day[data-in=true]{background:var(--surface-selected);color:var(--text-strong)}
.dpick-day[data-end=true]{background:var(--ink);color:var(--text-inverse)}
.dpick-foot{display:flex;gap:4px;margin-top:10px;padding-top:10px;border-top:var(--border-hairline) solid var(--border-subtle)}
.composer-top{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:stretch}
.composer-top>*{min-width:0}
.summary{display:flex}
.summary>.dts-card{flex:1;display:flex;flex-direction:column}
.summary .dts-card-body{flex:1;display:flex;flex-direction:column}
.summary .total{margin-top:auto}
@media (max-width:1100px){.composer-top{grid-template-columns:1fr}}
.total{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:16px;padding-top:14px;border-top:var(--border-hairline) solid var(--border-subtle);font-size:var(--text-body-s);color:var(--text-muted)}
.total b{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:var(--text-h2);font-weight:var(--weight-regular);color:var(--text-strong)}

/* Admin — invoice dialog */
.metarow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding-bottom:16px;border-bottom:var(--border-hairline) solid var(--border-subtle)}
.metarow.metarow-3{grid-template-columns:repeat(3,1fr)}
.metaval{margin-top:4px;font-family:var(--font-data);font-size:var(--text-body-s);color:var(--text-strong)}
.line-read{display:grid;grid-template-columns:1fr 90px 120px;gap:16px;padding:12px 0;border-bottom:var(--border-hairline) solid var(--border-subtle);font-size:var(--text-body-s)}
.line-read .h,.line-read .a{font-family:var(--font-data);font-variant-numeric:tabular-nums;text-align:right;color:var(--text-strong)}
.line-read .h{color:var(--text-muted)}

/* Mobile — app shell: sidebar becomes a horizontal top nav */
@media (max-width:760px){
.shell{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.shell-nav{position:static;height:auto;border-right:0;border-bottom:var(--border-hairline) solid var(--border-subtle)}
.shell-nav>.brand{height:48px;border-bottom:0}
.shell-nav>nav{display:flex;flex-direction:row;align-items:center;gap:4px;padding:0 10px 10px;overflow-x:auto;flex:none}
.shell-nav .dts-sidenav-group{display:none}
.shell-nav .dts-navitem{width:auto;flex:none;white-space:nowrap;height:36px}
.shell-nav .dts-navitem-trail{margin-left:6px}
.shell-user{display:none}
.topbar{height:auto;min-height:var(--topbar-h);padding:8px 16px;flex-wrap:wrap;row-gap:4px}
.content{padding:16px}
.detail-head,.foot-split,.searchrow{flex-wrap:wrap}
.searchrow .search{width:auto;flex:1;min-width:180px}
}

/* Mobile — forms, dialogs, toasts */
@media (max-width:640px){
.auth{padding:40px 16px 32px}
.auth-card{padding:24px 20px}
.grid-2,.grid-city,.rate-row{grid-template-columns:1fr}
.metarow,.metarow.metarow-3{grid-template-columns:repeat(2,1fr)}
.lines-head,.line{grid-template-columns:1fr 60px 84px 28px;gap:8px}
.line-read{grid-template-columns:1fr 60px 90px;gap:10px}
.dts-scrim{padding:16px}
.toasts{left:16px;right:16px;bottom:16px}
}