/* A planner's office (planners round, 11 November 2026; office.js, views/office.js). Kept out of public/ (the house's sheets alone);
   served by the office at /office.css and loaded by its pages alone, after the
   house's own sheets: it only places the office's cards, on the house's tokens. No colour, radius, shadow or font of its own, and no
   rule for a button (the kit draws every button, house.css). */

/* the office's name where a house's names stand: Inter, as every word that is not a couple's names */
body.pvo .pvo-name{font-family:inherit; font-weight:600; letter-spacing:0}
body.pvo #pv-bar .pv-hall-names.pvo-name{font-size:var(--fs-lg); line-height:28px}
body.pvo .pv-top-names.pvo-name{font-size:var(--fs-md)}

/* the page (stage A, the rethink): the greeting, the head and its sentence, her measures (Planning's tiles), Needs someone today, the
   team and the board (Planning's tables, the column heads on the band in Planning's tint), This week. Planning's own room tint and ink,
   as a Planning room wears them (house.css 10228), so its tables' bands are Planning's */
.pvo-page{--room-tint:var(--w-plan-tint); --room-ink:var(--w-plan-ink)}
.pvo-page > .pv-head{margin-bottom:var(--sp-6)}
/* one head: the greeting the page's title, the briefing's sentence under it at 20 in the ink, Add a wedding small at its right */
:root body.pv #pv-page .pvo-head .pv-head-row{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-6)}
:root body.pv #pv-page .pvo-head .pv-head-acts{flex:none; margin:var(--sp-2) 0 0}
:root body.pv #pv-page .pvo-head .pvo-say{max-width:none; color:var(--ink)}   /* the deck's own 16, in the ink: the briefing */
.pvo-page > .pvo-state{margin:0 0 var(--sp-6)}
/* the first screen: Needs someone today (two thirds) beside the team over This week (a third); the board across under them. Under
   1024 one column: needs, the team, the board, this week */
.pvo-grid{display:grid; grid-template-columns:minmax(0, 1fr); grid-template-areas:"needs" "team" "board" "week"; gap:var(--sp-6); align-items:start}
.pvo-grid > .pvo-needs{grid-area:needs} .pvo-grid > .pvo-team{grid-area:team} .pvo-grid > .pvo-board{grid-area:board} .pvo-grid > .pvo-week{grid-area:week}
.pvo-grid > *{margin:0 !important}
@media (max-width:1023px){ :root body.pv #pv-page .pvo-head .pv-head-row{flex-direction:column; gap:var(--sp-3)} :root body.pv #pv-page .pvo-head .pv-head-acts{margin:0} }
@media (min-width:1024px){ .pvo-grid{grid-template-columns:minmax(0, 7fr) minmax(0, 4fr); grid-template-areas:"needs team" "needs week" "board board"; align-items:stretch}
  .pvo-grid > .pvo-week{align-self:stretch} }   /* the two columns end on one line */
/* a tile's state and this week's change, under its figure: 13, the state in --ink-2 (late in the house's late colour), the change --ink-3 */
:root body.pv #pv-page .pvo-tile .pvo-tile-k{margin:0; font-size:var(--fs-base); font-weight:500; line-height:20px; color:var(--ink-2)}
:root body.pv #pv-page .pvo-tile .pv-pltile-n.pvo-late{color:var(--warn)}
:root body.pv #pv-page .pvo-tile .pvo-tile-line{margin:0; font-size:var(--fs-sm); line-height:18px; color:var(--ink-3)}
:root body.pv #pv-page .pvo-tile .pv-pltile-bar{margin:var(--sp-3) 0 0}   /* under its line, not at the tile's foot: no empty band in it */
/* a house's monogram, its M|A, small, where a wedding is named in a row */
.pvo-mono{display:inline-flex; flex:none; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--r-full); background:var(--panel)}
.pvo-mono .mark.letters{font-size:var(--fs-sm)}
/* who has it: the round portrait and the name, 13 in --ink-2; nobody an empty ring */
.pvo-who{display:inline-flex; align-items:center; gap:var(--sp-2); min-width:0; font-size:var(--fs-sm); line-height:18px; color:var(--ink-2); text-decoration:none; white-space:nowrap}
.pvo-who.is-big{white-space:normal}
.pvo-who.is-big b{display:block; font-size:var(--fs-md); font-weight:600; color:var(--ink)}
.pvo-who.is-big em{display:block; font-style:normal; font-size:var(--fs-sm); color:var(--ink-3)}
.pvo-nobody{display:inline-block; flex:none; width:24px; height:24px; box-sizing:border-box; border:1px solid var(--line-2); border-radius:var(--r-full)}
.pvo-who.is-nobody{color:var(--ink-3)}
/* Needs someone today: a row its monogram, the thing (R13's name 16/600, its line 13), who has it and its one press at the right */
.pvo-needs .pv-row-main{gap:var(--sp-3)}
.pvo-needs .pv-row-t{font-size:var(--fs-md); font-weight:600}
.pvo-needs .pv-row-r{display:flex; align-items:center; gap:var(--sp-4); flex:none}
.pvo-needs .pv-row-r > .pvo-who{width:168px; overflow:hidden; text-overflow:ellipsis}
.pvo-assign .pv-menu-pop button em{display:block; font-style:normal; font-size:var(--fs-sm); color:var(--ink-3)}
/* the team and the board: Planning's tables, their column heads on the band (house.css 11045-11075, there on Planning's pages) */
:root body.pvo #pv-page .pv-card.pv-listcard{padding:0; overflow:hidden}
:root body.pvo #pv-page .pv-card table > thead > tr > th{box-sizing:border-box; height:48px; padding-block:0; vertical-align:middle; background-color:var(--room-tint, var(--hover)); border-bottom:0;
  font-size:var(--fs-base); font-weight:500; line-height:20px; color:var(--room-ink, var(--w-plan-ink))}
