/* Screen layout: app bar, views, editor (phone, tablet, computer) and the preview.
   Phone and tablet: one screen at a time; the preview opens over the form.
   Computer (981px and wider, the same breakpoint as A.mq.desktop): form panel on the left, live pages on the right. */
@media screen{
  /* ---- App bar ---- */
  .appbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--s1);min-height:var(--appbar-h);padding:env(safe-area-inset-top) var(--s1) 0 var(--s4);background:var(--surface);border-bottom:1px solid var(--divider)}
  .brand{font-weight:700;letter-spacing:.08em;font-size:var(--fs-16);color:var(--ink);flex:none}
  .brand::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--accent);vertical-align:middle;position:relative;top:-1px}
  .ctx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .ctx-title{font-size:var(--fs-16);font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ctx-sub{display:flex;align-items:center;gap:var(--s2);min-width:0}
  .ctx-place{font-size:var(--fs-12);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .appbar-actions{margin-left:auto;display:flex;align-items:center;gap:var(--s1);flex:none}
  body:not([data-view="editor"]) .only-editor{display:none!important}
  body[data-view="editor"] .appbar{padding-left:0}
  body[data-view="editor"] .brand{display:none}
  .desk-only{display:none!important}

  /* ---- Views: one visible at a time ---- */
  .app{display:block}
  .view,.form-panel,.doc-wrap{display:none}
  body[data-view="home"] #home,body[data-view="trash"] #trashView{display:block}
  body[data-view="editor"] #editor{display:block}
  .view-inner{max-width:var(--w-page);margin:0 auto;padding:var(--s5) var(--s4) calc(var(--s6) + env(safe-area-inset-bottom))}
  .view-title{margin:0;font-size:var(--fs-24);font-weight:700;line-height:1.2}
  .view-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
  .view-help{margin:var(--s2) 0 var(--s4);font-size:var(--fs-14);color:var(--text-2);line-height:1.5;max-width:44em}

  /* ---- Home ---- */
  .backup-line{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin:var(--s2) 0 0;font-size:var(--fs-14);color:var(--text-2);min-height:var(--control-sm)}
  .backup-line .i{width:var(--icon-md);height:var(--icon-md);color:var(--success-fg)}
  .backup-line[data-tone="warn"]{color:var(--warn-fg)}
  .backup-line[data-tone="warn"] .i{color:var(--warn-fg)}
  .backup-line .btn{margin-left:calc(-1 * var(--s1))}
  #resumeSlot:not(:empty){margin-top:var(--s4)}
  .resume{display:flex;flex-direction:column;gap:var(--s3);border-left:3px solid var(--accent)}
  .resume-text{display:flex;flex-direction:column;gap:4px;min-width:0}
  .resume-text p{margin:0}
  .resume-text .row-title{font-size:var(--fs-20);white-space:normal;overflow-wrap:anywhere}
  .resume-text .row-meta{white-space:normal}
  .resume-text .status{align-self:flex-start;margin-top:var(--s1)}
  .resume-kicker{font-size:var(--fs-12);font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:.04em}
  .home-actions{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s4)}
  .home-actions .btn{width:100%}
  .list-tools{display:flex;flex-direction:column;gap:var(--s3);margin:var(--s5) 0 var(--s3)}
  .search{position:relative}
  .search > .i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-2);pointer-events:none}
  .search input{padding-left:42px;-webkit-appearance:none;appearance:none}
  .trash .search{margin-bottom:var(--s3)}
  .filters{display:flex;flex-wrap:wrap;gap:var(--s2)}
  .filters:empty{display:none}
  .view .rows{margin:0 calc(-1 * var(--s4))}
  .rows:empty{display:none}
  .more-btn{width:100%;margin-top:var(--s2)}
  #installSlot:not(:empty){margin-top:var(--s5)}
  .list-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:var(--control-sm);margin:0 0 var(--s2)}
  .list-count{margin:0;font-size:var(--fs-14);color:var(--text-2)}
  .list-head .btn{margin-right:calc(-1 * var(--s2));color:var(--text-2)}
  .draft-line{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s1) var(--s2);margin:var(--s4) 0 0;font-size:var(--fs-14);color:var(--text-2)}
  .draft-line .btn{margin-left:calc(-1 * var(--s2))}

  /* ---- Editor (phone first) ---- */
  .stepper{position:sticky;top:calc(var(--appbar-h) + env(safe-area-inset-top));z-index:15;background:var(--surface);border-bottom:1px solid var(--divider)}
  .stepper ol{display:flex;list-style:none;margin:0 auto;padding:0 var(--s1);max-width:var(--w-form)}
  .stepper li{flex:1;min-width:0}
  .stepper button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;min-height:var(--stepper-h);padding:3px 2px;border:0;background:transparent;color:var(--text-2);font-size:var(--fs-12);font-weight:500;cursor:pointer}
  .st-glyph{position:relative;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--border-input);background:var(--surface);font-size:var(--fs-12);font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
  .st-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .stepper [data-state="current"]{color:var(--ink);font-weight:600}
  .stepper [data-state="current"] .st-glyph{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
  .stepper [data-state="current"]::after{content:"";position:absolute;left:20%;right:20%;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--ink)}
  .stepper [data-state="done"] .st-glyph{background:var(--success-bg);border-color:var(--success-bg);color:transparent}
  .stepper [data-state="done"] .st-glyph::before{content:"";position:absolute;inset:5px;background:var(--success-fg);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
  .stepper [data-state="warn"] .st-glyph{border-color:var(--warn-border);color:var(--warn-fg);background:var(--warn-bg)}
  .stepper .has-miss .st-glyph::after{content:"";position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--warn-fg);border:2px solid var(--surface)}

  .editor-scroll{padding:var(--s3) var(--s4) calc(var(--bottombar-h) + var(--s6) + env(safe-area-inset-bottom));container-type:inline-size}
  .editor-scroll > *{max-width:var(--w-form);margin-left:auto;margin-right:auto}
  .editor-alerts{display:flex;flex-direction:column;gap:var(--s2)}
  .editor-alerts:not(:empty){margin-bottom:var(--s4)}
  .step-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3);flex-wrap:wrap;margin:0 0 var(--s4)}
  .step-head h2{margin:0;font-size:var(--fs-20);font-weight:700;line-height:1.25;outline-offset:4px}
  .step-head h2:focus{outline:none;box-shadow:none} /* focused only so screen readers announce the new step */
  .step > .field,.step > .alert,.step > .grid{margin-bottom:var(--s4)}
  .step > .chips:not(:empty){margin-top:var(--s2)}
  .step > .add-row + .chips{margin-top:var(--s2)}
  .step > fieldset.group#guarantorGroup{margin-top:var(--s5)}
  #removeGuarantor{margin-top:var(--s3)}
  .out-group{margin-top:var(--s5)}

  /* Bottom bar: Önizle · Kaydet · İleri, above the safe area. */
  .editor-bar{position:fixed;left:0;right:0;bottom:0;z-index:18;display:flex;gap:var(--s2);padding:var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--divider);box-shadow:var(--e-bar)}
  .editor-bar .btn{flex:1 1 0;min-width:0;padding:0 var(--s2)}
  .editor-bar #nextBtn{flex-grow:1.3}
  #saveBtn{position:relative}
  /* Narrow bar: the green check alone confirms the save; the word stays for screen readers. */
  @media (max-width:419px){#saveBtn.is-done .save-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
  #saveBtn .dot{display:none;width:8px;height:8px;border-radius:50%;background:var(--warn-fg);flex:none}
  #saveBtn.has-dot .dot{display:inline-block}

  /* Field grid: two columns when the form column is wide enough (tablet, computer panel, phone in landscape). */
  @container (min-width:420px){
    .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .grid > .field.full{grid-column:1 / -1}
  }

  /* ---- Preview ---- */
  .pv-bar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s2);padding:calc(var(--s2) + env(safe-area-inset-top)) var(--s3) var(--s2);background:var(--surface);border-bottom:1px solid var(--divider)}
  .pv-title{flex:1;min-width:0;display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;font-size:var(--fs-14);font-weight:600}
  .pv-actions{display:flex;align-items:center;gap:var(--s2);flex:1 1 100%}
  .pv-actions .btn:not(.btn-sm){flex:1 1 0}
  .pv-fit{position:relative;overflow:hidden;padding:0}
  .pv-scale{transform-origin:0 0;padding:var(--s2) 0}
  .pv-mark{position:absolute;z-index:3;border:2px solid var(--accent);border-radius:4px;background:var(--mark-bg);pointer-events:none}
  .pv-strip{position:sticky;bottom:0;z-index:6;display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom)) var(--s4);background:var(--surface);border-top:1px solid var(--divider);box-shadow:var(--e-bar);font-size:var(--fs-14);font-weight:600}
  .pv-strip > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* Phone and tablet: the preview is its own full screen over the form. */
  html.preview-open,html.preview-open body{overflow:hidden}
  html.preview-open #preview{display:block;position:fixed;inset:0;z-index:40;height:100vh;height:100dvh;overflow:auto;overscroll-behavior:contain;background:var(--preview-bg);-webkit-overflow-scrolling:touch}
  html.preview-open .editor-bar{display:none}
  html.preview-open .pv-fit.is-actual{overflow-x:auto}
  html.preview-open .pv-bar{flex-wrap:nowrap;padding-top:calc(var(--s1) + env(safe-area-inset-top));padding-bottom:var(--s1);min-height:var(--appbar-h)}
  html.preview-open .pv-title > span:first-child{display:none}
  html.preview-open .pv-actions{position:fixed;left:0;right:0;bottom:0;z-index:7;padding:var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--divider);box-shadow:var(--e-bar)}
  html.preview-open #pvZoom{position:fixed;top:calc(var(--s2) + env(safe-area-inset-top));right:var(--s3);z-index:8}
  html.preview-open .pv-scale{padding-bottom:calc(var(--bottombar-h) + var(--s5) + env(safe-area-inset-bottom))}
  html.preview-open .pv-strip{position:fixed;left:0;right:0;bottom:calc(var(--bottombar-h) + env(safe-area-inset-bottom));z-index:7}
  html.preview-open .toast{bottom:calc(var(--bottombar-h) + var(--s3) + env(safe-area-inset-bottom));z-index:45}
}

