/* Shared language for the three everyday workspaces. Keep detail inside the record. */
.flow-shell :is(.studio-v3,.books-desk,.mail-workspace) {
 --surface:var(--desk-surface); --surface-alt:var(--desk-soft); --border:var(--desk-border);
 --copy:var(--ink); --quiet:var(--muted); min-width:0; font-family:Arial,sans-serif;
}
.flow-shell :is(.portfolio-heading,.books-desk>.document-heading,.mail-heading) {
 display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:20px; margin:0 0 22px;
}
.flow-shell :is(.portfolio-heading h3,.books-desk>.document-heading h3,.mail-heading h2) {
 display:flex; align-items:center; gap:12px; font:600 36px/1.15 Rajdhani,sans-serif; margin:0 0 7px;
}
.flow-shell :is(.portfolio-heading p,.books-desk>.document-heading p,.mail-heading p) {
 font:13px/1.6 Arial,sans-serif; color:var(--muted); margin:0;
}
.flow-shell .books-desk>.document-heading>div { display:block; }
.flow-shell :is(.studio-v3,.books-desk,.mail-workspace) .action {
 display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:40px;
 padding:10px 14px; font:600 16px/1.25 Rajdhani,sans-serif; letter-spacing:0; text-transform:none;
 clip-path:none; border-radius:4px; white-space:normal; box-shadow:none;
}
.flow-shell :is(.studio-v3,.books-desk,.mail-workspace) .action>.ui-icon { width:18px; height:18px; }
.flow-shell :is(.studio-v3,.books-desk,.mail-workspace) .text-button {
 font:500 13px/1.5 Arial,sans-serif; letter-spacing:0;
}
.flow-shell :is(.portfolio-filters,.studio-view-tabs,.books-stages) {
 display:flex; flex-wrap:wrap; align-items:stretch; gap:2px; padding:0;
 margin:0 0 20px; border:0; border-bottom:1px solid var(--line); background:none;
}
.flow-shell :is(.portfolio-filters,.studio-view-tabs,.books-stages) button {
 display:flex; align-items:center; justify-content:flex-start; gap:8px; flex:0 1 auto; min-width:0;
 min-height:42px; padding:10px 12px; border:0; border-bottom:2px solid transparent;
 border-radius:3px 3px 0 0; background:transparent; color:var(--muted);
 font:500 16px/1.2 Rajdhani,sans-serif; text-align:left; box-shadow:none;
}
.flow-shell :is(.portfolio-filters,.studio-view-tabs,.books-stages) button.active {
 color:var(--amber); border-bottom-color:var(--amber); background:color-mix(in srgb,var(--amber) 6%,transparent);
}
.flow-shell.light :is(.portfolio-filters,.studio-view-tabs,.books-stages) button.active { color:#795210; }
.flow-shell :is(.portfolio-filters,.studio-view-tabs,.books-stages) button:hover:not(.active) { background:var(--desk-soft); color:var(--ink); }
.flow-shell :is(.portfolio-filters button>span,.books-stages b) {
 display:grid; place-items:center; min-width:18px; height:18px; padding:0 4px; border:0;
 border-radius:3px; background:var(--desk-soft); color:var(--muted); font:11px/1 Arial,sans-serif;
}
.flow-shell .books-stages button.has-work b { color:var(--amber); background:color-mix(in srgb,var(--amber) 10%,var(--desk-surface)); }
.flow-shell.light .books-stages button.has-work b { color:#795210; }
.flow-shell .books-stages strong { font:inherit; color:inherit; }
.flow-shell .books-stages .ui-icon { width:17px; height:17px; }

/* Products: a compact visual catalogue, then one product and one task. */
.flow-shell .portfolio-create-control { gap:6px; flex-shrink:0; }
.flow-shell .portfolio-create-control>small { font:11px/1.4 Arial,sans-serif; }
.flow-shell .portfolio-attention { padding:12px 16px; margin:0 0 16px; border-radius:4px; gap:12px; }
.flow-shell .portfolio-attention strong { font:600 19px/1.2 Rajdhani,sans-serif; }
.flow-shell .portfolio-attention p { font:12px/1.5 Arial,sans-serif; margin:3px 0 0; }
.flow-shell .portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.flow-shell .portfolio-card { max-width:none; border:1px solid var(--line); border-radius:5px; background:var(--desk-surface); box-shadow:none; }
.flow-shell .portfolio-card:hover,.flow-shell .portfolio-card:focus-within { transform:none; border-color:var(--cyan); box-shadow:none; }
.flow-shell .portfolio-card:before { display:none; }
.flow-shell .portfolio-card-stage { height:148px; background:var(--desk-soft); }
.flow-shell .portfolio-card-stage .product-illustration { width:160px; height:160px; margin-top:0; }
.flow-shell .portfolio-card-body { padding:18px; }
.flow-shell .portfolio-card h4 button { font-size:25px; }
.flow-shell .portfolio-card-kind { display:flex; flex-direction:row; flex-wrap:wrap; gap:5px 14px; font:12px/1.5 Arial,sans-serif; margin:6px 0 14px; }
.flow-shell .portfolio-card-kind>span { font:inherit; }
.flow-shell .portfolio-card-metrics { padding-top:12px; }
.flow-shell .portfolio-card-metrics small { font:11px/1.5 Arial,sans-serif; }
.flow-shell .portfolio-card-metrics strong { font-size:24px; }
.flow-shell .portfolio-card-progress { min-height:60px; }
.flow-shell .portfolio-card-action { min-height:42px; border:1px solid var(--line); border-radius:4px; background:var(--desk-soft); font:600 16px/1.3 Rajdhani,sans-serif; }
.flow-shell .portfolio-card.attention .portfolio-card-action { border-color:color-mix(in srgb,var(--amber) 45%,var(--line)); }
.flow-shell .portfolio-footnote { color:var(--muted); font:11px/1.6 Arial,sans-serif; margin:16px 0 0; }
.flow-shell .product-focus-toolbar { margin:0 0 16px; padding:0; border:0; flex-wrap:wrap; gap:10px 18px; }
.flow-shell .product-focus-toolbar select { min-height:36px; border-radius:4px; font:13px Arial,sans-serif; }
.flow-shell .product-identity { border:1px solid var(--line); border-radius:5px; margin:0 0 18px; background:var(--desk-surface); overflow:hidden; }
.flow-shell .product-identity-copy { padding:15px 20px; }
.flow-shell .product-identity-copy h3 { font-size:31px; margin:6px 0; }
.flow-shell .product-identity-copy p { font:12px/1.5 Arial,sans-serif; margin:0; }
.flow-shell .product-identity-metric { padding:0 20px; }
.flow-shell .product-focus-content { padding-top:0; }
.flow-shell .product-summary-grid { grid-template-columns:minmax(0,1.6fr) minmax(250px,1fr); gap:18px; }
.flow-shell :is(.product-next-panel,.product-update-panel,.product-health-panel,.product-blueprint-panel) { padding:20px; border-radius:5px; border-color:var(--line); background:var(--desk-surface); }
.flow-shell .product-next-panel h4 { font-size:27px; }
.flow-shell .product-next-panel>p:not(.product-eyebrow),.flow-shell .product-update-panel>p { font:13px/1.65 Arial,sans-serif; }
.flow-shell .product-eyebrow { font:10px/1.5 Arial,sans-serif; letter-spacing:1.3px; }
.flow-shell .studio-create { margin:0 0 20px; padding:20px; border-radius:5px; background:var(--desk-surface); }
.flow-shell .studio-create p { font:13px/1.6 Arial,sans-serif; }

/* Accounting: workflow above, a clear source document and one next action below. */
.flow-shell .books-desk { padding:0; }
.flow-shell .books-responsibility { margin:-6px 0 16px; }
.flow-shell .books-responsibility .document-policy { margin:0; padding:0; border:0; background:none; }
.flow-shell .books-responsibility .document-policy>summary { padding:5px 0; color:var(--muted); font:12px/1.6 Arial,sans-serif; }
.flow-shell .books-responsibility .document-policy[open] { padding:12px 16px; border:1px solid var(--line); border-radius:4px; background:var(--desk-surface); }
.flow-shell .books-responsibility .document-policy p { font:12px/1.6 Arial,sans-serif; }
.flow-shell .books-metrics { display:flex; gap:28px; border:0; background:none; margin:0 0 16px; padding:0 0 16px; border-bottom:1px solid var(--line); }
.flow-shell .books-metrics[hidden] { display:none; }
.flow-shell .books-metrics>div { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; padding:0; border:0; }
.flow-shell .books-metrics>div+div { border:0; padding:0; }
.flow-shell .books-metrics span { min-height:0; font:12px/1.5 Arial,sans-serif; }
.flow-shell .books-metrics strong { margin:0; font:600 22px/1.3 Rajdhani,sans-serif; }
.flow-shell .books-metrics small { font:11px/1.5 Arial,sans-serif; }
.flow-shell .books-invoices { grid-template-columns:230px minmax(0,1fr); border:1px solid var(--line); border-radius:5px; overflow:hidden; background:var(--desk-surface); }
.flow-shell .invoice-mobile-picker { display:none; }
.flow-shell .books-invoices .document-inbox { max-height:620px; background:var(--desk-surface); border:0; border-right:1px solid var(--line); }
.flow-shell .books-invoices .document-inbox button { padding:16px; background:none; border-bottom:1px solid var(--line); }
.flow-shell .books-invoices .document-inbox button.selected { background:var(--desk-soft); box-shadow:inset 3px 0 var(--amber); }
.flow-shell .books-invoices .document-inbox strong { font:600 18px/1.3 Rajdhani,sans-serif; }
.flow-shell .books-invoices .document-inbox small { font:11px/1.5 Arial,sans-serif; }
.flow-shell .invoice-with-context { background:var(--desk-surface); min-width:0; }
.flow-shell .invoice-with-context .focused-record { border:0; border-bottom:1px solid var(--line); background:none; padding:10px 18px; gap:8px 16px; flex-wrap:wrap; }
.flow-shell .invoice-with-context .focused-record>span { font:11px Arial,sans-serif; }
.flow-shell .invoice-with-context .focused-record button { font:11px Arial,sans-serif; padding:5px 0; }
.flow-shell .books-invoice { padding:18px 20px; }
.flow-shell .books-invoice>header { margin-bottom:14px; }
.flow-shell .books-invoice>header .context { font-size:10px; margin:0 0 5px; }
.flow-shell .books-invoice h4 { font:600 26px/1.25 Rajdhani,sans-serif; }
.flow-shell .books-source { padding:13px 16px; margin:0 0 18px; border:1px solid var(--line); border-left:2px solid var(--cyan); border-radius:3px; background:var(--desk-soft); }
.flow-shell .books-source>span { font:10px/1.5 Arial,sans-serif; letter-spacing:1px; margin-bottom:4px; }
.flow-shell .books-source>strong { font:600 18px/1.4 Rajdhani,sans-serif; margin:5px 0; }
.flow-shell .books-source>p { font:14px/1.5 Arial,sans-serif; margin:5px 0; }
.flow-shell .books-source>small { font:11px/1.5 Arial,sans-serif; }
.flow-shell .books-invoice .document-form { gap:14px; margin:0; }
.flow-shell .books-invoice .document-form label>span { font:12px/1.5 Arial,sans-serif; }
.flow-shell .books-invoice .document-form :is(input:not([type=checkbox]),select) { min-height:40px; padding:9px 11px; font:14px Arial,sans-serif; border-radius:3px; }
.flow-shell .books-checkline { font:12px/1.5 Arial,sans-serif; padding:11px 0; margin:0; }
.flow-shell .books-invoice .document-impact { padding:14px 0; margin:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:none; gap:16px; }
.flow-shell .books-invoice .document-impact strong { font:600 27px/1.2 Rajdhani,sans-serif; margin:4px 0; }
.flow-shell .books-invoice .document-impact :is(span,small) { font:11px/1.5 Arial,sans-serif; }
.flow-shell .books-invoice .tax-invoice-total { padding:12px 0 0; border-top:0; margin:0; }
.flow-shell .books-invoice .tax-invoice-total .data-row { font:12px/1.5 Arial,sans-serif; padding:8px 0; }
.flow-shell .books-invoice .document-journal { margin-top:14px; }
.flow-shell .books-desk :is(.document-learning,.document-history) { border-top:1px solid var(--line); margin:16px 0; padding:14px 0 0; font:12px/1.7 Arial,sans-serif; }
.flow-shell .books-desk :is(.document-learning,.document-history)>summary { color:var(--muted); font:12px/1.5 Arial,sans-serif; }
.flow-shell .books-desk .books-panel { padding:20px; border-radius:5px; background:var(--desk-surface); }
.flow-shell .books-desk .books-cost { padding:14px 0; }
.flow-shell .books-desk .books-cost small { font:11px/1.5 Arial,sans-serif; }
.flow-shell .books-desk .books-close-card { border-radius:4px; padding:18px; }

/* Inbox: quieter list, readable conversation, decisions alongside their evidence. */
.flow-shell .mail-heading h2 span { border:0; background:var(--desk-soft); color:var(--muted); padding:4px 7px; border-radius:4px; font:12px Arial,sans-serif; }
.flow-shell .mail-heading h2 span[hidden] { display:none; }
.flow-shell .mail-toolbar { padding:12px; border:1px solid var(--line); border-radius:5px 5px 0 0; border-bottom:0; background:var(--desk-surface); gap:14px; }
.flow-shell .mail-search { max-width:440px; }
.flow-shell .mail-search input { border-radius:4px; background:var(--desk-soft); }
.flow-shell .mail-filters { gap:2px; }
.flow-shell .mail-filters button { font:500 15px/1.3 Rajdhani,sans-serif; padding:9px 12px; border:0; border-bottom:2px solid transparent; border-radius:3px 3px 0 0; }
.flow-shell .mail-filters button.active { border-bottom-color:var(--amber); background:var(--desk-soft); }
.flow-shell .mail-layout { grid-template-columns:310px minmax(0,1fr); background:var(--desk-surface); border:1px solid var(--line); border-radius:0 0 5px 5px; align-items:stretch; }
.flow-shell .mail-list { align-self:start; max-height:calc(100dvh - var(--dock-height) - var(--summary-height) - 178px); min-height:250px; border-right:1px solid var(--line); scrollbar-width:thin; scrollbar-color:var(--muted) transparent; }
.flow-shell .mail-row { padding:14px 12px; gap:10px; background:none; }
.flow-shell .mail-row:hover { background:var(--desk-soft); }
.flow-shell .mail-row.selected { background:var(--desk-soft); border-left-color:var(--amber); }
.flow-shell .mail-row .mail-avatar { width:28px; height:28px; flex-basis:28px; font-size:16px; border:0; border-radius:5px; background:var(--desk-soft); }
.flow-shell .mail-row-content { gap:5px; }
.flow-shell .mail-row-meta strong { font:600 15px/1.35 Rajdhani,sans-serif; }
.flow-shell .mail-row-meta time { font:10px/1.5 Arial,sans-serif; }
.flow-shell .mail-row-content>b { font:500 12px/1.5 Arial,sans-serif; }
.flow-shell .mail-row.unread .mail-row-content>b { font-weight:700; }
.flow-shell .mail-row-content>small { -webkit-line-clamp:1; font:11px/1.5 Arial,sans-serif; }
.flow-shell .mail-row-content>em { font:10px/1.5 Arial,sans-serif; letter-spacing:0; text-transform:none; }
.flow-shell .mail-row-content>em.requires-reply { color:var(--amber); }
.flow-shell.light .mail-row-content>em.requires-reply { color:#795210; }
.flow-shell .mail-message { padding:20px 24px; }
.flow-shell .mail-message-tools { margin:0 0 18px; padding:0 0 12px; }
.flow-shell .mail-message>header h3 { font:600 28px/1.2 Rajdhani,sans-serif; margin:0 0 10px; }
.flow-shell .mail-thread-status { margin:0 0 18px; gap:12px; }
.flow-shell .mail-thread-status>span { padding:4px 7px; border-radius:3px; font:11px Arial,sans-serif; background:var(--desk-soft); }
.flow-shell .mail-thread-status>small { font:11px Arial,sans-serif; }
.flow-shell .mail-letter { padding:16px; border:1px solid var(--line); border-left:2px solid var(--cyan); border-radius:4px; background:var(--desk-soft); margin:0; }
.flow-shell .mail-letter>header { margin:0 0 10px; }
.flow-shell .mail-letter>header .mail-avatar { width:26px; height:26px; flex-basis:26px; border-radius:4px; font-size:15px; }
.flow-shell .mail-letter>div p { font:13px/1.7 Arial,sans-serif; margin:8px 0 0; }
.flow-shell .mail-letter.from-player { margin-left:20px; border-left:1px solid var(--line); border-right:2px solid var(--amber); background:var(--desk-surface); }
.flow-shell .mail-earlier>summary,.flow-shell .mail-client-history>summary { font:12px/1.5 Arial,sans-serif; }
.flow-shell .mail-reply-panel { margin-top:18px; padding-top:18px; }
.flow-shell .mail-reply-panel>.note { margin:0; padding:0; border:0; font:12px/1.6 Arial,sans-serif; letter-spacing:0; }
.flow-shell .mail-proposal { padding:14px 16px; background:var(--desk-soft); border:1px solid var(--line); border-left:2px solid var(--amber); }
.flow-shell .mail-proposal p { font:13px/1.6 Arial,sans-serif; }
.flow-shell .mail-questions { border:1px solid var(--line); border-radius:4px; padding:0 14px; margin:14px 0; }
.flow-shell .mail-questions>summary { font:600 17px/1.4 Rajdhani,sans-serif; padding:12px 0; cursor:pointer; }
.flow-shell .mail-questions[open] .talk-choices { margin:0 0 14px; }
.flow-shell .mail-forecast { padding-top:14px; }
.flow-shell .mail-forecast h4 { font-size:20px; margin:0 0 10px; }
.flow-shell .mail-inline-actions>.action { min-width:0; }
.flow-shell .mail-empty { min-height:360px; }
.flow-shell .mail-work-controls { gap:8px; }
.flow-shell .mail-work-controls .action { font-size:15px; }

@media(min-width:1101px){
 .flow-shell .portfolio-grid:has(.portfolio-card:only-child){grid-template-columns:1fr}
 .flow-shell .portfolio-card:only-child{display:grid;grid-template-columns:260px minmax(0,1fr)}
 .flow-shell .portfolio-card:only-child .portfolio-card-stage{height:100%;min-height:260px;border-right:1px solid var(--line);border-bottom:0}
 .flow-shell .portfolio-card:only-child .product-illustration{width:260px;height:260px}
 .flow-shell .portfolio-card:only-child .portfolio-card-progress{min-height:60px}
}
@media(max-width:1100px){
 .flow-shell .portfolio-grid{grid-template-columns:1fr}
 .flow-shell .portfolio-card:only-child{display:flex}
 .flow-shell .portfolio-card:only-child .portfolio-card-stage{height:148px;min-height:0;border-right:0;border-bottom:1px solid var(--line)}
 .flow-shell .portfolio-card:only-child .product-illustration{width:180px;height:180px}
 .flow-shell .product-summary-grid{grid-template-columns:1fr}
 .flow-shell .books-invoices{grid-template-columns:190px minmax(0,1fr)}
 .flow-shell .books-stages button{padding:9px 10px;font-size:15px}
 .flow-shell .books-stages .ui-icon{display:none}
 .flow-shell .books-metrics{gap:12px 24px;flex-wrap:wrap}
 .flow-shell .mail-layout{grid-template-columns:270px minmax(0,1fr)}
}
@container mail (max-width:780px){
 .flow-shell .mail-layout{grid-template-columns:1fr}
 .flow-shell .mail-list{position:static;min-height:0;max-height:none;border-right:0}
 .flow-shell .mail-layout:not(.has-message) .mail-reading{display:none}
 .flow-shell .mail-layout.has-message .mail-list{display:none}
 .flow-shell .mail-message{padding:18px}
 .flow-shell .mail-workspace:has(.mail-layout.has-message) .mail-toolbar{display:none}
 .flow-shell .mail-workspace:has(.mail-layout.has-message) .mail-heading p,
 .flow-shell .mail-workspace:has(.mail-layout.has-message) .mail-heading>.action{display:none}
 .flow-shell .mail-workspace:has(.mail-layout.has-message) .mail-layout{border-radius:5px}
}
@media(max-width:760px){
 .flow-shell :is(.portfolio-heading,.books-desk>.document-heading,.mail-heading){align-items:flex-start;gap:12px;margin-bottom:18px}
 .flow-shell :is(.portfolio-heading h3,.books-desk>.document-heading h3,.mail-heading h2){font-size:32px}
 .flow-shell .portfolio-heading{flex-wrap:wrap}
 .flow-shell .portfolio-heading p{font-size:12px}
 .flow-shell .portfolio-create-control{align-self:center}
 .flow-shell .portfolio-filters button{font-size:14px;padding:9px}
 .flow-shell .portfolio-card-stage{height:140px}
 .flow-shell .portfolio-card-body{padding:16px}
 .flow-shell .product-identity-art{display:none}
 .flow-shell .product-identity-copy{padding:16px}
 .flow-shell .product-identity-copy h3{font-size:28px}
 .flow-shell .product-focus-toolbar>label{max-width:100%;flex:1;min-width:130px}
 .flow-shell .studio-view-tabs{display:flex}
 .flow-shell .studio-view-tabs button{font-size:14px;padding:10px}
 .flow-shell .books-metrics{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 14px;padding-bottom:14px}
 .flow-shell .books-metrics strong{font-size:21px}
 .flow-shell .books-metrics span{font-size:11px}
 .flow-shell .books-invoices{grid-template-columns:1fr}
 .flow-shell .books-invoices .document-inbox{display:none}
 .flow-shell .invoice-mobile-picker{display:grid;gap:7px;padding:12px 14px;border-bottom:1px solid var(--line);color:var(--muted);font:11px/1.5 Arial,sans-serif;min-width:0}
 .flow-shell .invoice-mobile-picker select{width:100%;min-width:0;min-height:40px;border:1px solid var(--line);border-radius:4px;padding:8px;background:var(--desk-soft);color:var(--ink);font:13px Arial,sans-serif;text-overflow:ellipsis}
 .flow-shell .books-invoices .document-inbox button{padding:12px 14px}
 .flow-shell .books-invoice{padding:16px}
 .flow-shell .books-invoice .document-impact{align-items:stretch;flex-direction:column}
 .flow-shell .books-invoice .document-impact>.action{width:100%}
 .flow-shell .books-stages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px}
 .flow-shell .books-stages button{font-size:15px;min-height:40px;padding:8px 9px;justify-content:space-between}
 .flow-shell .books-desk .books-panel{padding:16px}
 .flow-shell .books-responsibility{margin:0 0 14px}
 .flow-shell .mail-heading{flex-wrap:wrap}
 .flow-shell .mail-heading>.action{font-size:14px;min-height:36px;padding:8px 12px}
 .flow-shell .mail-toolbar{padding:10px;gap:10px;flex-wrap:wrap}
 .flow-shell .mail-search{max-width:none;flex:1 1 100%;min-width:0}
 .flow-shell .mail-filters{width:100%}
 .flow-shell .mail-filters button{flex:1}
 .flow-shell .mail-row{padding:14px 12px}
 .flow-shell .mail-message{padding:16px}
 .flow-shell .mail-message>header h3{font-size:25px}
 .flow-shell .mail-letter{padding:12px}
 .flow-shell .mail-letter.from-player{margin-left:8px}
 .flow-shell .mail-letter>header time{margin-left:0;font-size:10px}
 .flow-shell .mail-inline-actions{flex-direction:column}
 .flow-shell .mail-questions .talk-choices{grid-template-columns:1fr}
}
