/* Barvy a písmo drží krok s terminálovým dashboardem: stejná barva znamená
   v prohlížeči totéž jako v terminálu (oranžová = kdo mluví, žlutá = co se
   děje, jantarová = pozor, červená = chyba, zelená = hotovo). */
:root {
  --bg: #14120f; --panel: #1c1915; --panel2: #211d17; --line: #302b23;
  --ink: #efe9dd; --dim: #a49b8b; --faint: #5f5a4e;
  --orange: #ff8f2b; --yellow: #ffcf5c; --amber: #ffa63d;
  --red: #ff6f63; --green: #7ed39b; --blue: #6fa8dc; --violet: #d98be0;
  --mono: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: "Trebuchet MS", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); }
a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--yellow); }
.mono { font-family: var(--mono); }
/* 'overflow-x: hidden' by problem schoval; sirku drzi to, ze se vsechno
   smi zmensit (min-width: 0) a zabalit na dalsi radek. */
.wrap { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px;
        min-height: 100vh; max-width: 100%; }
header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
         min-width: 0; }
.brand { font-size: 19px; font-weight: 700; }
.tabs { display: flex; padding: 3px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); gap: 3px; }
.tabs a { font-size: 13px; padding: 6px 13px; border-radius: 7px; color: var(--dim); }
.tabs a.on { background: #33291b; color: var(--yellow); font-weight: 600; }
.grow { flex-grow: 1; }
.plate { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.tile { padding: 10px 13px; border-left: 3px solid var(--faint); }
.tile .n { font-family: var(--mono); font-size: 27px; font-weight: 600; line-height: 1.15; }
.tile .k { font-size: 12px; color: var(--dim); }
.tile.work { border-left-color: var(--orange); } .tile.work .n { color: var(--orange); }
.tile.you  { border-left-color: var(--amber); }  .tile.you .n  { color: var(--amber); }
.tile.you .k { color: var(--yellow); }
.tile.bad  { border-left-color: var(--red); }    .tile.bad .n  { color: var(--red); }
.tile.done { border-left-color: var(--green); }  .tile.done .n { color: var(--green); }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; flex-grow: 1; }
.head { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex;
        align-items: center; gap: 9px; font-size: 13px; font-weight: 600;
        flex-wrap: wrap; min-width: 0; }
.chip { font-family: var(--mono); font-size: 11px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); }
.row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid #262117; }
.row:last-child { border-bottom: 0; }
.row.click { cursor: pointer; }
.row.click:hover { background: var(--panel2); }
.dim { color: var(--dim); }
.faint { color: var(--faint); }
/* Column widths in Overview and project card rows (app.js drawOverview /
   drawProject). Formerly inline styles from JS; a class can be relaxed on phones. */
