/* Organizations (org.js), rebuilt 2026-09-21. Two pages: the list (#/org), a
   .block of one-line rows that each open an organization, with the computers
   as one disclosure under it; and one organization (#/org/<id>), a column of
   .group sections — People, AI employees, Spending, Settings, Danger zone —
   each a .blockhead (h4 + the section's own verb) over a padding-0 .block of
   base .trow rows. Base owns every control (.btn .f .seg .stepper .switch
   .chip .state .msg); this file lays them out. Tokens only: no colour here
   that base does not define. */

/* ------------------------------------------------------------ the page */
/* the header's lead (the menu button, or the way back) is for the phone only */
.org-lead{display:none}
#emp-head-lead:has(>.org-lead){display:none}
#org-page:has(>.empty){display:flex;flex-direction:column}
#org-page .org-body{gap:var(--s-xxl);padding-bottom:var(--s-h4)}
/* a strip at the top of the page (switched off, a read that failed) sits as a card, not a band */
#org-page .org-body>.msg{border:1px solid var(--line);border-radius:var(--r-md)}
#org-page .org-body>.msg .btn{flex:none}

/* a section: the title, and the section's verb on the right */
.org-sechead{align-items:center;min-height:var(--h-button);padding:0 var(--s-xs);margin-bottom:var(--s-m)}
.org-sechead>.btn{margin-left:auto}
.org-block{overflow:hidden}
/* inside a padding-0 block: the lines between rows are the rows' own */
.org-block>.trow:last-child,.org-block>.org-emps:last-child .org-emp:last-child{border-bottom:0}
.org-block>.org-line{margin:var(--s-m) var(--s-xxl);max-width:none}
.org-block>.org-line:last-child{margin-bottom:var(--s-l)}
.org-block>.org-line:first-child{margin-top:var(--s-l)}
.org-block>.msg{border-bottom:1px solid var(--line)}
.org-block .trow>.lead{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a short value or state beside a row's lead: 12.5, muted, never wrapped */
.org-state{font-size:12.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;flex:none}

/* ------------------------------------------------------------ #/org: the list */
.org-list{padding:0;overflow:hidden}
.org-row{display:grid;grid-template-columns:minmax(0,1fr) 56px 88px 124px 112px 14px;align-items:center;gap:var(--s-l);
  min-height:56px;padding:var(--s-m) var(--s-xxl);border-bottom:1px solid var(--line);color:var(--text);text-decoration:none}
.org-row:last-child{border-bottom:0}
.org-row:hover{background:var(--card2)}
.org-row:focus-visible{outline:2px solid var(--line2);outline-offset:-2px}
.org-rowname{display:flex;align-items:baseline;gap:var(--s-m);min-width:0}
.org-rowname>b{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.org-rowname>.hint{margin:0;white-space:nowrap}
.org-fig{font-size:12.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.org-money{text-align:right}
.org-chev{display:grid;place-items:center;color:var(--faint)}

/* the computers: one line, the machines behind it */
.org-inv{padding:0;overflow:hidden}
.org-invsum{display:flex;align-items:center;gap:var(--s-m);min-height:48px;padding:var(--s-m) var(--s-xxl);cursor:pointer;list-style:none;font-size:14.5px}
.org-invsum::-webkit-details-marker{display:none}
.org-invsum:hover{background:var(--card2)}
.org-invmore{margin:0 0 0 auto}
.org-inv[open] .org-invmore{visibility:hidden}
.org-inv[open]>.org-invsum{border-bottom:1px solid var(--line)}
.org-invrow{min-height:38px;padding-top:var(--s-xs);padding-bottom:var(--s-xs);font-size:14.5px}

/* ------------------------------------------------------------ People */
.org-person{min-height:52px}
.org-who{display:flex;align-items:center;gap:var(--s-m);min-width:0;flex:1 1 auto}
.org-addr{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.org-who>.chip{flex:none}
/* the admin, marked: the one chip in the list with the text colour and the stronger stroke */
.chip.org-boss{color:var(--text);border-color:var(--line2);font-weight:500}
.org-quick{flex:none}
.org-more{font-size:18px;letter-spacing:1px;color:var(--muted);flex:none}
.org-more[aria-expanded="true"]{background:var(--card2);color:var(--text)}
.org-morespace{width:var(--h-button);flex:none}

/* the ⋯ menu */
.org-menu{position:fixed;z-index:57;min-width:250px;max-width:calc(100vw - 16px);padding:var(--s-s);background:var(--card);
  border:1px solid var(--line2);border-radius:var(--r-md);box-shadow:0 12px 32px rgba(0,0,0,.45)}
.org-menuitem{height:34px;margin:0;color:var(--text)}
.org-menuitem:focus-visible{outline:2px solid var(--line2);outline-offset:-2px}
.org-menuitem.is-danger{color:var(--bad)}
.org-menusep{height:1px;background:var(--line);margin:var(--s-s) var(--s-xs)}

/* ------------------------------------------------------------ AI employees */
.org-counthead{min-height:60px}
.org-countline{display:flex;align-items:center;gap:var(--s-m);flex-wrap:wrap;font-size:14.5px;overflow:visible}
.org-stepper{gap:var(--s-xs)}
.org-stepper button{width:var(--h-button);height:var(--h-button);font-size:16px}
.org-stepper .n{font-size:16px;min-width:3ch}
.org-stepper.is-busy .n{color:var(--muted)}
.org-emps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-xxl);padding:0 var(--s-xxl);border-bottom:1px solid var(--line)}
.org-emp{display:flex;align-items:center;gap:var(--s-l);min-height:48px;border-bottom:1px solid var(--line);min-width:0}
/* the last row of the grid carries no line of its own: the grid's does */
.org-emps>.org-emp:nth-last-child(1),.org-emps>.org-emp:nth-last-child(2):nth-child(odd){border-bottom:0}
.org-empname{width:104px;flex:none;font-size:14.5px;white-space:nowrap}
.org-holder{flex:1 1 auto;min-width:0;width:auto}

/* ------------------------------------------------------------ Spending */
.org-dailyrow{min-height:56px}
.org-daily{display:inline-flex;align-items:center;gap:var(--s-m);flex:none}
.org-daily>input.f{width:96px;text-align:right;font-variant-numeric:tabular-nums}
.org-unit{font-size:12.5px;color:var(--muted)}
.tallies{display:flex;gap:var(--s-h3);flex-wrap:wrap;padding:var(--s-xl) var(--s-xxl);border-bottom:1px solid var(--line)}
.tally{display:flex;flex-direction:column;gap:var(--s-xxs);min-width:0}
.tally-n{display:block;font-size:26px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--text)}
.tally>span{font-size:12.5px;color:var(--muted)}
.org-by>summary{padding:var(--s-m) var(--s-xxl);font-size:12.5px;font-weight:500;color:var(--muted);cursor:pointer;border-bottom:1px solid var(--line)}
.org-by>summary:hover{color:var(--text)}
.org-by>.trow{min-height:38px}
.org-by>.trow>.hint{margin:0}

/* ------------------------------------------------------------ Settings */
.org-value{display:flex;align-items:baseline;gap:var(--s-m);min-width:0;flex:none}
.org-value>b{font-weight:500}
.org-value>.hint{margin:0}
.org-onrow{padding-top:var(--s-l);padding-bottom:var(--s-l)}
.org-onwhat{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-xs);white-space:normal!important}
.org-onhelp{margin:0;max-width:62ch}
.org-switch .swtitle{font-weight:500}
.org-block>.org-sub{margin:0;padding:var(--s-xl) var(--s-xxl) var(--s-xs)}
.org-block .trow>.lead>.hint{margin:0}
.org-verbs{display:flex;align-items:center;gap:var(--s-l);flex-wrap:wrap;padding:var(--s-m) var(--s-xxl) var(--s-l);border-bottom:1px solid var(--line)}
.org-verbs:last-child{border-bottom:0}
.org-verbs>.hint{margin:0}

