/* ============================================================
   TOOL — Org chart generator  (productivity/orgchart.html)
   Toolbar, menus and dialogs come from tool-timeline.css.
   ============================================================ */
body[data-section="productivity"]{ --oc-bad:#C2463D; --oc-warn:#8A6508; }
@media (prefers-color-scheme: dark){ body[data-section="productivity"]{ --oc-bad:#EC8572; --oc-warn:#E0B84F; } }
.oc input, .oc select, .oc textarea{ font:inherit; color:inherit; }
.oc .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.oc-file{ cursor:pointer; }
.oc-file input{ position:absolute; width:1px; height:1px; opacity:0; }
.oc-issues{ margin-top:.8rem; padding:.55rem .75rem; font-size:.88rem; border-left:3px solid var(--oc-warn); background:var(--paper-2); }
.oc-issues.bad{ border-left-color:var(--oc-bad); }
.oc-issues b{ font-family:var(--f-display); font-weight:600; }
.oc-tabs{ display:none; }
.oc-h{ font-family:var(--f-mono); font-size:.66rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 .5rem; }

/* ---------- title ---------- */
.oc-titlebar{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:.6rem 1rem; margin-top:2rem; }
.oc-titlefield{ flex:1 1 18rem; min-width:0; display:flex; flex-direction:column; gap:.3rem; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.oc-titlefield input{ font-family:var(--f-display) !important; font-size:1.15rem !important; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink); background:var(--paper); border:1px solid var(--line); padding:.5rem .6rem; min-height:44px; box-sizing:border-box; }
.oc-titlefield input:focus{ outline:0; border-color:var(--accent); }
.oc-titlebar + .tl-bar{ margin-top:.9rem; }

/* ---------- chart + look ---------- */
.oc-chart{ display:grid; grid-template-columns:minmax(0,1fr) 19rem; gap:1.4rem; margin-top:1.2rem; align-items:start; }
.oc-view{ display:flex; flex-wrap:wrap; gap:.5rem .7rem; align-items:center; margin-bottom:.6rem; }
.oc-view label{ display:flex; align-items:center; gap:.4rem; font-family:var(--f-mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.oc-view select, .oc-look select{ font-family:var(--f-body) !important; font-size:.88rem !important; letter-spacing:0; text-transform:none; border:1px solid var(--line); background:var(--paper); padding:.4rem .4rem; min-height:2.1rem; color:var(--ink); max-width:14.5rem; }
.oc-fixed{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem; margin-bottom:.6rem; padding:.5rem .65rem; border:1px solid var(--accent); background:var(--accent-soft); }
.oc-fixed[hidden]{ display:none; }
.oc-fixed label{ display:flex; align-items:center; gap:.35rem; font-size:.88rem; }
.oc-fixed input{ width:4.2rem; min-height:2.1rem; box-sizing:border-box; border:1px solid var(--line); background:var(--paper); padding:.25rem .35rem; }
.oc-fixed .oc-hint{ margin:0; flex:1 1 16rem; }
.oc-canvas{ overflow:auto; border:1px solid var(--line); background:var(--paper-2); padding:.6rem; max-height:78vh; overscroll-behavior:contain; }
.oc-stage{ min-width:100%; margin:0 auto; }
.oc-stage svg{ display:block; width:100%; height:auto; margin:0 auto; box-shadow:0 1px 6px rgba(0,0,0,.18); }
.oc-blank{ background:#fff; color:#5A5A60; text-align:center; padding:4rem 1rem; margin:0; }
.oc-box{ cursor:pointer; }
.oc-box.sel rect{ stroke:#D97706; stroke-width:2.5; }
.oc-hit{ cursor:pointer; }
.oc-stage.painting .oc-box{ cursor:copy; }
.oc-pagenote{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.04em; color:var(--ink-soft); margin:.45rem 0 0; }
.oc-small{ margin-top:.6rem; padding:.55rem .75rem; font-size:.88rem; border-left:3px solid var(--oc-bad); background:var(--paper-2); }
.oc-look{ border:1px solid var(--line); padding:.8rem; display:grid; gap:.75rem; }
.oc-lsec{ display:grid; gap:.75rem; }
.oc-lsec[hidden]{ display:none; }
.oc-ltabs{ display:grid; grid-template-columns:repeat(4,1fr); }
body[data-section="productivity"] .oc-ltabs .tl-btn{ padding-left:.2rem; padding-right:.2rem; }
.oc-size{ display:grid; grid-template-columns:auto auto auto auto; gap:.4rem .5rem; align-items:center; justify-content:start; font-size:.9rem; }
.oc-matrix label{ display:flex; align-items:center; gap:.3rem; font-size:.85rem; }
.oc-matrix input{ width:3.2rem; min-height:2.1rem; box-sizing:border-box; border:1px solid var(--line); background:var(--paper); padding:.25rem .3rem; }
body[data-section="productivity"] .oc-ltabs .tl-btn{ justify-content:center; margin-left:-1px; }
.oc-look select{ font-family:var(--f-body); }
.oc-look > div{ min-width:0; }
.oc-scope{ font-family:var(--f-display); font-weight:600; font-size:.98rem; margin:0 0 .4rem; }
.oc-scope .oc-h{ margin:0 .35rem 0 0; }
.oc-lsec .oc-h{ margin-bottom:.35rem; }
.oc-lv{ display:flex; flex-wrap:wrap; gap:.3rem; }
.oc-sws{ display:grid; grid-template-columns:repeat(9,1fr); gap:.25rem; }
body[data-section="productivity"] .oc-sw{ display:block; aspect-ratio:1; min-height:1.55rem; border:1px solid var(--line); position:relative; cursor:pointer; }
body[data-section="productivity"] .oc-sw:hover{ outline:2px solid var(--accent); outline-offset:1px; }
.oc-custom{ background:conic-gradient(#c2463d,#b8860b,#2f6b4f,#2e4374,#5c4d7d,#c2463d); overflow:hidden; }
.oc-custom input{ position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.oc-none{ background:#fff linear-gradient(to top right, transparent 46%, #C2463D 46%, #C2463D 54%, transparent 54%) !important; }
.oc-hint{ font-size:.8rem; line-height:1.35; color:var(--ink-soft); margin:.4rem 0 0; }
.oc-look #font{ width:100%; max-width:none; }
.oc-row{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.oc-shade{ display:inline-flex; align-items:stretch; }
.oc-shade input{ width:2.3rem; height:auto; min-height:2.1rem; padding:0; border:1px solid var(--line); background:none; margin-right:-1px; }

/* ---------- text rows ---------- */
.oc-people{ margin-top:1.8rem; }
.oc-fwrap{ display:grid; gap:.3rem; }
.oc-fields{ list-style:none; margin:0 0 .5rem; padding:0; display:grid; gap:.35rem; }
.oc-fields li{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; }
.oc-fmt{ min-width:2rem; justify-content:center; font-family:var(--f-display) !important; text-transform:none !important; }
.oc-fmt.bold{ font-weight:700; } .oc-fmt.italic{ font-style:italic; } .oc-fmt.underline{ text-decoration:underline; }
.oc-fsize{ border:1px solid var(--line); background:var(--paper); padding:.35rem; min-height:2.1rem; font-size:.85rem; }
.oc-fno{ font-family:var(--f-mono); font-size:.7rem; color:var(--ink-soft); width:1.3rem; }
.oc-fname{ flex:1 1 11rem; min-width:0; max-width:19rem; border:1px solid var(--line); background:var(--paper); padding:.45rem .5rem; }
.oc-fname:focus{ outline:0; border-color:var(--accent); }

/* ---------- table ---------- */
.oc-tablebox{ overflow:auto; border:1px solid var(--ink); margin-top:.5rem; max-height:70vh; }
.oc-table{ border-collapse:separate; border-spacing:0; width:100%; min-width:max-content; font-size:.92rem; }
.oc-table th{ position:sticky; top:0; z-index:2; background:var(--paper-2); border-bottom:1px solid var(--ink); text-align:left; font-family:var(--f-mono); font-size:.62rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); padding:.55rem .55rem; white-space:nowrap; }
.oc-table td{ border-bottom:1px solid var(--line); padding:0; vertical-align:top; background:var(--paper); }
.oc-table td input{ width:100%; min-width:8rem; box-sizing:border-box; border:0; background:transparent; padding:.55rem; }
.oc-table td input:focus{ outline:0; box-shadow:inset 0 0 0 1.5px var(--accent); }
.oc-table td input.oc-col{ min-width:6.5rem; width:6.5rem; padding-left:.8rem; font-family:var(--f-mono); font-size:.78rem; }
.oc-table .oc-n{ width:2rem; text-align:center; font-family:var(--f-mono); font-size:.7rem; color:var(--ink-soft); padding:.6rem .2rem; }
.oc-table tr.bad td{ background:color-mix(in srgb, var(--oc-bad) 10%, var(--paper)); }
.oc-table tr.warn td{ background:color-mix(in srgb, var(--oc-warn) 8%, var(--paper)); }
.oc-err{ font-size:.76rem; line-height:1.3; color:var(--oc-bad); padding:0 .55rem .45rem; max-width:18rem; }
tr.warn .oc-err{ color:var(--oc-warn); }
.oc-act{ white-space:nowrap; }
body[data-section="productivity"] .oc-ab{ width:2rem; height:2.4rem; color:var(--ink-soft); font-size:1rem; }
body[data-section="productivity"] .oc-ab:hover{ color:var(--accent); background:var(--paper-2); }
body[data-section="productivity"] .oc-ab.del:hover{ color:var(--oc-bad); }
body[data-section="productivity"] .oc-ab:disabled{ opacity:.25; cursor:default; }
.oc-empty td{ padding:1.4rem; text-align:center; color:var(--ink-soft); }
.oc-add{ margin-top:.6rem; display:flex; gap:.5rem; flex-wrap:wrap; }

/* ---------- dialogs ---------- */
.oc-dl fieldset{ border:1px solid var(--line); margin:0 0 .6rem; padding:.3rem .7rem .5rem; }
.oc-dl legend{ font-family:var(--f-display); font-weight:600; padding:0 .3rem; }
.oc-radio{ display:flex; align-items:center; gap:.55rem; min-height:2.5rem; cursor:pointer; }
.oc-radio input{ accent-color:var(--accent); width:1.1rem !important; height:1.1rem; flex:none; }
.oc-note{ font-size:.88rem; color:var(--ink-soft); margin:.2rem 0 .8rem; }
.oc-okline, .oc-warnline{ display:block; margin-top:.35rem; }
.oc-okline{ color:var(--ink); }
.oc-warnline{ color:var(--oc-bad); }
.oc-revlist{ font-size:.88rem; margin:.3rem 0 .8rem; padding-left:1.2rem; max-height:30vh; overflow:auto; }
.oc-slide{ display:block; margin-bottom:.8rem; font-size:.9rem; }
.oc-slide select{ margin-left:.4rem; padding:.35rem; border:1px solid var(--line); background:var(--paper); }
.oc-toast{ position:fixed; left:50%; bottom:1.2rem; transform:translateX(-50%); z-index:60; background:var(--ink); color:var(--paper); padding:.6rem .9rem; font-size:.9rem; max-width:min(30rem, calc(100vw - 2rem)); box-shadow:0 8px 24px rgba(0,0,0,.3); }

/* computers: the tool takes the whole screen width, the chart as much of it as the page shape allows */
@media (min-width:1001px){
  main[data-tool="orgchart"]{ max-width:none; padding-left:2.5vw; padding-right:2.5vw; }
  .oc .tool-intro{ max-width:none; }
  .oc .tool-head{ padding-top:1rem; }
  .oc-chart{ grid-template-columns:minmax(0,1fr) 21rem; gap:1.1rem; }
  .oc-chart > div:first-child{ position:sticky; top:.6rem; }
  .oc-stage:not(.zoomed) svg{ width:min(100%, calc((100vh - 9.5rem) * var(--ar, 1.78))); }
  .oc-canvas{ max-height:calc(100vh - 8rem); }
  .oc-sws{ grid-template-columns:repeat(9,1fr); }
}
@media (max-width:1000px){
  .oc-chart{ grid-template-columns:1fr; }
}
/* phone: one view at a time, table rows become cards, every control a comfortable tap */
@media (max-width:760px){
  .oc-tabs{ display:grid; grid-template-columns:1fr 1fr; position:sticky; top:0; z-index:30; background:var(--paper); padding:.5rem 0; margin-top:.4rem; }
  body[data-section="productivity"] .oc-tabs .tl-btn{ justify-content:center; min-height:44px; font-size:.74rem; }
  .oc[data-show="people"] .oc-chart, .oc[data-show="chart"] .oc-people{ display:none; }
  .oc-people{ margin-top:.8rem; }
  .oc-chart{ margin-top:.6rem; }
  body[data-section="productivity"] .oc .tl-btn{ min-height:44px; }
  body[data-section="productivity"] .oc-sw{ min-height:2.4rem; }
  .oc-sws{ grid-template-columns:repeat(6,1fr); gap:.35rem; }
  .oc-canvas{ padding:.35rem; max-height:none; }
  .oc-view select{ max-width:100%; min-height:44px; }
  .oc-fno{ width:auto; }
  .oc-fixed input{ min-height:44px; font-size:16px; }
  .oc-matrix input{ min-height:44px; font-size:16px; }
  .oc-fsize{ min-height:44px; }
  .oc-fmt{ min-width:44px; }
  .oc-table td input.oc-col{ width:100%; }
  .oc-fname{ flex:1 1 100%; max-width:none; min-height:44px; box-sizing:border-box; }
  .oc-tablebox{ border:0; overflow:visible; max-height:none; }
  .oc-table, .oc-table tbody, .oc-table tr, .oc-table td{ display:block; min-width:0; width:100%; box-sizing:border-box; }
  .oc-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .oc-table tbody tr[data-p]{ border:1px solid var(--line); margin-bottom:.7rem; background:var(--paper); }
  .oc-table td{ border-bottom:0; }
  .oc-table td[data-label]{ padding:.3rem .6rem 0; }
  .oc-table td[data-label]::before{ content:attr(data-label); display:block; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
  .oc-table td input{ border:1px solid var(--line); min-height:44px; min-width:0; font-size:16px; }
  .oc-table td.oc-n{ text-align:left; padding:.4rem .6rem 0; width:auto; }
  .oc-table td.oc-act{ display:flex; justify-content:flex-end; padding:.25rem .3rem; }
  body[data-section="productivity"] .oc-ab{ width:44px; height:44px; }
  .oc-err{ padding:.3rem 0 0; max-width:none; }
  .oc-toast{ bottom:5rem; }
}
@media print{ .tl-bar, .tool-nav, .tool-pager, .oc-look, .oc-people, .oc-view, .oc-tabs{ display:none !important; } }