.ov-name { width: 230px; }
.ov-num { width: 52px; }
.ov-who { display: flex; align-items: center; gap: 7px; width: 150px; }
.ov-time { width: 82px; }
.ov-quiet { width: 110px; }
.pj-num { width: 44px; }
.bar { display: flex; gap: 3px; width: 150px; }
.bar span { height: 4px; flex-grow: 1; border-radius: 999px; background: #3d3529; }
.bar span.ok { background: var(--green); } .bar span.now { background: var(--orange); }
.need { display: flex; gap: 9px; padding: 11px 13px; border-bottom: 1px solid #262117; }
.need i { width: 3px; border-radius: 999px; background: var(--dim); }
.need.pull_request i, .need.review i { background: var(--green); }
.need.question i { background: var(--amber); }
.need.blocked i { background: var(--red); }
/* Karta LIMITY: radek na ucet, barva podle cerpani. */
.tile.lim { border-left-color: var(--blue); }
.tile.limits .lim-row { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; white-space: nowrap; }
.tile.limits .lim-name { color: var(--dim); }
.tile.limits .lim-active .lim-name { color: var(--ink); font-weight: 600; }
.tile.limits .lim-ok .lim-val { color: var(--green); }
.tile.limits .lim-warn .lim-val { color: var(--amber); }
.tile.limits .lim-bad .lim-val { color: var(--red); font-weight: 600; }
.tile.limits .lim-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.tile.limits .lim-btn { padding: 2px 9px; font-size: 12px; }
.warn { padding: 9px 14px; border-radius: 8px; background: #2a1c19; border: 1px solid #5a2d28; color: #ffb3ac; font-size: 13px; }
/* živé okno */
.term { border: 1px solid var(--line); border-radius: 10px; background: #100e0c; display: flex; flex-direction: column; overflow: hidden; flex-grow: 1; min-height: 0; }
.term .bar2 { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid #241f18; background: #171412; }
.term .body { flex-grow: 1; overflow: auto; padding: 12px 15px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; }
.ev { margin-bottom: 10px; }
.ev .h { color: var(--orange); } .ev .w { color: var(--yellow); } .ev .c { color: var(--dim); white-space: pre-wrap; word-break: break-word; }
.ev.err .h, .ev.err .w { color: var(--red); }
.ev.warn2 .h, .ev.warn2 .w { color: var(--amber); }
.ev.done .h, .ev.done .w { color: var(--green); }
select, button, input { font-family: var(--sans); font-size: 13px; color: var(--ink); background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
input:focus, select:focus { outline: none; border-color: #5a4324; }

/* ── formulář (přibrání projektu) ───────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 4px; padding: 14px; }
.form label { font-size: 12px; color: var(--dim); margin-top: 8px; }
.form input, .form select { max-width: 460px; }
.form .hint { font-size: 12px; color: var(--faint); max-width: 560px; line-height: 1.5; }
.form .hint .mono { color: var(--dim); }
.steps { margin: 6px 0 0 18px; padding: 0; line-height: 1.7; }
.perm { border-collapse: collapse; margin: 8px 0; font-size: 12px; }
.perm th, .perm td { text-align: left; padding: 4px 12px 4px 0; border-bottom: 1px solid #262117; }
.perm th { color: var(--dim); font-weight: 600; }
.cmd { font-family: var(--mono); font-size: 12px; color: var(--yellow);
       background: var(--panel2); border: 1px solid var(--line); border-radius: 6px;
       padding: 7px 10px; margin: 4px 0; overflow-x: auto; white-space: pre; }
button { cursor: pointer; }
button.on { background: #33291b; color: var(--yellow); border-color: #5a4324; }

/* ── kancelář ───────────────────────────────────────────────────────── */
/* Kancelar je 3D scena (office3d.js, zdroj v dashboard/web). Vysku ji dava
   okno: scena se do ni vejde cela a priblizuje se v ni, nestranku. */
.office { min-height: 320px; }
.office3d { position: relative; height: clamp(520px, calc(100vh - 250px), 1600px);
            --o-panel: #151b22eb; --o-line: #2b3540; --o-fg: #e3ebf2; --o-dim: #8b9aa8;
            --o-accent: #46c8d6; --o-warn: #e0a24a; --o-bad: #ef6b60; --o-chip: #1d252e;
            --o-err: #ef6b60; --o-btn: #46c8d6; --o-on-btn: #0b1a1d; --o-link: #46c8d6; }
.office3d[data-look="studio"] { --o-panel: #ffffffe6; --o-line: #c9d1d7; --o-fg: #1f2a33; --o-dim: #5d6b76;
                                --o-accent: #2f6fd6; --o-warn: #c9822b; --o-bad: #d4483f; --o-chip: #eef2f5;
                                --o-err: #b8372f; --o-btn: #2f6fd6; --o-on-btn: #ffffff; --o-link: #2459b3; }
.office3d[data-look="drevo"] { --o-panel: #fbf4eae8; --o-line: #dccab4; --o-fg: #3a2c20; --o-dim: #7a6552;
                               --o-accent: #c0612b; --o-warn: #c9822b; --o-bad: #d4483f; --o-chip: #f3e8da;
                               --o-err: #b3342c; --o-btn: #a9501f; --o-on-btn: #ffffff; --o-link: #8f4318; }
.o3-stage { position: absolute; inset: 0; outline: none; overflow: hidden; }
.o3-stage canvas { display: block; }
.o3-labels { position: absolute; inset: 0; pointer-events: none; }
.o3-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); font-family: var(--mono); font-size: 13px; }
.o3-legend { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: grid; gap: 3px;
             background: var(--o-panel); border: 1px solid var(--o-line); border-radius: 10px;
             padding: 8px 12px; font-size: 12px; color: var(--o-fg); }
.o3-legend div { display: flex; align-items: center; gap: 8px; }
.o3-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.o3-legend .o3-credit { color: var(--o-dim); font-size: 10.5px; margin-top: 3px; }
/* Cedule visi nad zadni zdi mistnosti: nikdy nezakryje, co se v ni deje. */
.o3-sign { pointer-events: auto; position: relative; max-width: 290px; padding: 7px 10px 8px;
           background: var(--o-panel); border: 1px solid var(--o-line); border-radius: 10px;
           box-shadow: 0 6px 18px #0000002e; font-size: 12px; color: var(--o-fg); }
.o3-sign.o3-office { max-width: 188px; }
.o3-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.o3-name { font-weight: 800; font-size: 14px; cursor: pointer; }
.o3-name:hover { color: var(--o-accent); }
.o3-note { font-family: var(--mono); font-size: 10.5px; color: var(--o-dim); margin: 1px 0 6px; }
.o3-note.o3-warn { color: var(--o-warn); }
.o3-note.o3-bad { color: var(--o-bad); }
.o3-pill { font: 600 10.5px var(--mono); padding: 3px 7px; border-radius: 7px; border: 1px solid var(--o-line);
           background: transparent; color: var(--o-dim); cursor: pointer; }
.o3-pill:hover { border-color: var(--o-accent); }
.o3-pill:focus-visible, .o3-needs a:focus-visible, .o3-menu a:focus-visible { outline: 2px solid var(--o-accent); outline-offset: 1px; }
/* Zdaleka (mistnost je na obrazovce uzka) jen jmeno a stav. */
.o3-sign.compact { padding: 5px 9px; }
.o3-sign.compact .o3-ctl, .o3-sign.compact .o3-needs { display: none; }
.o3-sign.compact .o3-note { margin: 0; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Project controls (controls.js) on a 3D sign: the shared .pc elements in the
   sign's colours (--o-*), sized like the old pills (10.5px mono, 20 px high).
   Selectors start with .o3-sign so they beat the overview rules
   ("select, button, input", button.on, .pc-repo > summary, .pc-menu). */
.o3-sign { color-scheme: dark; }
.office3d[data-look="studio"] .o3-sign, .office3d[data-look="drevo"] .o3-sign { color-scheme: light; }
.o3-sign .pc { margin-left: 0; gap: 5px; flex: 1 1 auto; }
.o3-sign .pc-pair { gap: 5px; }
.o3-sign .pc .legend { font: 10.5px var(--mono); color: var(--o-dim); }
.o3-sign .pc button, .o3-sign .pc select, .o3-sign .pc-repo > summary {
  box-sizing: border-box; height: 20px; font: 600 10.5px/1 var(--mono); padding: 0 7px; border-radius: 7px;
  border: 1px solid var(--o-line); background: transparent; color: var(--o-dim); cursor: pointer; }
.o3-sign .pc-repo > summary { display: inline-flex; align-items: center; }
.o3-sign .pc button:hover, .o3-sign .pc select:hover, .o3-sign .pc-repo > summary:hover { border-color: var(--o-accent); }
/* Paused: the old .o3-pill.pause.on (not the overview's brown button.on). */
.o3-sign .pc-pause.on { background: var(--o-warn); border-color: var(--o-warn); color: #1b1408; }
/* Priority: --o-chip / --o-fg (4.5:1 in all looks); not "normal" = accent
   frame. Accent text on --o-chip is only 4.27:1 (studio) / 3.48:1 (drevo). */
.o3-sign .pc select { padding: 0 2px 0 6px; background: var(--o-chip); color: var(--o-fg); }
.o3-sign .pc select:has(option:checked:not([value="normal"])) { border-color: var(--o-accent); }
.o3-sign .pc-repo { position: static; }       /* menu hangs from the sign, not from the summary */
.o3-sign .pc-repo[open] > summary { background: var(--o-chip); color: var(--o-fg); border-color: var(--o-accent); }
.o3-sign .pc-menu { left: 0; right: auto; top: calc(100% + 6px); z-index: 4; display: grid; gap: 2px;
                    min-width: 230px; max-width: 290px; padding: 6px; background: var(--o-panel);
                    border: 1px solid var(--o-line); border-radius: 10px; box-shadow: 0 8px 22px #00000040; }
.o3-sign .pc-menu a { padding: 5px 8px; border-radius: 6px; color: var(--o-fg); font: 12px var(--mono); }
.o3-sign .pc-menu a:hover, .o3-sign .pc-menu a:focus-visible { background: var(--o-chip); color: var(--o-accent); }
.o3-sign .pc-head { color: var(--o-dim); font: 10px var(--mono); padding: 4px 8px 2px;
                    text-transform: uppercase; letter-spacing: .08em; }
.o3-sign .pc button:focus-visible, .o3-sign .pc select:focus-visible, .o3-sign .pc summary:focus-visible,
.o3-sign .pc-menu a:focus-visible { outline: 2px solid var(--o-accent); outline-offset: 1px; }
.o3-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 4; display: grid; gap: 2px; min-width: 230px;
           padding: 6px; background: var(--o-panel); border: 1px solid var(--o-line); border-radius: 10px;
           box-shadow: 0 8px 22px #00000040; }
.o3-menu a { display: flex; justify-content: space-between; gap: 10px; padding: 5px 8px; border-radius: 6px;
             color: var(--o-fg); font: 12px var(--mono); }
.o3-menu a:hover, .o3-menu a:focus-visible { background: var(--o-chip); color: var(--o-accent); }
/* Last instructions (office sign): summary on one line with an ellipsis, state on the right. */
.o3-menu[data-kind="inst"] { width: 300px; max-width: 80vw; }
.o3-menu[data-kind="inst"] a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o3-menu[data-kind="inst"] a span + span { flex: 0 1 auto; max-width: 55%; color: var(--o-dim); }
.o3-menu[data-kind="inst"] a span.o3-warn { color: var(--o-warn); }
.o3-menu[data-kind="inst"] a span.o3-bad { color: var(--o-err); }
.o3-menu small { color: var(--o-dim); font: 10px var(--mono); padding: 4px 8px 2px; text-transform: uppercase; letter-spacing: .08em; }
.o3-needs { margin-top: 4px; display: grid; gap: 3px; }
.o3-needs a { display: flex; gap: 7px; align-items: baseline; min-width: 0; color: var(--o-fg); font-size: 11.5px; }
.o3-needs a:hover { color: var(--o-accent); }
.o3-needs a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o3-needs i { width: 8px; height: 8px; border-radius: 2px; flex: none; transform: translateY(1px); }
.o3-needs code { font: 11px var(--mono); color: var(--o-dim); }
/* State of your last instruction: one line under the tray line. */
.o3-note.o3-last { margin-top: -4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Instruction bubble and expanded panel (bubble.ts): same font, frame and
   background as the signs. --o-err / --o-btn / --o-on-btn keep text at 4.5:1
   or better in all three looks (--o-bad on light panels does not). */
.o3-stage { container-type: inline-size; }
.o3-bubble { pointer-events: auto; width: 320px; max-width: 320px; }
.o3-ask { display: grid; gap: 6px; padding: 7px 10px 8px; background: var(--o-panel); border: 1px solid var(--o-line);
          border-radius: 10px; box-shadow: 0 6px 18px #0000002e; font-size: 12px; color: var(--o-fg); }
.o3-ask [hidden] { display: none; }
.o3-head { justify-content: space-between; flex-wrap: nowrap; }
.o3-for { min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.o3-title { font: 600 10.5px var(--mono); color: var(--o-dim); text-transform: uppercase; letter-spacing: .06em; }
.o3-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 1px 2px 1px 8px; border-radius: 7px;
           border: 1px solid var(--o-line); background: var(--o-chip); color: var(--o-fg); font: 600 11px var(--mono); }
.o3-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o3-x { border: 0; background: transparent; color: var(--o-dim); cursor: pointer; font-size: 15px; line-height: 1;
        padding: 1px 5px; border-radius: 5px; }
.o3-x:hover { color: var(--o-fg); }
.o3-field { display: block; width: 100%; box-sizing: border-box; resize: none; margin: 0; padding: 6px 8px;
            font: inherit; font-size: 12.5px; line-height: 1.45; color: var(--o-fg); background: var(--o-chip);
            border: 1px solid var(--o-line); border-radius: 7px; }
.o3-field::placeholder { color: var(--o-dim); opacity: 1; }
.o3-field:focus, .o3-ask button:focus-visible { outline: 2px solid var(--o-accent); outline-offset: 1px; }
.o3-foot { justify-content: flex-end; gap: 6px; }
.o3-count { margin-right: auto; font: 10.5px var(--mono); color: var(--o-dim); }
.o3-count.o3-over { color: var(--o-err); font-weight: 700; }
.o3-send { font: 700 11px var(--mono); padding: 4px 10px; border-radius: 7px; cursor: pointer;
           border: 1px solid var(--o-btn); background: var(--o-btn); color: var(--o-on-btn); }
.o3-send:disabled { opacity: .5; cursor: not-allowed; }
.o3-msg { margin: 0; font: 11px var(--mono); color: var(--o-fg); white-space: pre-wrap; overflow-wrap: anywhere; }
.o3-msg.o3-bad { color: var(--o-err); }
/* Expanded: a fixed overlay over the right part of the stage, the field grows
   with the text and the panel scrolls it; a narrow stage gets the full width. */
.o3-panel { position: absolute; top: 8px; bottom: 8px; right: 8px; width: min(520px, 45%); z-index: 5; display: flex; }
.o3-panel[hidden] { display: none; }
.o3-ask.o3-wide { flex: 1; display: flex; flex-direction: column; min-height: 0; box-shadow: 0 10px 28px #00000040; }
.o3-ask.o3-wide .o3-field { flex: 0 1 auto; min-height: 7.5em; overflow: auto; font-size: 13px; }
@container (max-width: 719px) { .o3-panel { left: 8px; width: auto; } }
/* Dispatcher's reply: the same overlay, the text scrolls. */
.o3-ask.o3-reply { overflow: auto; gap: 8px; }
.o3-ask.o3-reply:focus { outline: none; }
.o3-reply .o3-note { margin: 0; }
.o3-reply .o3-summary { font-family: inherit; font-size: 13px; line-height: 1.5; }
.o3-reply .o3-reason { color: var(--o-dim); }
.o3-reply .o3-hint { padding-left: 8px; border-left: 3px solid var(--o-warn); }
.o3-link { color: var(--o-accent); font: 600 12px var(--mono); align-self: flex-start; }
.o3-link:hover { text-decoration: underline; }
.o3-link:focus-visible { outline: 2px solid var(--o-accent); outline-offset: 1px; }
/* Report: Markdown drawn as plain DOM (web/src/markdown.ts); everything is text.
   --o-link instead of --o-accent: the accent lacks 4.5:1 on the see-through
   panel in studio and drevo. Links stay underlined (not colour alone). */
.o3-md { max-width: 72ch; min-width: 0; padding-top: 8px; border-top: 1px solid var(--o-line);
         font-size: 13px; line-height: 1.5; color: var(--o-fg); overflow-wrap: anywhere; }
.o3-md > :first-child { margin-top: 0; }
.o3-md > :last-child { margin-bottom: 0; }
.o3-md h1, .o3-md h2, .o3-md h3 { margin: 14px 0 6px; color: var(--o-fg); }
.o3-md h1 { font-size: 18px; line-height: 1.3; font-weight: 800; }
.o3-md h2 { font-size: 15.5px; line-height: 1.35; font-weight: 700; }
.o3-md h3 { font-size: 14px; line-height: 1.4; font-weight: 700; }
.o3-md p { margin: 0 0 8px; }
.o3-md ul, .o3-md ol { margin: 0 0 8px; padding-left: 22px; }
.o3-md li { margin: 2px 0; }
.o3-md code { font: 12px/1.45 var(--mono); padding: 1px 4px; border-radius: 4px;
              background: var(--o-chip); border: 1px solid var(--o-line); color: var(--o-fg); }
.o3-md pre { margin: 0 0 10px; padding: 8px 10px; overflow-x: auto; white-space: pre; tab-size: 4;
             background: var(--o-chip); border: 1px solid var(--o-line); border-radius: 7px; }
.o3-md pre code { padding: 0; border: 0; border-radius: 0; background: none; font-size: 12px; line-height: 1.5; }
/* :hover listed too: the global 'a:hover' would turn the link yellow. */
.o3-md a, .o3-md a:visited, .o3-md a:hover { color: var(--o-link); text-decoration: underline;
                                             text-decoration-thickness: 1px; text-underline-offset: 2px; }
.o3-md a:hover { text-decoration-thickness: 2px; }
.o3-md a:focus-visible, .o3-md pre:focus-visible { outline: 2px solid var(--o-accent); outline-offset: 1px; }
.o3-closed { pointer-events: auto; text-align: center; padding: 8px 16px; border-radius: 12px;
             background: #2a1c19; color: #ffb3ac; border: 3px solid #a8443c; box-shadow: 0 10px 24px #0000004d; }
.o3-closed b { display: block; font-size: 17px; letter-spacing: .02em; }
.o3-closed span { font: 11px var(--mono); color: #e08c84; }
/* Prepinace vzhledu pod hlavickou kancelare. */
.look { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 6px 13px; border-bottom: 1px solid var(--line);
        background: var(--panel2); }
.look:empty { display: none; }
.o3-seg { display: inline-flex; align-items: center; gap: 4px; }
.o3-seg .legend { margin-right: 3px; }
.o3-seg button.on { background: #33291b; color: var(--yellow); border-color: #5a4324; }
.legend { font-size: 11px; color: var(--dim); min-width: 0; }
.need a { color: inherit; display: flex; flex-direction: column; gap: 2px; }
.need a:hover { color: var(--yellow); }
.card-title:hover { color: var(--yellow); }

/* ── detail projektu ────────────────────────────────────────────────── */
.board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
         gap: 12px; padding: 14px; flex-grow: 1; align-items: start; overflow: auto; }
.col { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.col-head { display: flex; align-items: center; gap: 7px; font-size: 12px;
            font-weight: 600; color: var(--dim); }
.card { background: var(--panel2); border: 1px solid #322b22; border-radius: 8px;
        padding: 9px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.card:hover { border-color: #5a4324; }
.card.picked { border-color: var(--orange); background: #262117; }
.card-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11px; }
.card-title { font-size: 12px; line-height: 1.35; }
.step { display: flex; gap: 11px; padding: 0 13px; }
.step-rail { display: flex; flex-direction: column; align-items: center; }
.bead { width: 22px; height: 22px; border-radius: 999px; background: #1e1a15;
        border: 2px solid #3d3529; flex: 0 0 auto; }
.bead.done { border-color: var(--green); background: #23331f; }
.bead.now { border-color: var(--orange); background: #33291b; }
.bead.dashed { border-style: dashed; }
.line { width: 2px; flex-grow: 1; min-height: 20px; background: #3d3529; }
.line.done { background: var(--green); }
.step .grow { padding-bottom: 14px; font-size: 13px; }

/* ── přehledy (tabulky) ─────────────────────────────────────────────── */
.tablewrap { overflow: auto; flex-grow: 1; }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
thead th { position: sticky; top: 0; background: var(--panel2); color: var(--dim);
           font-weight: 600; font-size: 11px; text-align: left; padding: 8px 10px;
           border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 7px 10px; border-bottom: 1px solid #262117; white-space: nowrap;
     font-family: var(--mono); }
tbody tr:hover { background: var(--panel2); }
th.num, td.num { text-align: right; }
tfoot td { padding: 8px 10px; border-top: 1px solid var(--line); font-weight: 700;
           background: var(--panel2); }
.ok-text { color: var(--green); } .bad-text { color: var(--red); }
.warn-text { color: var(--amber); }
.notes { padding: 10px 14px; border-top: 1px solid var(--line); font-size: 12px;
         display: flex; flex-direction: column; gap: 4px; }
/* Skupina = jeden ukol. Hlavicka skupiny je vyraznejsi, radky roli pod ni
   jsou tise - aby bylo videt, co k cemu patri. */
tr.grouphead td { border-top: 1px solid var(--line); background: #201c17;
                  font-weight: 600; }
td[title] { cursor: help; }
td.taskid { color: var(--orange); }
tr.grouphead td.taskid { font-weight: 700; }
.filters { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.filter { font-family: var(--sans); font-size: 12px; color: var(--ink);
          background: var(--panel2); border: 1px solid var(--line);
          border-radius: 8px; padding: 5px 9px; max-width: 190px; }
.pager { display: flex; gap: 10px; align-items: center; padding: 9px 14px;
         border-top: 1px solid var(--line); font-size: 12px; }
/* ── ovládání práce ─────────────────────────────────────────────────── */
.ctl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Control bar above both views. Padding and font as .head: above 640 px it
   should look as it did in the office header. */
.ctlbar { padding: 10px 14px; font-size: 13px; font-weight: 600; }
/* A label and its select never split across two lines. */
.ctl-pair { display: inline-flex; align-items: center; gap: 8px; }
button.go { background: #2c3a2c; border-color: #3f5a45; color: #b6e6c4; }
button.go:hover { background: #35492f; }
button.halt { background: #3a2a26; border-color: #5a3a34; color: #f0bdb5; }
button.halt:hover { background: #46312c; }
/* Ne-vychozi ucet Claude: videt na prvni pohled, at nezustane zapnuty omylem. */
select.acct-other { background: #3a2a26; border-color: #5a3a34; color: #f0bdb5; }
button:disabled { opacity: .45; cursor: default; }

/* ── project controls in the overview (controls.js, ProjectControls) ── */
/* Button and select take their look from "select, button, input" and the
   paused state from button.on; this is layout, the summary styled as a
   button, and focus. */
/* A project row wraps when it does not fit (instead of squeezing the
   controls into a column); the chips take the rest and wrap inside. */
#projects > .row { flex-wrap: wrap; }
.ov-chips { display: flex; gap: 7px; flex-wrap: wrap; flex: 1 1 120px; min-width: 120px; }
/* A switched-off project: the description dims, the controls do not
   (contrast of the label and of "pustit práci"). */
#projects > .row.off > :not(.pc) { opacity: .62; }
.pc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 0 0 auto;
      margin-left: auto; cursor: default; }
.pc-pair { display: inline-flex; align-items: center; gap: 6px; }
.pc-repo { position: relative; }
.pc-repo > summary { list-style: none; cursor: pointer; font-size: 13px; color: var(--ink);
                     background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
                     padding: 6px 10px; white-space: nowrap; user-select: none; }
.pc-repo > summary::-webkit-details-marker { display: none; }
.pc-repo[open] > summary { background: #33291b; color: var(--yellow); border-color: #5a4324; }
/* Above 640 px the open list hangs below the summary, aligned to its right
   edge, so the row does not jump. */
.pc-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 200px;
           max-width: 340px; display: flex; flex-direction: column; padding: 4px 0;
           background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
           box-shadow: 0 8px 22px #00000059; }
.pc-menu a { font-family: var(--mono); font-size: 12px; padding: 6px 12px; overflow-wrap: anywhere; }
.pc-menu a:hover, .pc-menu a:focus-visible { background: var(--panel2); color: var(--yellow); }
.pc-head { font-size: 11px; color: var(--dim); padding: 6px 12px 2px; }
.pc button:focus-visible, .pc select:focus-visible, .pc summary:focus-visible,
.pc-menu a:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }

/* Potvrzení nevratné akce. Překryv schválně přes celou plochu: má to
   přerušit práci, ne se schovat v rohu. */
.modal-back {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .6);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal { width: min(520px, 92vw); padding: 18px; }
.modal .legend { margin-top: 12px; }

/* ── narrow screens ─────────────────────────────────────────────────── */
/* One set of styles for all pages. Width is held by wrapping and by scrolling
   INSIDE containers (.board, .tablewrap, .tabs, .perm), not by overflow-x:
   hidden on the page. Nothing changes above 1000 px. */
@media (max-width: 1000px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .board { grid-template-columns: repeat(6, minmax(200px, 1fr)); overflow-x: auto; }
  /* Account and percentages wrap below each other when a third is too narrow. */
  .tile.limits .lim-row { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .wrap { padding: 10px; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile.limits { grid-column: 1 / -1; }
  .tabs { overflow-x: auto; max-width: 100%; }
  .tabs a { white-space: nowrap; display: flex; align-items: center; }
  button, select, .tabs a { min-height: 40px; }
  /* 16 px: iOS does not zoom on focus. .filter has its own 12 px rule. */
  input, select, .filter { font-size: 16px; }
  .filter { max-width: 100%; }
  .row { flex-wrap: wrap; }
  .row > .grow { min-width: 0; overflow-wrap: anywhere; }
  .ov-name, .ov-num, .ov-who, .ov-time, .ov-quiet, .pj-num { width: auto; }
  /* Factory switch (factory.js) and project rows (projects.js). */
  #factory-switch { max-width: 100%; min-width: 0; flex-wrap: wrap; border-radius: 10px; }
  #factory-switch select { min-width: 0; max-width: 100%; }
  .need { flex-wrap: wrap; }
  .need > .grow { flex-basis: calc(100% - 12px); min-width: 0; overflow-wrap: anywhere; }
  .perm { display: block; max-width: 100%; overflow-x: auto; }
  /* The office (WebGL) does not start on narrow screens: app.js switches to
     the overview (NARROW_QUERY). This only hides it; !important beats the
     section's inline style and the display set by setView. */
  #views a[data-view="office"], #view-office { display: none !important; }
  .ctlbar { padding: 10px; }
  .ctlbar .ctl { gap: 8px 10px; }
  .ctlbar #go, .ctlbar #halt { flex: 1 1 auto; }
  .ctlbar #ctl-note { flex-basis: 100%; }
  /* Project controls (controls.js): their own full-width line below the
     name; the repository list opens in the flow, not as a floating menu. */
  .ov-chips { flex: 1 1 auto; }
  .pc { order: 1; flex: 1 1 100%; margin-left: 0; gap: 8px 10px; }
  .pc > button { flex: 1 1 auto; }
  .pc-pair { flex: 1 1 auto; }
  .pc-pair select { flex: 1 1 auto; min-width: 0; }
  .pc-repo { flex: 1 1 100%; }
  .pc-repo > summary { min-height: 40px; display: flex; align-items: center; justify-content: center; }
  .pc-menu { position: static; min-width: 0; max-width: none; box-shadow: none; margin-top: 6px; }
  .pc-menu a { min-height: 40px; display: flex; align-items: center; font-size: 14px; }
}