/* ------------------------------------------------------------ Danger zone */
.org-danger .org-sechead>h4{color:var(--bad)}
.org-danger>.org-block{border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.org-dangerrow{padding-top:var(--s-l);padding-bottom:var(--s-l)}
.org-dangerrow>.lead{display:flex;flex-direction:column;gap:var(--s-xxs);white-space:normal!important}
.org-dangerrow>.lead>.hint{margin:0}
.org-dangerrow>.btn{flex:none}
.org-why{font-size:12.5px;font-weight:500;color:var(--text);margin-top:var(--s-xs)}

/* ------------------------------------------------------------ the sheets */
.org-sheet .sheet-pane>.field{margin-bottom:var(--s-xl)}
.org-sheet .sheet-pane>.field:last-child{margin-bottom:0}
.org-sheet .field>.hint{margin:var(--s-s) 0 0}
.org-sheet .sheet-pane>p.hint{margin:0 0 var(--s-l)}
.org-roles{display:flex;width:max-content;max-width:100%}
.org-roles button{height:30px;padding:0 var(--s-xl)}
.org-rolehelp{margin:var(--s-m) 0 0}
.org-newcount{display:flex;align-items:center;min-height:var(--h-field)}
.org-coderow{display:flex;align-items:center;gap:var(--s-l);margin:var(--s-xs) 0 var(--s-xl);flex-wrap:wrap}
.setupcode{font-size:20px;font-weight:600;letter-spacing:2px;padding:var(--s-m) 14px;border-radius:var(--r-sm);
  background:var(--card2);color:var(--text);user-select:text;white-space:nowrap}
.org-code{font-size:30px;letter-spacing:8px;padding:var(--s-l) var(--s-xl) var(--s-l) 26px}
.org-erase{margin:0 0 var(--s-l);padding-left:20px;font-size:14.5px;line-height:1.7;color:var(--text)}
.org-final{margin:var(--s-l) 0 var(--s-xl);font-size:14.5px;font-weight:600;color:var(--text)}
.org-sheetmsg{margin:var(--s-l) 0 0;border:0;border-radius:var(--r-sm);padding:var(--s-m) var(--s-l);background:var(--card)}
/* the last press of a delete: the one red filled button on the site, and only once the name is typed */
.btn.danger.org-kill{height:var(--h-field);padding:0 20px;font-size:14.5px}
.btn.danger.org-kill:not(:disabled){background:var(--bad);border-color:var(--bad);color:var(--bg)}
.btn.danger.org-kill:not(:disabled):hover{background:color-mix(in srgb,var(--bad) 85%,var(--bg))}

/* ------------------------------------------------------------ narrower windows */
@media (max-width:820px){
  .org-row{grid-template-columns:minmax(0,1fr) 56px 88px 124px 14px}
  .org-row>.org-money{display:none}
}

/* ------------------------------------------------------------ the phone
   Below 600 the page takes the whole width and the rail becomes a menu over
   it, reached from the button in the header (org_lead → emp_railBtn) — the
   same rule Workflows and Automations carry for their panes. */
@media (max-width:599px){
  .app:has(.surf-pane[data-surf="org"]:not([hidden])){grid-template-columns:minmax(0,1fr)}
  .app:has(.surf-pane[data-surf="org"]:not([hidden]))>aside#rail{position:fixed;z-index:60;top:0;bottom:0;left:0;
    width:min(var(--rail),86vw);transform:translateX(-100%);visibility:hidden;
    transition:transform .2s ease-in,visibility 0s linear .2s}
  .app[data-emp-rail="open"]:has(.surf-pane[data-surf="org"]:not([hidden]))>aside#rail{transform:none;visibility:visible;
    transition:transform .24s ease-out;box-shadow:0 0 0 100vmax color-mix(in srgb,var(--bg) 70%,transparent)}
  #emp-head-lead:has(>.org-lead){display:flex}
  .org-lead{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;margin-left:-6px;color:var(--text)}
  /* the chevron beside the title leads back already */
  #head-tools>.org-back{display:none}
  #head-tools:has(>.org-new){overflow-x:visible}
  #head-tools>.org-new{flex:1 1 auto}
  [data-surf="org"] .tbody{padding:var(--s-xl)}
  #org-page .org-body{gap:var(--s-xl)}
  .org-block .trow,.org-row,.org-invsum{padding-left:var(--s-xl);padding-right:var(--s-xl)}
  .org-block>.org-line{margin-left:var(--s-xl);margin-right:var(--s-xl)}
  .org-block>.org-sub,.org-verbs,.tallies,.org-by>summary{padding-left:var(--s-xl);padding-right:var(--s-xl)}
  /* a list row: the name and its state, the figures under them */
  .org-row{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s-l);row-gap:var(--s-xxs)}
  .org-rowname{flex:1 1 60%}
  .org-row>.state{flex:none}
  .org-row>.org-fig{flex:none}
  .org-row>.org-money{display:inline}
  .org-chev{display:none}
  /* a person: the address and the ⋯ on top, where they stand under it */
  .org-person{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s-m);row-gap:var(--s-xxs);align-items:center}
  .org-who{grid-column:1;grid-row:1}
  .org-person>.org-more,.org-person>.org-morespace{grid-column:2;grid-row:1}
  .org-person>.org-state{grid-column:1;grid-row:2}
  .org-person>.org-quick{grid-column:1;grid-row:3;justify-self:start;margin-left:-14px}
  .org-emps{grid-template-columns:minmax(0,1fr);padding:0 var(--s-xl)}
  .org-emps>.org-emp:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--line)}
  .org-empname{width:92px}
  /* the count stays one sentence; how many are free goes under it */
  .org-counthead{flex-wrap:wrap;row-gap:var(--s-xxs)}
  .org-countline{flex-wrap:nowrap;flex:1 1 100%}
  .org-counthead>.org-state{flex:1 1 100%}
  .org-dailyrow{flex-wrap:wrap}
  .tallies{gap:var(--s-xxl)}
  .tally-n{font-size:22px}
  .org-dangerrow{flex-wrap:wrap}
  .org-dangerrow>.btn{flex:1 1 100%}
  .org-sechead>.btn{flex:none}
}