/* TFORMer Designer for the product hero (Pages/Shared/Sections/HeroApps/_DesignerWindow.cshtml): Windows title bar,
   ribbon, document tabs, rulers, the label on the design grid and the Design / Properties panes, laid out like the
   real application. Builds on app-window.css (frame, keyframes); loaded only by the partial. No Tailwind, no site
   tokens. Colours sampled from the application. */

.tec-appwin--designer {
  --tf-blue: #234088;            /* title bar and tab strip */
  --tf-ribbon: #f0f0f0;
  --tf-line: #d5d5d5;
  --tf-text: #262626;
  --tf-muted: #6d6d6d;
  --tf-pane-title: #4f6e9c;
  --tf-band: #c3e3ff;

  border-radius: 0;
  background: var(--tf-ribbon);
  color: var(--tf-text);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 11px;
}
.tec-appwin--designer i { font-style: normal; }

/* ---- title bar and tab strip ---- */
.tec-appwin__tf-title { position: relative; flex: none; height: 28px; display: flex; align-items: center; padding: 0 8px; background: var(--tf-blue); color: #fff; }
.tec-appwin__tf-qat { display: flex; align-items: center; gap: 6px; }
.tec-appwin__tf-qat svg { width: 14px; height: 14px; }
.tec-appwin__tf-qat i { margin-left: -4px; font-size: 8px; opacity: .8; }
.tec-appwin__tf-doc { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11.5px; opacity: .92; }
.tec-appwin__tf-controls { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.tec-appwin__tf-controls svg { width: 11px; height: 11px; }

.tec-appwin__tf-tabs { flex: none; height: 24px; display: flex; align-items: flex-end; gap: 2px; padding: 0 4px; background: var(--tf-blue); }
.tec-appwin__tf-tab { padding: 4px 13px 5px; font-size: 11.5px; color: #fff; }
.tec-appwin__tf-tab.is-active { background: var(--tf-ribbon); color: var(--tf-blue); }
.tec-appwin__tf-help { display: grid; place-items: center; width: 15px; height: 15px; margin: 0 6px 5px auto; border-radius: 50%; background: #3b70c9; font-size: 10px; font-weight: 700; color: #fff; }

/* ---- ribbon: groups that do not fit wrap away (fixed height, overflow hidden) ---- */
.tec-appwin__tf-ribbon { flex: none; height: 82px; display: flex; flex-wrap: wrap; overflow: hidden; padding: 4px 2px 0; border-bottom: 1px solid var(--tf-line); }
.tec-appwin__tf-group { height: 78px; display: flex; flex-direction: column; padding: 0 7px; border-right: 1px solid #dadada; }
.tec-appwin__tf-items { flex: 1; display: flex; gap: 3px; align-items: flex-start; }
.tec-appwin__tf-gname { padding: 1px 0 3px; text-align: center; font-size: 10px; color: var(--tf-muted); white-space: nowrap; }
.tec-appwin__tf-big { display: flex; flex-direction: column; align-items: center; min-width: 38px; padding: 1px 3px; font-size: 10.5px; line-height: 1.15; text-align: center; white-space: nowrap; }
.tec-appwin__tf-big svg { width: 30px; height: 30px; margin-bottom: 2px; }
.tec-appwin__tf-big i { font-size: 7px; color: var(--tf-muted); }
.tec-appwin__tf-checks { padding-top: 1px; }
.tec-appwin__tf-checks li { position: relative; padding: 1px 0 3px 16px; font-size: 10.5px; white-space: nowrap; }
.tec-appwin__tf-checks li::before { content: ""; position: absolute; left: 1px; top: 2px; width: 10px; height: 10px; border: 1px solid #8a8a8a; background: #fff; }
.tec-appwin__tf-checks li.is-on::after { content: ""; position: absolute; left: 4px; top: 3px; width: 3px; height: 6px; border: solid #333; border-width: 0 1.4px 1.4px 0; transform: rotate(45deg); }
.tec-appwin__tf-small { display: flex; flex-direction: column; gap: 2px; }
.tec-appwin__tf-small li { display: flex; align-items: center; gap: 4px; padding: 1px 2px; font-size: 10.5px; white-space: nowrap; }
.tec-appwin__tf-small svg { width: 13px; height: 13px; flex: none; }
.tec-appwin__tf-small i { font-size: 7px; color: var(--tf-muted); }
.is-off, .tec-appwin__tf-group.is-off .tec-appwin__tf-small li, .tec-appwin__tf-small li.is-off { color: #a9a9a9; }
.tec-appwin__tf-rows { flex-direction: column; gap: 5px; }
.tec-appwin__tf-row { display: flex; align-items: center; gap: 3px; }
.tec-appwin__tf-combo { position: relative; display: inline-block; padding: 2px 16px 2px 4px; border: 1px solid #c6c6c6; background: #fff; font-size: 10.5px; white-space: nowrap; }
.tec-appwin__tf-combo::after { content: ""; position: absolute; right: 5px; top: 50%; border: 3px solid transparent; border-top: 4px solid #555; transform: translateY(-25%); }
.tec-appwin__tf-combo--font { width: 92px; }
.tec-appwin__tf-combo--size { width: 38px; }
.tec-appwin__tf-combo--general { width: 112px; }
.tec-appwin__tf-combo.is-off { width: 92px; color: #a9a9a9; }
.tec-appwin__tf-toggle { display: grid; place-items: center; width: 18px; height: 18px; font-size: 12px; }
.tec-appwin__tf-toggle.is-on { border: 1px solid #9cb9e3; background: #dce8f8; }
.tec-appwin__tf-glyphs { gap: 2px; color: var(--tf-muted); }
.tec-appwin__tf-glyphs svg { width: 13px; height: 13px; }
.tec-appwin__tf-glyphs i { margin-right: 4px; font-size: 7px; }
.tec-appwin__tf-ab { font-size: 11px; color: #333; }
.tec-appwin__tf-a { font-size: 12px; text-decoration: underline 2px #222; color: #333; }
.tec-appwin__tf-num { font-size: 12px; color: #333; }
.tec-appwin__tf-num--small { margin-left: 6px; font-size: 7.5px; line-height: 1; color: #2f6bc6; }
.tec-appwin__tf-layers { gap: 6px; }

/* ---- body: editor (tabs, rulers, canvas) and panes ---- */
.tec-appwin__tf-body { flex: 1; min-height: 0; display: flex; }
.tec-appwin__tf-editor { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fbfbfb; }
.tec-appwin__tf-doctabs { flex: none; height: 22px; display: flex; align-items: stretch; border-bottom: 1px solid var(--tf-line); background: #fbfbfb; white-space: nowrap; overflow: hidden; }
.tec-appwin__tf-doctab { display: flex; align-items: center; gap: 5px; padding: 0 12px 0 8px; border-right: 1px solid #b9c7da; font-size: 10.5px; }
.tec-appwin__tf-doctab svg { width: 11px; height: 11px; flex: none; }
.tec-appwin__tf-doctab i { margin-left: 6px; font-size: 10px; color: #444; }
.tec-appwin__tf-doctab.is-active { border-top: 2px solid #3b70c9; background: #ebf3f8; }

.tec-appwin__tf-workspace { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #e9e9e9; }
.tec-appwin__tf-hruler { flex: none; height: 17px; display: flex; border-bottom: 1px solid #c8c8c8; background: #edf2f8; }
.tec-appwin__tf-corner { flex: none; width: 17px; border-right: 1px solid #c8c8c8; background: #fff; }
.tec-appwin__tf-scale { position: relative; flex: none; width: calc(100% - 17px - 16px); margin-left: 8px;
  background: radial-gradient(circle, #8a8a8a 0.6px, transparent 1px) 0 50% / calc(100% / 29.6) 4px repeat-x; }
.tec-appwin__tf-scale span, .tec-appwin__tf-vruler span { position: absolute; font-size: 9.5px; color: #333; background: #edf2f8; padding: 0 1px; }
.tec-appwin__tf-scale span { top: 1px; transform: translateX(-50%); }

.tec-appwin__tf-canvas { flex: 1; min-height: 0; padding-right: 8px; }
.tec-appwin__tf-band { display: flex; align-items: center; gap: 8px; height: 18px; margin-left: 17px; padding-left: 6px; background: var(--tf-band); font-size: 10.5px; color: #333; }
.tec-appwin__tf-band u { color: #2f6bc6; text-decoration: underline; }
.tec-appwin__tf-band-icons { font-size: 11px; color: #555; }
.tec-appwin__tf-pagerow { display: flex; }
.tec-appwin__tf-vruler { position: relative; flex: none; width: 17px; border-right: 1px solid #c8c8c8; background: #edf2f8; }
.tec-appwin__tf-vruler span { left: 3px; transform: translateY(-50%); }
.tec-appwin__tf-paper {
  position: relative;
  flex: none;
  width: calc(100% - 17px - 16px);
  margin: 6px 0 0 8px;
  background: radial-gradient(circle, #b9b9b9 0.55px, transparent 0.9px) 0 0 / calc(100% / 74) calc(100% / 52.5), #f7f7f7;
}
.tec-appwin__tf-paper img { display: block; width: 100%; height: 100%; }
.tec-appwin__tf-selection { position: absolute; border: 1px dashed #2f6bc6; }
.tec-appwin__tf-selection i { position: absolute; width: 5px; height: 5px; border: 1px solid #2f6bc6; background: #fff; }
.tec-appwin__tf-selection i:nth-child(1) { left: -3px; top: -3px; }
.tec-appwin__tf-selection i:nth-child(2) { right: -3px; top: -3px; }
.tec-appwin__tf-selection i:nth-child(3) { left: -3px; bottom: -3px; }
.tec-appwin__tf-selection i:nth-child(4) { right: -3px; bottom: -3px; }

.tec-appwin__tf-panes { flex: none; width: 26%; min-width: 170px; max-width: 215px; display: flex; flex-direction: column; border-left: 1px solid #c8c8c8; background: var(--tf-ribbon); }
.tec-appwin__tf-pane { min-height: 0; overflow: hidden; background: #fff; }
.tec-appwin__tf-pane-title { position: relative; padding: 5px 8px 3px; background: var(--tf-ribbon); font-size: 15px; color: var(--tf-pane-title); }
.tec-appwin__tf-pane-title i { position: absolute; right: 8px; top: 9px; width: 4px; height: 8px; border: 1px solid #555; border-radius: 1px; }
.tec-appwin__tf-filter { padding: 2px 6px 3px; border-bottom: 1px solid var(--tf-line); background: var(--tf-ribbon); font-size: 9.5px; color: var(--tf-muted); }
.tec-appwin__tf-tree { padding: 4px 4px 6px; }
.tec-appwin__tf-tree li { display: flex; align-items: center; gap: 4px; padding: 1px 0; font-size: 10.5px; white-space: nowrap; color: #333; }
.tec-appwin__tf-tree b { width: 10px; font-weight: 400; font-size: 10px; color: #555; }
.tec-appwin__tf-tree svg { width: 12px; height: 12px; flex: none; }
.tec-appwin__tf-root { padding: 0 2px; background: #dfe8f6; }
.tec-appwin__tf-l1 { padding-left: 14px !important; }
.tec-appwin__tf-l2 { padding-left: 42px !important; }
.tec-appwin__tf-props { flex: 1; margin-top: 4px; }
.tec-appwin__tf-ptabs { display: flex; gap: 2px; padding: 2px 4px; background: var(--tf-ribbon); font-size: 10.5px; }
.tec-appwin__tf-ptabs span { padding: 2px 5px; color: #333; }
.tec-appwin__tf-ptabs .is-on { background: #dce8f8; color: var(--tf-pane-title); }
.tec-appwin__tf-prow { display: flex; padding: 3px 4px 3px 18px; border-bottom: 1px solid #ececec; font-size: 10.5px; }
.tec-appwin__tf-prow span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #444; }
.tec-appwin__tf-pgroup { display: flex; align-items: center; gap: 6px; padding: 3px 4px; font-size: 10.5px; font-weight: 700; color: #2f5596; }
.tec-appwin__tf-pgroup b { font-weight: 400; color: #555; }

/* ---- narrow windows: no panes ---- */
@container (max-width: 560px) {
  .tec-appwin__tf-panes, .tec-appwin__tf-doc { display: none; }
  .tec-appwin__tf-qat svg:nth-of-type(n+5), .tec-appwin__tf-qat i { display: none; }
}

/* ---- animation: the label appears on the grid, then a field is selected ---- */
.tec-appwin__tf-paper img { animation: tec-appwin-show .6s ease-out calc(var(--aw-start) - .2s) both; }
.tec-appwin__tf-selection { animation: tec-appwin-show .25s ease-out calc(var(--aw-start) + .9s) both; }