/* faz1/dashboard.css (B5b) · the Fernas Pano in the HyperMONK manager-view grammar. Every selector starts with .f1d-.
   Transitions: .f1d-drawer transform 240 ms ease-out (disabled during seeks by #f1-app.f1-instant). */
.f1d-host { height: 100%; min-height: 0; overflow: hidden; position: relative; }
.f1d-pano {
  position: relative; height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box;
  background: var(--pro-page, #f7f8fa); color: var(--pro-ink, #202630); font-family: var(--f1-sans, "Segoe UI", -apple-system, Arial, sans-serif); font-size: 13px; line-height: 1.35;
  --f1d-row: 28px;
}
.f1d-pano[data-density="rahat"] { --f1d-row: 36px; }
.f1d-pano *, .f1d-pano *::before, .f1d-pano *::after { box-sizing: border-box; }
.f1d-emptyscreen, .f1d-empty { padding: 24px; color: var(--pro-text2, #58616f); }

/* top bar 50 px */
.f1d-top { flex: none; height: 50px; display: flex; align-items: center; gap: 14px; padding: 0 12px 0 10px; background: var(--pro-panel, #fff); border-bottom: 1px solid var(--pro-line, #e5e8ee); white-space: nowrap; min-width: 0; }
.f1d-brand { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.f1d-brand b { font-weight: 700; letter-spacing: -.01em; }
.f1d-logo { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--pro-ink, #202630); position: relative; flex: none; }
.f1d-logo::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--fam-work, #22508F); }
.f1d-badge { font-size: 10.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; color: var(--st-ok, #2a9d6f); background: color-mix(in srgb, var(--st-ok, #2a9d6f) 12%, transparent); border: 1px solid color-mix(in srgb, var(--st-ok, #2a9d6f) 35%, transparent); }
.f1d-viewer { font-size: 12.5px; color: var(--pro-text2, #58616f); padding: 3px 9px; border: 1px solid var(--pro-line, #e5e8ee); border-radius: 8px; background: var(--pro-soft, #f7f8fa); }
.f1d-viewer b { color: var(--pro-ink, #202630); font-weight: 600; }
.f1d-crumbs { font-size: 12.5px; color: var(--pro-text2, #58616f); overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
.f1d-crumbs i { font-style: normal; opacity: .6; margin: 0 2px; }
/* Leo 2026-10-15: the clock chip was too dark and dominant; now a calm light chip like the viewer chip, in both themes */
.f1d-clock { font-family: var(--f1-mono, ui-monospace, Consolas, monospace); font-size: 12.5px; padding: 3px 9px; border-radius: 8px; background: var(--pro-soft, #f7f8fa); color: var(--pro-text2, #58616f); border: 1px solid var(--pro-line, #e5e8ee); white-space: nowrap; }
.f1d-search { display: flex; align-items: center; gap: 6px; padding: 0 9px; height: 30px; border: 1px solid var(--pro-line, #e5e8ee); border-radius: 8px; background: var(--pro-soft, #f7f8fa); flex: 0 1 300px; min-width: 120px; color: var(--pro-text2, #58616f); }
.f1d-search input { all: unset; flex: 1; min-width: 0; font-size: 12.5px; color: var(--pro-ink, #202630); }
.f1d-search input::placeholder { color: var(--pro-text2, #58616f); }
.f1d-dens { display: inline-flex; border: 1px solid var(--pro-line, #e5e8ee); border-radius: 8px; overflow: hidden; }
.f1d-dens button { all: unset; cursor: pointer; padding: 4px 10px; font-size: 12px; color: var(--pro-text2, #58616f); }
.f1d-dens button.f1d-on { background: var(--pro-focus, #edf1ff); color: var(--pro-accent, #5267d8); font-weight: 600; }
.f1d-answer { flex: none; display: flex; gap: 8px; align-items: center; padding: 6px 14px; font-size: 13px; background: var(--pro-focus, #edf1ff); border-bottom: 1px solid var(--pro-line, #e5e8ee); }
.f1d-answer i { font-style: normal; color: var(--pro-accent, #5267d8); }

/* body: rail 40 · left 272 · middle · right 340 */
/* one row no taller than the body: the icon rail (387 px at 1366) used to size the row, so the scroll columns ran past
   the panel once the Olaylar window made it shorter and their last rows could not be scrolled into view (H08c.1:2) */
.f1d-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 40px 272px minmax(0, 1fr) 340px; grid-template-rows: minmax(0, 1fr); gap: 10px; padding: 0 22px 10px 0; }
.f1d-body.f1d-wide-right { grid-template-columns: 40px 232px minmax(0, 1fr) minmax(340px, 44%); }
.f1d-rail { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; background: var(--pro-panel, #fff); border-right: 1px solid var(--pro-line, #e5e8ee); }
.f1d-ri { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0; color: var(--pro-text2, #58616f); border-left: 2px solid transparent; }
.f1d-ri-ico { font-size: 15px; line-height: 1; }
.f1d-ri-l { font-size: 8.5px; max-width: 38px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f1d-ri.f1d-on { color: var(--pro-accent, #5267d8); border-left-color: var(--pro-accent, #5267d8); background: var(--pro-focus, #edf1ff); }
.f1d-ri.f1d-off { opacity: .45; }
.f1d-left, .f1d-right { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-top: 10px; scrollbar-width: thin; }
.f1d-left > *, .f1d-right > *, .f1d-mid > * { flex: none; }
.f1d-panel, .f1d-block { background: var(--pro-panel, #fff); border: 1px solid var(--pro-line, #e5e8ee); border-radius: 10px; padding: 10px 12px; min-width: 0; box-shadow: var(--f1-shadow, none); }
.f1d-ph h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.005em; }
.f1d-ph p { margin: 2px 0 6px; font-size: 12px; color: var(--pro-text2, #58616f); }
.f1d-tree { display: flex; flex-direction: column; overflow: hidden; }
.f1d-node { all: unset; cursor: pointer; display: flex; align-items: center; gap: 5px; padding: 3px 4px 3px calc(4px + var(--d, 0) * 13px); border-radius: 6px; font-size: 12.5px; }
.f1d-node i { font-style: normal; width: 10px; color: var(--pro-text2, #58616f); font-size: 10px; }
.f1d-node span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f1d-node b { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12px; padding: 0 6px; border-radius: 999px; background: var(--pro-soft, #f7f8fa); border: 1px solid var(--pro-line, #e5e8ee); }
.f1d-node.f1d-on { background: var(--pro-focus, #edf1ff); color: var(--pro-accent, #5267d8); }
.f1d-saved { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.f1d-saved li { padding: 3px 6px; border-radius: 6px; }
.f1d-saved li::before { content: "☆ "; color: var(--pro-text2, #58616f); }
.f1d-sources { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.f1d-sources li { display: grid; grid-template-columns: 1fr auto; gap: 1px 6px; align-items: center; }
.f1d-src-l { font-weight: 600; }
.f1d-src-t { grid-column: 1; color: var(--pro-text2, #58616f); font-size: 11.5px; }
.f1d-sources .f1d-chip { grid-row: 1 / span 2; grid-column: 2; }

/* middle */
.f1d-mid { min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 10px; padding-top: 10px; scrollbar-width: thin; }
.f1d-screenhead { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.f1d-screenhead h1 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f1d-note { font-size: 11px; color: var(--pro-text2, #58616f); border: 1px dashed var(--pro-line, #e5e8ee); border-radius: 999px; padding: 0 8px; white-space: nowrap; }
.f1d-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.f1d-tiles-2x2 { grid-template-columns: 1fr 1fr; }
.f1d-tile { min-height: 72px; background: var(--pro-panel, #fff); border: 1px solid var(--pro-line, #e5e8ee); border-radius: 10px; padding: 8px 11px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.f1d-tile-l { font-size: 11.5px; color: var(--pro-text2, #58616f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f1d-tile-long .f1d-tile-v { font-size: 15px; line-height: 1.25; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.f1d-tile-v { font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f1d-tile-s { font-size: 11.5px; color: var(--pro-text2, #58616f); display: flex; gap: 6px; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.f1d-tile-s .f1d-chip { flex: none; }
.f1d-tick { flex: none; color: var(--st-ok, #2a9d6f); font-weight: 700; font-size: 14px; line-height: 1; }
.f1d-temsili { font-style: normal; font-size: 10px; padding: 0 5px; border-radius: 999px; border: 1px dashed var(--pro-muted, #89919d); color: var(--pro-text2, #58616f); }
.f1d-buckets { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.f1d-bucket { position: relative; height: 64px; background: var(--pro-panel, #fff); border: 1px solid var(--pro-line, #e5e8ee); border-radius: 10px; padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.f1d-bucket-l { font-weight: 700; font-size: 12.5px; }
.f1d-bucket-line { font-size: 11px; color: var(--pro-text2, #58616f); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f1d-meter { display: block; height: 4px; border-radius: 2px; background: var(--pro-soft, #f7f8fa); overflow: hidden; margin-top: auto; }
.f1d-meter i { display: block; height: 100%; background: var(--arc, #27A37A); }
.f1d-tray { position: absolute; right: 8px; top: 6px; width: 54px; height: 20px; border-radius: 10px; border: 1px dashed var(--pro-line, #e5e8ee); }
.f1d-main { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; align-items: start; }
.f1d-main.f1d-g-2x2 { grid-template-columns: 1fr 1fr; }
.f1d-main .f1d-full { grid-column: 1 / -1; }

/* blocks */
.f1d-bh { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.f1d-bh-t { flex: 1; min-width: 0; }
.f1d-bh h3 { margin: 0; font-size: 14px; font-weight: 700; }
.f1d-bh p { margin: 1px 0 0; font-size: 12px; color: var(--pro-text2, #58616f); }
.f1d-mini { all: unset; cursor: pointer; font-size: 11.5px; padding: 2px 8px; border: 1px solid var(--pro-line, #e5e8ee); border-radius: 6px; color: var(--pro-text2, #58616f); white-space: nowrap; }
.f1d-score { font-weight: 700; font-size: 12.5px; white-space: nowrap; padding: 2px 8px; border-radius: 6px; background: var(--pro-focus, #edf1ff); }
.f1d-filters { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.f1d-filter { all: unset; cursor: pointer; font-size: 12px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--pro-line, #e5e8ee); }
.f1d-filter b { font-variant-numeric: tabular-nums; }
.f1d-filter.f1d-on { background: var(--pro-ink, #202630); color: var(--pro-bg, #fff); border-color: transparent; }
.f1d-batch { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 5px 8px; margin-bottom: 6px; border-radius: 8px; border: 1px dashed var(--pro-line, #e5e8ee); color: var(--pro-text2, #58616f); font-size: 12.5px; }
.f1d-batch.f1d-live { border-style: solid; border-color: color-mix(in srgb, var(--pro-accent, #5267d8) 45%, transparent); background: var(--pro-focus, #edf1ff); color: var(--pro-ink, #202630); }
.f1d-batch-l { font-weight: 600; flex: 1; }
.f1d-acts { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.f1d-act { all: unset; cursor: pointer; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 6px; border: 1px solid var(--pro-line, #e5e8ee); background: var(--pro-panel, #fff); color: var(--pro-ink, #202630); white-space: nowrap; }
.f1d-act[disabled] { opacity: .5; cursor: default; }
.f1d-primary { background: var(--pro-accent, #5267d8); color: #fff; border-color: transparent; }
.f1d-pressed { outline: 2px solid color-mix(in srgb, var(--pro-accent, #5267d8) 55%, transparent); outline-offset: 1px; }
.f1d-batch.f1d-pressed { outline-offset: 2px; }
.f1d-tw { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.f1d-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.f1d-table th { position: sticky; top: 0; text-align: left; font-weight: 600; font-size: 11.5px; color: var(--pro-text2, #58616f); background: var(--pro-soft, #f7f8fa); padding: 4px 8px; border-bottom: 1px solid var(--pro-line, #e5e8ee); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.f1d-table td { height: var(--f1d-row); padding: 2px 8px; border-bottom: 1px solid var(--pro-line, #e5e8ee); white-space: nowrap; max-width: 300px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.f1d-table .f1d-r { text-align: right; }
.f1d-table tbody tr.f1d-row:hover td { background: var(--pro-soft, #f7f8fa); cursor: pointer; }
.f1d-table tr.f1-sel td { background: var(--pro-focus, #edf1ff); }
.f1d-table tr.f1-cue td { background: var(--pro-focus, #edf1ff); box-shadow: inset 0 1px 0 var(--pro-accent, #5267d8), inset 0 -1px 0 var(--pro-accent, #5267d8); }
.f1d-table tr.f1d-checked td:first-child { box-shadow: inset 3px 0 0 var(--pro-accent, #5267d8); }
.f1d-rt-crit td:first-child { box-shadow: inset 3px 0 0 var(--st-crit, #d23a2e); }
.f1d-rt-warn td:first-child { box-shadow: inset 3px 0 0 var(--st-warn, #d9a000); }
.f1d-rt-ok td:first-child { box-shadow: inset 3px 0 0 var(--st-ok, #2a9d6f); }
.f1d-rt-muted td { color: var(--pro-text2, #58616f); font-weight: 600; }
.f1d-grp td { font-weight: 700; font-size: 12px; background: var(--pro-soft, #f7f8fa); }
.f1d-num { font-variant-numeric: tabular-nums; }
.f1d-table .f1d-acts { flex-wrap: nowrap; }
/* the action column stays at the right edge of the table scroller, so its buttons are visible (and reachable by the cursor) in a narrow panel */
.f1d-table td.f1d-actc { position: sticky; right: 0; z-index: 1; background: var(--pro-panel, #fff); box-shadow: -1px 0 0 var(--pro-line, #e5e8ee); max-width: none; }
.f1d-table th.f1d-actc { right: 0; z-index: 2; box-shadow: -1px 0 0 var(--pro-line, #e5e8ee); }
.f1d-struck td { text-decoration: line-through; text-decoration-color: var(--st-crit, #d23a2e); color: var(--pro-text2, #58616f); }
.f1d-struck td .f1d-chip { text-decoration: none; }
.f1d-cb { font-size: 14px; color: var(--pro-text2, #58616f); }
.f1d-cb.f1d-on { color: var(--pro-accent, #5267d8); }
.f1d-detailrow td { white-space: normal; background: var(--pro-soft, #f7f8fa); font-size: 12px; height: auto; padding: 6px 12px; }
.f1d-detailrow ul { margin: 0; padding-left: 16px; }
.f1d-strip { display: flex; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; }
.f1d-strip li { display: flex; flex-direction: column; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--pro-line, #e5e8ee); background: var(--pro-panel, #fff); }
.f1d-strip span { font-size: 11px; color: var(--pro-text2, #58616f); }
.f1d-foot { margin-top: 5px; font-size: 11.5px; color: var(--pro-text2, #58616f); }
.f1d-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; padding: 0 7px; line-height: 18px; border-radius: 999px; border: 1px solid var(--pro-line, #e5e8ee); background: var(--pro-panel, #fff); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.f1d-chip i { font-style: normal; font-size: 10.5px; }
.f1d-t-ok { color: var(--st-ok, #2a9d6f); border-color: color-mix(in srgb, var(--st-ok, #2a9d6f) 40%, transparent); background: color-mix(in srgb, var(--st-ok, #2a9d6f) 10%, var(--pro-panel, #fff)); }
.f1d-t-warn { color: color-mix(in srgb, var(--st-warn, #d9a000) 75%, #000); border-color: color-mix(in srgb, var(--st-warn, #d9a000) 45%, transparent); background: color-mix(in srgb, var(--st-warn, #d9a000) 9%, var(--pro-panel, #fff)); }
.f1d-t-crit { color: var(--st-crit, #d23a2e); border-color: color-mix(in srgb, var(--st-crit, #d23a2e) 45%, transparent); background: color-mix(in srgb, var(--st-crit, #d23a2e) 7%, var(--pro-panel, #fff)); }
.f1d-t-wait { color: var(--pro-text2, #58616f); }
.f1d-t-none { color: var(--pro-ink, #202630); font-weight: 500; }
.f1d-matrix td, .f1d-matrix th[scope] { font-size: 12px; }
.f1d-matrix th[scope] { position: static; background: none; color: var(--pro-ink, #202630); font-weight: 600; }
.f1d-mt-ok { box-shadow: inset 0 -2px 0 var(--chk-ok, #27A37A); }
.f1d-mt-warn, .f1d-mt-explained { box-shadow: inset 0 -2px 0 var(--chk-warn, #D9A000); }
.f1d-mt-crit { box-shadow: inset 0 -2px 0 var(--chk-crit, #D23A2E); }
.f1d-by { font-size: 11px; color: var(--pro-text2, #58616f); }
.f1d-dim { color: var(--pro-text2, #58616f); }
.f1d-crops { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; }
.f1d-crop { margin: 0; flex: none; width: 180px; }
.f1d-crop figcaption { font-size: 11px; color: var(--pro-text2, #58616f); }
.f1d-paper { height: 230px; border-radius: 4px; background: var(--kagit, #FBFAF6); overflow: hidden; border: 1px solid var(--kagit-kenar, #E3DED4); }
.f1d-paper-crop { height: 70px; }
.f1d-scr { height: 320px; overflow: hidden; border-radius: 6px; border: 1px solid var(--pro-line, #e5e8ee); }
.f1d-bars { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.f1d-bars li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; }
.f1d-bar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f1d-bar { position: relative; height: 16px; }
.f1d-bar i { position: absolute; left: 0; top: 3px; bottom: 3px; border-radius: 3px; background: var(--fam-day, #86ABD6); }
.f1d-bar b { position: absolute; left: 4px; top: 0; font-size: 11px; line-height: 16px; }
.f1d-bar-a { color: var(--pro-text2, #58616f); white-space: nowrap; }
.f1d-cards { display: flex; flex-direction: column; gap: 6px; }
.f1d-card { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; border-radius: 8px; background: var(--pro-soft, #f7f8fa); border: 1px solid var(--pro-line, #e5e8ee); font-size: 12.5px; }
.f1d-card span { color: var(--pro-text2, #58616f); }
.f1d-card .f1d-chip { align-self: flex-start; }
.f1d-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 12px; }
.f1d-field { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.f1d-field-l { color: var(--pro-text2, #58616f); }
.f1d-input { display: flex; justify-content: space-between; gap: 6px; align-items: center; min-height: 30px; padding: 4px 9px; border-radius: 7px; border: 1px solid var(--pro-line, #e5e8ee); background: var(--pro-panel, #fff); font-size: 13px; }
.f1d-input.f1d-r { justify-content: flex-end; }
.f1d-input i { font-style: normal; color: var(--pro-text2, #58616f); }
.f1d-blank { background: var(--pro-soft, #f7f8fa); }
.f1d-formbtns { margin-top: 10px; }
.f1d-yetki { margin: 0 0 8px; padding-left: 16px; font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; }
.f1d-stacks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.f1d-stack { position: relative; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--pro-line, #e5e8ee); background: var(--pro-panel, #fff); display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.f1d-stack header { display: flex; flex-direction: column; }
.f1d-stack header b { font-size: 14px; }
.f1d-stack header span { font-size: 11px; color: var(--pro-text2, #58616f); }
.f1d-tray-big { position: static; width: 100%; height: 28px; border-radius: 14px; }
.f1d-stack ul { margin: 0; padding-left: 14px; }
.f1d-stack footer { font-size: 11.5px; color: var(--pro-text2, #58616f); border-top: 1px solid var(--pro-line, #e5e8ee); padding-top: 4px; }
.f1d-feed { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.f1d-feed li { display: grid; grid-template-columns: 54px 1fr; gap: 6px; }
.f1d-feed time { font-family: var(--f1-mono, ui-monospace, Consolas, monospace); font-size: 11px; color: var(--pro-text2, #58616f); padding-top: 1px; }
.f1d-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.f1d-list li { display: grid; grid-template-columns: 16px 1fr auto; gap: 4px; align-items: baseline; }
.f1d-list em { font-style: normal; font-size: 11px; color: var(--pro-text2, #58616f); }
.f1d-dot { font-style: normal; font-size: 11px; text-align: center; color: var(--pro-text2, #58616f); }
.f1d-lt-crit .f1d-dot { color: var(--st-crit, #d23a2e); }
.f1d-lt-warn .f1d-dot { color: var(--st-warn, #d9a000); }
.f1d-lt-ok .f1d-dot { color: var(--st-ok, #2a9d6f); }
.f1d-lt-muted { color: var(--pro-text2, #58616f); }
.f1d-detail-c { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12px; }
.f1d-pin { width: 26px; height: 22px; display: inline-block; vertical-align: middle; margin: -2px 4px -2px -4px; flex: none; }
.f1d-detail-c .f1d-pin { margin: 0; }

/* timeline (folded 150 px when open) */
.f1d-timeline { background: var(--pro-panel, #fff); border: 1px solid var(--pro-line, #e5e8ee); border-radius: 10px; padding: 6px 10px; }
.f1d-tl-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.f1d-tl-h h3 { margin: 0; font-size: 14px; }
.f1d-fold { all: unset; cursor: pointer; width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--pro-line, #e5e8ee); border-radius: 50%; font-size: 10px; }
.f1d-marker { font-size: 11.5px; color: var(--pro-text2, #58616f); }
.f1d-tl { position: relative; max-height: 150px; overflow: hidden; margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.f1d-tl-r { display: grid; grid-template-columns: 160px 1fr; align-items: center; font-size: 11.5px; }
.f1d-tl-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f1d-tl-track { position: relative; height: 12px; background: var(--pro-soft, #f7f8fa); border-radius: 3px; }
.f1d-tl-track i { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; background: var(--fam-day, #86ABD6); }
.f1d-tl-track b { position: absolute; top: -3px; font-size: 11px; color: var(--st-crit, #d23a2e); transform: translateX(-50%); }
.f1d-tl-now { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed var(--st-crit, #d23a2e); }
.f1d-tl-now em { position: absolute; top: -1px; left: 3px; font-style: normal; font-size: 10px; color: var(--st-crit, #d23a2e); }

/* chat drawer: hidden by default, a tab on the right edge */
.f1d-drawer-tab { all: unset; cursor: pointer; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 22px; padding: 12px 0; z-index: 6;
  writing-mode: vertical-rl; text-orientation: mixed; font-size: 12px; font-weight: 600; text-align: center; color: var(--pro-text2, #58616f);
  background: var(--pro-panel, #fff); border: 1px solid var(--pro-line, #e5e8ee); border-right: 0; border-radius: 8px 0 0 8px; }
.f1d-drawer-tab.f1-cue { color: var(--pro-accent, #5267d8); background: var(--pro-focus, #edf1ff); outline: 2.5px solid var(--pro-accent, #5267d8); }
.f1d-drawer { position: absolute; top: 50px; right: 0; bottom: 0; width: 380px; z-index: 7; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; overflow-y: auto;
  background: var(--pro-panel, #fff); border-left: 1px solid var(--pro-line, #e5e8ee); box-shadow: -8px 0 24px rgba(20,30,40,.12);
  transform: translateX(105%); visibility: hidden; transition: transform 240ms ease-out, visibility 0s linear 240ms; }
.f1d-drawer-open .f1d-drawer { transform: translateX(0); visibility: visible; transition: transform 240ms ease-out, visibility 0s; }
.f1d-drawer-open .f1d-drawer-tab { right: 380px; }
.f1d-dh { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.f1d-x { all: unset; cursor: pointer; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; }
.f1d-dhead { margin: 0; font-size: 12.5px; color: var(--pro-text2, #58616f); }
.f1d-dsec h4, .f1d-dsec summary { margin: 0 0 4px; font-size: 13px; font-weight: 700; cursor: default; }
.f1d-dsec ul { margin: 0; padding: 0; list-style: none; font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
.f1d-msgs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.f1d-msgs li { display: flex; gap: 8px; font-size: 12.5px; }
.f1d-msgs p { margin: 2px 0 0; padding: 6px 9px; border-radius: 10px; background: var(--pro-soft, #f7f8fa); border: 1px solid var(--pro-line, #e5e8ee); }
.f1d-msgs time { font-size: 11px; color: var(--pro-text2, #58616f); }
.f1d-av { width: 22px; height: 22px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--fam-work, #22508F); margin-right: 4px; }
.f1d-people li { display: flex; align-items: center; }
.f1d-compose { display: flex; gap: 6px; align-items: flex-end; margin-top: auto; }
.f1d-compose textarea { flex: 1; resize: none; font: inherit; font-size: 13px; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--pro-line, #e5e8ee); background: var(--pro-soft, #f7f8fa); color: var(--pro-ink, #202630); }
.f1d-compose.f1d-typing textarea { border-color: var(--pro-accent, #5267d8); }
.f1d-fixed { margin: 0; font-size: 12px; font-weight: 600; color: var(--pro-text2, #58616f); }
/* the drawer is the KSS chat app, WhatsApp's look (faz1/chat.css, chat-kit.js; the same as the phone) at 13 px */
.f1d-drawer.f1d-wa { padding: 0; gap: 0; overflow: hidden; font-size: 13px; background: var(--f1w-panel); color: var(--f1w-ink); }
.f1d-wa-head { flex: none; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 10px 0 4px; background: var(--f1w-bar); border-bottom: 1px solid var(--f1w-line); }
.f1d-wa-listhead { padding-left: 14px; }
.f1d-wa-title { flex: 1; font-size: 19px; font-weight: 700; }
.f1d-wa-back { all: unset; cursor: pointer; display: grid; place-items: center; width: 28px; height: 32px; color: var(--f1w-ink); }
.f1d-wa-back .f1w-i { width: 22px; height: 22px; }
.f1d-wa-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.f1d-wa-who b { font-size: 14px; font-weight: 650; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.f1d-wa-who small { font-size: 11.5px; color: var(--f1w-meta); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.f1d-wa .f1d-x { width: 28px; height: 28px; }
.f1d-wa-pin { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: flex; align-items: center; gap: 7px; padding: 6px 12px; font-size: 12px; background: var(--f1w-bar);
  border-bottom: 1px solid var(--f1w-line); color: var(--f1w-ink); }
.f1d-wa-pin span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.f1d-wa-pin b { color: var(--f1w-green-ink); font-weight: 650; }
.f1d-wa-wall { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.f1d-wa-wall > .f1w-thread { margin-top: auto; }
.f1d-wa-search { flex: none; display: flex; align-items: center; gap: 6px; margin: 10px 12px 0; height: 30px; padding: 0 9px; border-radius: 8px; background: var(--f1w-soft); color: var(--f1w-meta); }
.f1d-wa-search .f1w-i { width: 16px; height: 16px; }
.f1d-wa-chips { flex: none; display: flex; gap: 6px; padding: 8px 12px 4px; font-size: 12px; }
.f1d-wa-chips span { padding: 4px 11px; border-radius: 999px; background: var(--f1w-soft); color: var(--f1w-meta); }
.f1d-wa-chips .f1d-chip-on { background: var(--f1w-chip); color: var(--f1w-chip-ink); font-weight: 600; }
.f1d-wa-list { flex: 1; min-height: 0; overflow-y: auto; }
.f1d-wa-list .f1w-av { --f1w-av: 3.2em !important; }
.f1d-wa-compose { flex: none; display: flex; gap: 8px; align-items: flex-end; margin: 0; padding: 7px 10px 9px; background: var(--f1w-bar); }
.f1d-wa-compose textarea { flex: 1; resize: none; font: inherit; font-size: 13px; min-height: 34px; padding: 7px 12px; box-sizing: border-box; border-radius: 17px; border: 1px solid var(--f1w-line); background: var(--f1w-panel); color: var(--f1w-ink); }
.f1d-wa-compose.f1d-typing textarea { border-color: var(--f1w-green); }
.f1d-wa-send { all: unset; cursor: pointer; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--f1w-green-ink); color: #fff; }
.f1d-wa-send .f1w-i { width: 17px; height: 17px; }
.f1d-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.f1d-wa-still { align-items: center; }
.f1d-wa-in { flex: 1; min-height: 32px; display: flex; align-items: center; padding: 0 12px; border-radius: 16px; background: var(--f1w-panel); border: 1px solid var(--f1w-line); color: var(--f1w-meta); }
.f1d-wa-still > .f1w-i { width: 20px; height: 20px; color: var(--f1w-meta); }
/* the KSS Asistan search conversation (story ui.chat or the composer by hand) */
.f1d-convo { flex: none; display: flex; flex-direction: column; gap: 4px; }
.f1d-convo[hidden] { display: none; }
.f1d-ex { display: flex; flex-direction: column; gap: 2px; }
.f1d-reslist { margin: 2px 0 4px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; max-width: 86%; }
.f1d-res { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; border-radius: 8px;
  background: var(--f1w-in); box-shadow: var(--f1w-shadow); font-size: 12.5px; color: var(--f1w-green-ink); }
.f1d-res:hover, .f1d-res:focus-visible, .f1d-res.f1d-on { outline: 2px solid var(--f1w-green); outline-offset: -2px; }
.f1d-res-k { flex: none; min-width: 38px; font-size: 10.5px; font-weight: 600; color: var(--f1w-meta); }
.f1d-res-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

/* medium (host 900-1500 px, e.g. split): the Kapsam column folds away, the right column narrows */
.f1d-medium .f1d-body { grid-template-columns: 40px 0 minmax(0, 1fr) 280px; gap: 8px; }
.f1d-medium .f1d-body.f1d-wide-right { grid-template-columns: 40px 0 minmax(0, 1fr) minmax(280px, 42%); }
.f1d-medium .f1d-left { visibility: hidden; padding: 0; }
.f1d-medium .f1d-crumbs, .f1d-medium .f1d-search { display: none; }

/* narrow (host under 900 px) and embedded */
.f1d-narrow .f1d-top { height: auto; flex-wrap: wrap; row-gap: 4px; padding: 6px 10px; }
.f1d-mid-narrow { flex: 1; padding: 10px 26px 10px 10px; }
.f1d-embedded { height: auto; padding: 10px; gap: 10px; display: flex; }
.f1d-embed { height: 100%; overflow: auto; }

/* faz1.css sets "#f1-app button { font: inherit; color: inherit }", which outranks any class selector.
   These lines restate the pano's button text so it looks the same inside and outside #f1-app. */
.f1d-dens button { font-size: 12px !important; color: var(--pro-text2, #58616f) !important; }
.f1d-dens button.f1d-on { color: var(--pro-accent, #5267d8) !important; font-weight: 600 !important; }
.f1d-ri { color: var(--pro-text2, #58616f) !important; }
.f1d-ri.f1d-on { color: var(--pro-accent, #5267d8) !important; }
.f1d-node { font-size: 12.5px !important; color: var(--pro-ink, #202630) !important; }
.f1d-node.f1d-on { color: var(--pro-accent, #5267d8) !important; }
.f1d-mini { font-size: 11.5px !important; color: var(--pro-text2, #58616f) !important; }
.f1d-filter { font-size: 12px !important; color: var(--pro-ink, #202630) !important; }
.f1d-filter.f1d-on { color: var(--pro-bg, #fff) !important; }
.f1d-act { font-size: 12px !important; font-weight: 600 !important; color: var(--pro-ink, #202630) !important; }
.f1d-act.f1d-primary { color: #fff !important; }
.f1d-drawer-tab { font-size: 12px !important; font-weight: 600 !important; color: var(--pro-text2, #58616f) !important; }
.f1d-drawer-tab.f1-cue { color: var(--pro-accent, #5267d8) !important; }
.f1d-fold, .f1d-x { font-size: 12px !important; color: var(--pro-ink, #202630) !important; }
.f1d-compose .f1d-act.f1d-primary { color: var(--pro-bg, #fff) !important; }
.f1d-res { font-size: 12.5px !important; color: var(--f1w-green-ink) !important; }
.f1d-res-k { font-size: 10.5px !important; color: var(--f1w-meta) !important; }
.f1d-wa-back, .f1d-wa-pin { color: var(--f1w-ink) !important; }
.f1d-wa-pin { font-size: 12px !important; }
.f1d-wa-send { color: #fff !important; }
.f1d-wa .f1w-row { font-size: 13px !important; }