:root body.pvo #pv-page .pv-card.pv-listcard > .pv-tablewrap > table :is(th, td):first-child{padding-left:var(--card-in)}
:root body.pvo #pv-page .pv-card.pv-listcard > .pv-tablewrap > table :is(th, td):last-child{padding-right:var(--card-in)}
:root body.pvo #pv-page .pv-card.pv-listcard .pv-table{width:100%; border-collapse:collapse}
:root body.pvo #pv-page .pv-card.pv-listcard .pv-table tbody :is(th, td){padding-top:var(--sp-3); padding-bottom:var(--sp-3); vertical-align:middle; font-size:var(--fs-base); font-weight:400}
:root body.pvo #pv-page .pv-card.pv-listcard .pv-table tbody tr:last-child :is(th, td){border-bottom:0}
:root body.pvo #pv-page .pv-card.pv-listcard .pv-table tbody td a{color:var(--ink); text-decoration:none; font-variant-numeric:tabular-nums}
:root body.pvo #pv-page .pv-card.pv-listcard .pv-table tbody td a:hover{text-decoration:underline}
:root body.pvo #pv-page .pv-card.pv-listcard .pv-table tbody td b{font-weight:600; color:var(--ink)}
:root body.pvo #pv-page .pv-card.pv-listcard .pv-table tbody td span{color:var(--ink-3)}
:root body.pvo #pv-page .pv-card.pv-listcard .pv-table tbody td .pv-pl-late{color:var(--warn)}
.pvo-monos{text-align:left !important; white-space:nowrap}
.pvo-monos a{display:inline-flex; margin-right:var(--sp-1)}
.pvo-none{color:var(--ink-4)}
.pvo-wed{display:flex; align-items:center; gap:var(--sp-3); color:var(--ink); text-decoration:none}
.pvo-wed b{display:block; font-weight:500}
.pvo-wed b .pv-names{font-size:var(--fs-md)}
.pvo-wed em{display:block; font-style:normal; font-size:var(--fs-sm); color:var(--ink-3)}
.pvo-ready a, .pvo-stack a{display:inline-flex; flex-direction:column; align-items:flex-end; gap:var(--sp-1)}
:root body.pvo #pv-page .pvo-board .pv-table td{white-space:nowrap}
:root body.pvo #pv-page .pvo-board .pv-table td em{display:block; font-style:normal; font-size:var(--fs-sm); color:var(--ink-3); white-space:nowrap}
:root body.pvo #pv-page .pvo-team thead th:nth-child(2){text-align:left}
.pvo-bar{display:inline-block; flex:none; width:56px; height:4px; border-radius:var(--r-full); background:var(--gold-tint); overflow:hidden; vertical-align:middle}
.pvo-bar > i{display:block; height:100%; border-radius:inherit; background:var(--gold)}
.pvo-lead{text-align:left !important; white-space:nowrap}
.pvo-wed em:not(.pvo-note){white-space:normal}
:root body.pv #pv-page .pvo-pick{gap:var(--sp-2); padding-left:var(--sp-1)}
:root body.pv #pv-page .pvo-pick .avatar{width:24px; height:24px}
.pvo-quiet{text-align:left !important; color:var(--ink-3)}
.pvo-faces{display:flex; gap:var(--sp-1)}
/* the board on a phone: a wedding a short card (its names, days to go, the bar, only what is off, the lead); the table from 880 */
.pvo-wcards{display:none; margin:0; padding:0; list-style:none}
/* the board's nine columns need 1280 (the hall open or folded); under it a wedding a short card, as on a phone */
@media (max-width:1279px){
  :root body.pvo #pv-page .pvo-board > .pv-tablewrap{display:none}
  .pvo-wcards{display:block}
}
@media (max-width:879px){
}
@media (max-width:1279px){
  .pvo-wcard{display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-4) var(--card-in); border-top:1px solid var(--line)}
  .pvo-wcard:first-child{border-top:0}
  .pvo-wcard-main{display:flex; align-items:center; gap:var(--sp-3); color:var(--ink); text-decoration:none}
  .pvo-wcard-h .pv-names{font-size:var(--fs-md)}
  .pvo-wcard-tx{display:flex; flex-direction:column}
  .pvo-wcard-ready{display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-sm); color:var(--ink-3)}
  :is(.pvo-needs, .pvo-week) .pv-row{flex-wrap:wrap}
  :root body.pv #pv-page :is(.pvo-needs, .pvo-week) .pv-row-r{display:flex; flex-direction:row; align-items:center; width:100%; justify-content:space-between; padding:0 0 var(--sp-3) 48px; box-sizing:border-box}
  :root body.pv #pv-page .pvo-needs .pv-row-r > .pvo-who{width:auto; flex:1 1 auto}
  :root body.pvo #pv-page .pvo-team thead th{white-space:normal}
  .pvo-team .pv-table :is(th, td):nth-child(2){display:none}
}

