/* KNITFORM studio responsive improvements. Screen only: never affect print/PDF. */
.mobile-chart-mode,.mobile-chart-hint,.mobile-advanced-head,.mobile-palette-trigger,.mobile-sidebar-head,.mobile-sidebar-backdrop { display:none; }
@media screen and (max-width: 1090px) {
  .topbar,.studio-nav,.workspace,.main-content,.chart-toolbar,.chart-panel,.chart-scroll { min-width:0; }
  .studio-tab { min-height:44px; }
  .sidebar .panel,.panel { min-width:0; }
  .workflow-grid,.workflow-grid-refined,.bottom-grid { min-width:0; }
  body[data-studio-view="edit"] .main-content>.chart-panel { order:-1; }
  body[data-studio-view="edit"] .sidebar { display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; z-index:201; width:min(92vw,420px); height:100dvh; max-height:none; margin:0; padding:0 11px 18px; gap:10px; overflow-y:auto; overscroll-behavior:contain; background:#f8f7fb; box-shadow:14px 0 45px #1c173b30; transform:translateX(-105%); visibility:hidden; transition:transform .2s ease,visibility 0s linear .2s; }
  body[data-studio-view="edit"] .sidebar>.panel { width:100%; flex:0 0 auto; }
  body[data-studio-view="edit"].kf-tool-drawer-open .sidebar { transform:translateX(0); visibility:visible; transition:transform .2s ease,visibility 0s; }
  body.kf-focus.kf-tool-drawer-open .sidebar { display:flex!important; }
  body.kf-tool-drawer-open { overflow:hidden; }
  body.kf-tool-drawer-open .mobile-sidebar-backdrop { display:block; position:fixed; inset:0; z-index:200; background:#1c173b99; }
  body[data-studio-view="edit"] .mobile-sidebar-head { display:flex; position:sticky; top:0; z-index:1; align-items:center; justify-content:space-between; min-height:58px; padding:7px 5px; background:#f8f7fb; }
  .mobile-sidebar-head strong { font-size:15px; color:#302d3d; }
  .mobile-sidebar-head .btn { min-height:44px; }
  .chart-toolbar>.mobile-palette-trigger { display:inline-flex; min-height:42px; align-items:center; justify-content:center; }
}
@media screen and (max-width: 700px) {
  :root { -webkit-text-size-adjust:100%; }
  .topbar { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding:10px 12px; }
  .topbar .brand { grid-column:1; grid-row:1; min-width:0; }
  .topbar>.btn { grid-column:2; grid-row:1; min-height:42px; }
  .topbar .top-actions { grid-column:1 / -1; grid-row:2; width:100%; display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; justify-content:initial; gap:6px; min-width:0; }
  .topbar .top-actions .account-entry { font-size:11px; min-height:42px; white-space:nowrap; }
  .topbar .top-actions .save-indicator { margin:0; overflow:hidden; text-overflow:ellipsis; font-size:10px; }
  .topbar .top-actions #fileMenu { min-width:0; }
  .topbar .top-actions #fileMenu > summary { min-height:42px; }
  .topbar .top-actions #exportMdBtn { min-height:42px; }
  .kf-file-dropdown { position:absolute; left:auto; right:0; top:calc(100% + 6px); width:min(320px,calc(100vw - 24px)); max-height:min(70dvh,560px); overflow-y:auto; overscroll-behavior:contain; }
  .kf-file-dropdown .btn { min-height:44px; white-space:normal; text-align:left; }
  .studio-nav { padding:9px 0 0; display:block; }
  .studio-tabs { display:flex; flex-wrap:nowrap; width:100%; gap:5px; overflow-x:auto; overflow-y:hidden; padding:0 12px 9px; scroll-snap-type:x proximity; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
  .studio-tab { flex:0 0 auto; min-width:113px; min-height:44px; padding:10px 11px; scroll-snap-align:start; font-size:12px; }
  .studio-actions { display:flex; gap:7px; width:100%; justify-content:stretch; padding:0 12px 10px; flex-wrap:nowrap; }
  .studio-actions .btn { min-height:44px; min-width:0; padding:8px 8px; font-size:11px; white-space:normal; flex:1 1 0; }
  .studio-actions #toggleSettingsBtn { flex:1.65 1 0; }
  .workspace { padding:9px 10px 20px; }
  .sidebar,.main-content { min-width:0; }
  .sidebar .panel,.panel { padding:15px 13px; }
  .sidebar .palette-panel .palette { gap:7px; }
  .palette-panel .palette-entry { flex-basis:144px; }
  .palette-panel .palette-item { min-height:56px; }
  .palette-filters { gap:5px; }
  .filter-pill { min-height:36px; padding:7px 11px; }
  .chart-panel .panel-head { align-items:center; }
  .chart-panel { display:flex; flex-direction:column; }
  .chart-panel .section-eyebrow { display:none; }
  .chart-panel .panel-head .subline { display:none; }
  .chart-panel .panel-head .button-group { flex-wrap:nowrap; }
  .chart-panel .panel-head .button-group .btn { min-height:40px; }
  .chart-toolbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:10px; }
  .chart-toolbar .toolbar-active { grid-column:1 / -1; min-width:0; }
  .chart-toolbar>.mobile-palette-trigger { display:inline-flex; grid-row:2; grid-column:1; min-height:44px; align-items:center; justify-content:center; }
  .chart-toolbar>.mobile-chart-mode { grid-row:2; grid-column:2; }
  .chart-toolbar>.inline-select:not(.chart-tool-select) { grid-row:3; grid-column:1; }
  .chart-toolbar>.chart-tool-select { grid-row:3; grid-column:2; }
  .chart-toolbar>#addRowBtn { grid-row:4; grid-column:1; }
  .chart-toolbar>.kf-chart-advanced { grid-row:4; grid-column:2; }
  .chart-toolbar>.toolbar-divider { display:none; }
  .chart-toolbar>.inline-select { display:flex; flex-direction:column; align-items:stretch; white-space:normal; min-width:0; gap:4px; }
  .chart-toolbar>.inline-select select,.chart-toolbar #rangeMode { width:100%; max-width:none; min-width:0; min-height:42px; font-size:13px; padding:8px; }
  .chart-toolbar>button,.chart-toolbar>.kf-chart-advanced>summary { width:100%; min-height:44px; font-size:12px; }
  .chart-toolbar>.mobile-chart-mode { display:inline-flex; }
  .chart-toolbar>.kf-chart-advanced { position:static; min-width:0; }
  .mobile-chart-mode[aria-pressed="true"] { color:#fff; background:#735ba8; border-color:#735ba8; }
  .mobile-chart-hint { display:block; color:#786889; font-size:11px; line-height:1.6; margin:1px 1px 9px; background:#f8f6fd; padding:9px 11px; border-radius:9px; }
  .chart-panel .chart-foot { order:1; }
  .chart-panel .mobile-chart-hint { order:2; margin-top:9px; }
  .chart-panel .range-help { order:3; }
  body:not([data-mobile-chart-mode="paint"]) .stitch-cell { touch-action:pan-x pan-y; }
  body[data-mobile-chart-mode="paint"] .stitch-cell { touch-action:none; }
  .chart-scroll { overscroll-behavior-x:contain; overflow:auto; max-width:100%; max-height:min(60dvh,600px); min-height:130px; -webkit-overflow-scrolling:touch; scroll-behavior:auto; }
  .chart-row .row-number { position:sticky; left:0; z-index:2; box-shadow:3px 0 8px #27213b1c; }
  .chart-row .row-direction { position:sticky; left:83px; z-index:2; background:#fff; border-radius:4px; }
  body[data-studio-view="edit"] .stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  body[data-studio-view="edit"] .stats .stat { min-height:49px; padding:6px 10px; }
  .kf-chart-advanced[open] { z-index:90; }
  .kf-chart-advanced[open]::before { content:""; position:fixed; inset:0; z-index:110; background:#1c173b8c; }
  .kf-chart-advanced-controls { position:fixed; z-index:111; inset:auto 10px max(10px,env(safe-area-inset-bottom)) 10px; width:auto; max-width:none; max-height:min(76dvh,620px); overflow-y:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:15px; border-radius:17px; box-shadow:0 20px 80px #120c29a0; overscroll-behavior:contain; }
  .kf-chart-advanced-controls .inline-select { grid-column:1 / -1; flex-direction:column; align-items:stretch; gap:7px; white-space:normal; min-width:0; }
  .kf-chart-advanced-controls .inline-select select { width:100%; min-height:44px; }
  .kf-chart-advanced-controls>.btn { min-width:0; min-height:44px; white-space:normal; padding:8px 6px; }
  .mobile-advanced-head { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:4px; }
  .mobile-advanced-head strong { font-size:16px; }
  .mobile-advanced-head .btn { min-height:44px; }
  .field input,.field select,.field textarea,.inline-select select { font-size:16px; }
  .field-grid,.three-fields,.motif-repeat-grid { min-width:0; }
  .button-group { gap:7px; }
  .button-group>.btn { min-height:43px; white-space:normal; }
  .bottom-grid .panel-head { flex-wrap:wrap; }
  .row-panel .button-group>.btn { flex:1 1 135px; }
  .repeat-panel .three-fields { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .repeat-panel .three-fields .field input { min-width:0; }
  .repeat-drawer>summary { line-height:1.55; }
  .repeat-drawer>summary small { display:block; margin-left:0; }
  .progress-actions,.progress-actions-secondary,.progress-until-actions { min-width:0; }
  .progress-current { margin-bottom:8px; }
  .progress-actions { margin-bottom:10px; }
  .progress-actions>.btn { min-height:53px; min-width:0; }
  .progress-actions-secondary>.btn { min-height:44px; white-space:normal; }
  .progress-current,.progress-row-abbr,.progress-row-written-inline { overflow-wrap:anywhere; }
  .export-types { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .export-type { min-height:136px; padding:13px 10px; }
  .export-options { min-width:0; }
  .export-options .inline-select { white-space:normal; flex-wrap:wrap; }
  .export-actions { display:grid; grid-template-columns:1fr; gap:8px; }
  .export-actions>.btn { width:100%; min-height:45px; white-space:normal; }
  .export-preview { min-width:0; overflow-x:auto; }
  .dictionary-grid { grid-template-columns:minmax(0,1fr); }
  .reference-card { min-width:0; }
  .kf-shortcut-dialog,.cloud-dialog { width:calc(100vw - 24px); max-width:calc(100vw - 24px); max-height:calc(100dvh - 30px); overflow:auto; }
  .kf-shortcut-dialog { padding:15px; }
  .cloud-dialog-head h2 { font-size:18px; }
  .toast { max-width:calc(100vw - 28px); width:max-content; text-align:center; bottom:max(16px,env(safe-area-inset-bottom)); }
  .footer { overflow-wrap:anywhere; }
}
@media screen and (max-width: 340px) {
  .topbar .top-actions { grid-template-columns:auto minmax(0,1fr) auto; }
  .topbar .top-actions #exportMdBtn { grid-column:1 / -1; }
  .chart-toolbar { gap:6px; }
  .chart-toolbar>.inline-select { font-size:11px; }
  .field-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .settings-panel .field-grid:has(#knitCastOnMethod),.repeat-panel .field-grid { grid-template-columns:1fr; }
  .three-fields { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .three-fields .field>span { font-size:10px; }
  .panel-head h2 { font-size:17px; }
  .progress-display-actions { gap:8px; }
  .progress-view-select select { max-width:137px; }
  .progress-panel .section-eyebrow { display:none; }
  .progress-panel .progress-hero { margin-top:10px; padding-top:12px; padding-bottom:10px; }
  .progress-panel .progress-current { padding-top:12px; padding-bottom:10px; }
}
@media screen and (prefers-reduced-motion:reduce) { .studio-tabs,.chart-scroll { scroll-behavior:auto; } }

/* Keep the working controls legible during long editing sessions. */
@media screen {
  .section-eyebrow { font-size:10px; color:#67538e; }
  .panel-head p,.subline { font-size:12.5px; color:#625d70; }
  .tiny,.field-footnote,.sidebar-help { font-size:12px; line-height:1.65; color:#625d70; }
  .field > span { font-size:12px; }
  .field small { font-size:11px; color:#6b6577; }
  .toolbar-active strong { font-size:13px; }
  .toolbar-active small { font-size:11.5px; color:#665f75; }
  .palette-item .name { font-size:12px; }
  .palette-item small { font-size:10.5px; color:#6f697a; }
  .filter-pill { min-height:36px; font-size:11px; }
  body[data-studio-view="edit"] .stats .stat span { font-size:12px; color:#625d70; }
  .studio-tab,.studio-actions .btn { min-height:40px; }
  .progress-completed-label,.progress-row-count { font-size:12px; color:#675f72; }
  .progress-current #progressRowMeta,.progress-token-toggle { font-size:12px; }
  .progress-details summary,.progress-details .progress-row-written { font-size:13px; }
}
@media screen and (min-width:1091px) {
  body[data-studio-view="edit"]:not(.kf-focus) .sidebar .palette-panel .palette {
    max-height:none;
    overflow:visible;
  }
}
@media screen and (max-width:1090px) {
  body[data-studio-view="edit"] .main-content>.chart-panel { order:-2; }
  body[data-studio-view="edit"] .main-content>.bottom-grid { order:-1; }
}
@media screen and (max-width:700px) {
  .chart-toolbar>.inline-select { flex-direction:row; align-items:center; font-size:12px; }
  .chart-toolbar>.inline-select select { flex:1; width:auto; font-size:14px; }
  .mobile-chart-hint { font-size:12px; }
  .chart-panel .panel-head .button-group .btn { min-height:44px; }
}
@media screen and (max-width:340px) {
  .topbar .top-actions { grid-template-columns:auto minmax(0,1fr) auto auto; }
  .topbar .top-actions #exportMdBtn { grid-column:auto; padding-inline:6px; font-size:10px; }
  .topbar .top-actions #fileMenu > summary { padding-inline:6px; font-size:10px; }
}

/* The editor uses the same quiet surfaces and type hierarchy as the public site. */
@media screen {
  :root {
    --kf-ui-line:#e5dfe9;
    --kf-ui-ink:#302b3c;
    --kf-ui-muted:#625b70;
    --kf-ui-surface:#fffefd;
    --kf-ui-card-radius:18px;
    --kf-ui-control-radius:11px;
    --kf-ui-shadow:0 10px 30px rgba(47,40,66,.065);
  }
  .panel { border-color:var(--kf-ui-line); box-shadow:var(--kf-ui-shadow); }
  .panel-head h2 { font-size:19px; line-height:1.35; }
  .panel-head p,.subline { font-size:13px; }
  .btn { font-size:13px; border-radius:var(--kf-ui-control-radius); }
  .btn-sm { font-size:12px; }
  .chart-toolbar { border-color:var(--kf-ui-line); background:#f8f7fb; }
  .toolbar-active strong { font-size:14px; }
  .palette-item .name { font-size:13px; }
  .palette-item small { font-size:11px; }
  .row-summary,.validation-box { font-size:13px; line-height:1.7; }
  .dsl-input { font-size:14px; }
  .progress-current { border-color:var(--kf-ui-line); }
  .progress-row-abbr .stitch-token { font-size:15px; line-height:1.4; }
  .progress-row-count { font-size:13px; }
  .progress-view-select,.progress-view-select select { font-size:13px; }
  .export-type { min-height:150px; border-color:var(--kf-ui-line); }
  .export-type strong { font-size:15px; }
  .export-type small { font-size:13px; color:var(--kf-ui-muted); }
  .export-badge,.preview-meta,.export-preview-head span { font-size:12px; }
  .preview-line,.preview-line b,.preview-foot,.export-tip { font-size:13px; }
  .export-type:has(input:focus-visible) { outline:3px solid #795fb1; outline-offset:3px; }
}
@media screen and (hover:hover) and (pointer:fine) {
  .btn:not(.btn-danger-link):hover:not(:disabled) { transform:translateY(-1px); }
  .btn:not(.btn-danger-link):active:not(:disabled) { transform:translateY(0) scale(.99); }
}
@media screen and (min-width:701px) and (max-width:900px) {
  .chart-toolbar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
  .chart-toolbar>.toolbar-active { grid-area:1 / 1 / 2 / 3; min-width:0; }
  .chart-toolbar>.mobile-palette-trigger { grid-area:1 / 3; }
  .chart-toolbar>#addRowBtn { grid-area:1 / 4; }
  .chart-toolbar>.inline-select:not(.chart-tool-select) { grid-area:2 / 1; min-width:0; }
  .chart-toolbar>.chart-tool-select { grid-area:2 / 2 / 3 / 4; min-width:0; }
  .chart-toolbar>.kf-chart-advanced { grid-area:2 / 4; width:100%; }
  .chart-toolbar>.kf-chart-advanced>summary { width:100%; }
  .chart-toolbar>.toolbar-divider { display:none; }
}
@media screen and (max-width:700px) {
  .panel-head h2 { font-size:18px; }
  .export-type { min-height:150px; }
}
@media screen and (prefers-reduced-motion:reduce) {
  .btn { transition:none; }
  .btn:not(.btn-danger-link):hover:not(:disabled),
  .btn:not(.btn-danger-link):active:not(:disabled) { transform:none; }
}