/* Phone in landscape: little height, so only the app bar stays fixed at the top. */
@media screen and (max-height:500px) and (max-width:980px){
  .stepper{position:static}
}

/* Tablet: wider gutters, actions side by side. */
@media screen and (min-width:600px){
  .view-inner{padding-left:var(--s5);padding-right:var(--s5)}
  .view .rows{margin:0;border:1px solid var(--divider);border-radius:var(--r2);overflow:hidden}
  .home-actions{flex-direction:row}
  .home-actions .btn{width:auto}
  .resume{flex-direction:row;align-items:center;justify-content:space-between}
  .resume > .btn{flex:none}
  .list-tools{flex-direction:row;align-items:center;flex-wrap:wrap}
  .list-tools .search{flex:1 1 320px}
  .editor-scroll{padding-left:var(--s5);padding-right:var(--s5)}
  .editor-bar{justify-content:center}
  .editor-bar .btn{flex:0 1 200px}
  .editor-bar #nextBtn{flex:0 1 240px}
  .pv-actions{flex:0 1 auto}
  .pv-actions .btn:not(.btn-sm){flex:none}
  .more-btn{width:auto;display:flex;margin-left:auto;margin-right:auto}
}

/* Computer: form panel + live pages side by side; each side scrolls on its own. */
@media screen and (min-width:981px){
  .desk-only{display:revert!important}
  .btn.desk-only{display:inline-flex!important}
  .phone-only{display:none!important}
  body[data-view="editor"] .appbar{padding-left:var(--s1)}
  body[data-view="editor"]{overflow:hidden}
  body[data-view="editor"] .app{display:flex;height:calc(100vh - var(--appbar-h));height:calc(100dvh - var(--appbar-h))}
  body[data-view="editor"] #editor{display:flex;flex-direction:column;flex:none;width:var(--w-panel);min-height:0;background:var(--bg);border-right:1px solid var(--divider)}
  body[data-view="editor"] #preview{display:block;position:relative;flex:1;min-width:0;overflow:auto;background:var(--preview-bg)}
  .stepper{position:static;flex:none}
  .editor-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:var(--s5) var(--s5) var(--s6)}
  .editor-bar{position:static;flex:none;justify-content:flex-end;padding:var(--s3) var(--s5);box-shadow:none}
  .editor-bar .btn{flex:none;padding:0 var(--s4)}
  .editor-bar #nextBtn{flex:none}
  .editor-bar #prevBtn{margin-right:auto}
  .pv-bar{padding:var(--s2) var(--s4);flex-wrap:nowrap}
  .pv-actions{flex:none}
  .pv-scale{padding:var(--s5) 0}
  .pv-strip{padding-bottom:var(--s2)}
  .toast{z-index:45}
}
@media screen and (min-width:981px) and (pointer:fine){
  .appbar{min-height:var(--appbar-h)}
}