/* Add a wedding: its form in one card */
.pvo-form{padding:var(--sp-6)}
.pvo-form .pv-field{margin:0 0 var(--sp-4)}
.pvo-form .pv-field label{display:block; margin:0 0 var(--sp-2); font-size:var(--fs-base); font-weight:600; color:var(--ink)}
.pvo-form .pv-field input{width:100%; max-width:480px}
.pvo-form .pv-small{margin:var(--sp-2) 0 0}
.pvo-form .pv-actions{margin-top:var(--sp-6)}
.pvo-way{margin-top:var(--sp-8)}

/* the door of a demonstration office: its names to choose */
fieldset.pvo-pick{border:0; margin:0 0 var(--sp-4); padding:0}
/* (his word, 11 Nov: "different columns are very close to each other") every column 12 a side, as Planning's own tables keep them
   (.pv-table th, td: 8 12), so any two columns' contents stand 24 apart; the card's 24 at its ends; the lead's head on its left, as its cells */
:root body.pvo #pv-page .pvo-board .pv-table :is(th, td):not(:first-child):not(:last-child){padding-left:12px; padding-right:12px}
:root body.pvo #pv-page .pvo-board .pv-table thead th:last-child{text-align:left; padding-left:12px}
:root body.pvo #pv-page .pvo-board .pv-table td.pvo-lead{padding-left:12px}
/* the team, a row a colleague: her portrait, her name and role, her weddings' monograms; her open, late and this week at the right */
:root body.pv #pv-page .pvo-team .pv-row-main{align-items:center; gap:var(--sp-3)}
.pvo-team .pvo-tname{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--sp-1) var(--sp-3)}
.pvo-team .pvo-monos{display:inline-flex; gap:2px}
.pvo-team .pvo-mono{width:auto; height:auto; background:none}   /* her weddings' monograms in her row's line, at its size */
.pvo-team .pvo-mono .mark.letters{font-size:var(--fs-sm)}
.pvo-team .pvo-monos{gap:var(--sp-2)}
.pvo-nums{display:flex; flex-direction:column; align-items:flex-end; gap:2px; margin-left:auto; flex:none; font-size:var(--fs-sm); line-height:18px; color:var(--ink-3); white-space:nowrap}
.pvo-nums b{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.pvo-nums .pv-pl-late, .pvo-nums .pv-pl-late b{color:var(--warn)}
/* the wedding column as wide as its names need (its days and its note wrap under them), so the figures keep their 24 in his 1294 window */
:root body.pvo #pv-page .pvo-board .pv-table thead th:first-child{width:auto}
:root body.pvo #pv-page .pvo-board .pv-table tbody th[scope="row"]{white-space:normal; min-width:200px}
:root body.pvo #pv-page .pvo-board .pvo-wed b, :root body.pvo #pv-page .pvo-board .pvo-wed .pvo-days{white-space:nowrap}
/* the lead column a little narrower (his 1294 window): her portrait 20 in the picker */
:root body.pv #pv-page .pvo-board .pvo-pick .avatar{width:20px; height:20px; font-size:var(--fs-xs)}
:root body.pv #pv-page .pvo-team .pv-row-tx{min-width:0; flex:1 1 auto}   /* her name and monograms wrap before they meet her figures */
.pvo-team .pvo-monos{flex-wrap:wrap}
:root body.pv #pv-page .pvo-page .pv-fold > summary, :root body.pv #pv-page .pvo-page .pv-fold > summary span{font-size:var(--fs-base)}   /* a fold's title 14 (DESIGN.md R13) */
.pvo-wcard-off a{color:inherit; text-decoration:none}