/* SakinLab tools — shared UI components (load after /assets/tool-base.css).
   Every tool loads /assets/core.css, then this file, then its own local styles.
   Components: tokens (light/dark), base, app header, panels, sections with a left
   icon gutter, fields, inputs, buttons, icon buttons, toggles, segmented controls,
   switches, chips, popovers, hints, toasts, and the canvas stage.
   Rules: general design guidelines (kept outside the repo), docs/uygulama-devir.md. */

  *{box-sizing:border-box;}
  html, body{height:100%;}
  body{
    margin:0;
    font-family:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
    font-size:12px;
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    padding:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    overflow-x:auto;
  }
  button, input, textarea{font-family:inherit; color:inherit;}
  ::selection{background:var(--accent); color:#fff;}

  /* ---------- TOOLBAR ---------- */
  /* App header: SakinLab mark, app glyph + name + version, one-line description, settings */
  .page-header{
    flex-shrink:0; height:44px; min-height:44px; width:100%;
    display:flex; align-items:center; gap:10px;
    background:var(--panel); border-bottom:1px solid var(--border-strong);
    padding:0 12px 0 16px;
  }
  .app-title{display:flex; align-items:center; gap:8px; height:28px; font-weight:600; font-size:12.5px; line-height:1; white-space:nowrap;}
  .app-title > span{display:block; position:relative; top:1px;}   /* optical: caps sit on the icon's center line */
  .app-title svg{display:block; width:16px; height:16px; color:var(--text); flex-shrink:0;}
  .header-end{margin-left:auto; display:flex; align-items:center; flex-shrink:0;}
  .page-header .settings{font-size:11px;}
  .page-header .settings button{height:26px; min-width:26px;}
  .tb-divider{width:1px; height:16px; background:var(--border-strong); flex-shrink:0;}
  .sub{color:var(--muted); font-size:11px; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

  .layout{
    display:flex;
    flex:1;
    min-height:0;
    width:100%;
  }
  .panel{
    width:300px;
    min-width:300px;
    background:var(--panel);
    border-right:1px solid var(--border-strong);
    overflow-y:auto;
    overflow-x:hidden;
  }
  .panel::-webkit-scrollbar{width:10px;}
  .panel::-webkit-scrollbar-track{background:transparent;}
  .panel::-webkit-scrollbar-thumb{background:var(--scroll-thumb); border-radius:6px; border:2px solid transparent; background-clip:content-box;}
  .panel::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover); background-clip:content-box;}

  .sec{
    border-bottom:1px solid var(--border);
    padding:12px 14px 12px 24px;
  }
  .sec-title{
    font-size:10.5px;
    font-weight:600;
    color:var(--muted);
    letter-spacing:.15px;
    margin:0 0 9px 0;
    display:flex;
    align-items:center;
    gap:7px;
  }
  .sec-title-row{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px;}
  .sec-title-row .sec-title{margin-bottom:0;}
  .sec-icon{width:13px; height:13px; stroke:var(--muted); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; margin-left:-16px;}
  .sec-title .badge{
    color:var(--text-muted);
    font-size:9.5px;
    font-weight:500;
  }

  .field{margin-bottom:8px; flex:1; min-width:0;}
  .field:last-child{margin-bottom:0;}
  label{
    display:block;
    font-size:10px;
    font-weight:500;
    color:var(--muted);
    margin-bottom:4px;
  }
  input[type="text"], textarea{
    width:100%;
    background:var(--bg-input);
    border:1px solid var(--border-strong);
    border-radius:var(--radius);
    color:var(--text);
    padding:0 8px;
    height:26px;
    font-size:11.5px;
    font-family:inherit;
  }
  input[type="text"]{resize:none;}
  textarea{
    height:auto; padding:6px 8px; line-height:1.5;
    resize:none; /* replaced by a custom grip below — the native one can't be recolored/restyled */
  }
  textarea::-webkit-scrollbar{width:10px; height:10px;}
  textarea::-webkit-scrollbar-track{background:transparent;}
  textarea::-webkit-scrollbar-thumb{background:var(--scroll-thumb); border-radius:6px; border:2.5px solid var(--bg-input); background-clip:padding-box;}
  textarea::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover);}
  textarea{scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) transparent;}
  .resizable-wrap{position:relative;}
  .resizable-wrap textarea{display:block; width:100%;}
  .resize-grip{
    position:absolute; right:3px; bottom:3px; width:7px; height:7px;
    cursor:ns-resize; z-index:2;
    background-image:
      linear-gradient(135deg, transparent 0 40%, var(--muted) 40% 60%, transparent 60% 100%),
      linear-gradient(135deg, transparent 0 70%, var(--muted) 70% 90%, transparent 90% 100%);
    opacity:.5;
  }
  .resize-grip:hover{opacity:.85;}
  input[type="text"]:focus, textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent);}
  .icon-toggle-btn{
    flex-shrink:0; width:26px; height:26px; border:1px solid var(--border-strong); border-radius:var(--radius);
    background:var(--bg-input); color:var(--muted); font-weight:700; font-size:12px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; padding:0;
  }
  .icon-toggle-btn.active{background:var(--accent); border-color:var(--accent); color:#fff;}
  .icon-toggle-btn:hover:not(.active){border-color:var(--accent); color:var(--accent);}

  .slider-row{display:flex; align-items:center; gap:6px; min-width:0;}
  .scrub-input{
    width:100%; height:26px; border:1px solid var(--border-strong); background:var(--bg-input);
    border-radius:var(--radius); padding:0 8px; font-size:11.5px; color:var(--text);
    text-align:right; cursor:ew-resize; outline:none; font-family:inherit;
  }
  .scrub-input:focus{cursor:text; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); background:var(--bg-selected);}
  .scrub-input.small{flex:1; height:20px; font-size:10px; padding:0 6px;}

  .btn{
    width:100%;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    background:var(--accent);
    color:#fff; border:1px solid var(--accent); border-radius:var(--radius);
    height:28px; padding:0 14px; font-size:11.5px; font-weight:500;
    cursor:pointer; white-space:nowrap;
  }
  .btn:hover{background:var(--accent-hover); border-color:var(--accent-hover);}
  .btn:active{filter:brightness(.95);}
  .btn.secondary{
    background:var(--bg-input);
    border:1px solid var(--border-strong);
    color:var(--text);
    font-weight:400;
  }
  .btn.secondary:hover{background:var(--bg-hover);}
  .btn-quiet{
    display:block; width:100%; text-align:center; background:transparent; border:none;
    color:var(--muted); font-size:10.5px; padding:7px 0 0; cursor:pointer;
  }
  .btn-quiet:hover{color:var(--accent); text-decoration:underline;}
  .hint{font-size:10.5px; color:var(--muted); margin-top:5px; line-height:1.5;}

  .icon-btn{
    width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
    border:none; background:transparent; border-radius:var(--radius); cursor:pointer; color:var(--muted);
    flex-shrink:0; padding:0;
  }
  .icon-btn:hover{background:var(--bg-hover); color:var(--text);}
  .icon-btn svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}

  .preset-chips{display:flex; flex-wrap:wrap; gap:5px;}
  .preset-chip{
    background:var(--bg-input); border:1px solid var(--border-strong); border-radius:var(--radius);
    color:var(--muted); font-size:10px; font-weight:500; padding:4px 8px; cursor:pointer;
  }
  .preset-chip:hover{border-color:var(--accent); color:var(--accent); background:var(--bg-selected);}
  .preset-chip.active{background:var(--accent); border-color:var(--accent); color:#fff;}
  .icon-btn.active{background:var(--bg-selected); color:var(--accent);}

  .popover{
    position:absolute; top:0; left:0; width:216px; background:var(--panel);
    border:1px solid var(--border-strong); border-radius:8px; box-shadow:0 4px 14px rgba(0,0,0,.16);
    padding:10px; z-index:50;
  }
  .popover.hidden{display:none;}
  .popover-title{font-size:11px; font-weight:600; margin-bottom:8px; color:var(--text);}
  .popover-actions{display:flex; justify-content:flex-end; gap:6px; margin-top:10px;}
  .popover-actions .btn{width:auto; height:24px; padding:0 10px; font-size:11px;}
  .field-row{display:flex; align-items:center; gap:6px; margin-bottom:6px;}
  .field-row:last-child{margin-bottom:0;}
  .field-row .field{display:flex; flex-direction:column; gap:3px; flex:1; margin-bottom:0;}
  .field-row .field label{margin-bottom:0;}
  .switch-row{display:flex; align-items:center; justify-content:center; gap:10px;}

  .seg-toggle{display:flex; gap:2px; background:var(--panel-2); border-radius:var(--radius); padding:2px;}
  .seg-btn{
    flex:1; height:24px; display:flex; align-items:center; justify-content:center;
    background:none; border:none; border-radius:calc(var(--radius) - 2px); cursor:pointer; color:var(--muted);
    font-size:10px; font-weight:500; padding:0; transition:background .12s, color .12s, box-shadow .12s;
  }
  .seg-btn svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  .seg-btn:hover:not(.active){background:var(--bg-hover); color:var(--text);}
  .seg-btn.active{background:var(--seg-active); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.12);}
  .switch-side-label{font-size:10.5px; color:var(--muted); font-weight:500; transition:color .15s;}
  .switch-side-label.active-side{color:var(--accent); font-weight:600;}
  .switch{
    width:34px; height:19px; border-radius:999px; border:1px solid var(--border-strong);
    background:var(--panel-2); position:relative; cursor:pointer; padding:0; flex-shrink:0;
    transition:background .15s, border-color .15s;
  }
  .switch.on{background:var(--accent); border-color:var(--accent);}
  .switch-knob{
    position:absolute; top:1px; left:1px; width:15px; height:15px; border-radius:50%;
    background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s; display:block;
  }
  .switch.on .switch-knob{transform:translateX(15px);}

  .checkbox-label{display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:400; color:var(--text); cursor:pointer; margin-bottom:0;}
  .checkbox-label input[type=checkbox]{
    appearance:none; -webkit-appearance:none; margin:0; flex-shrink:0; cursor:pointer;
    width:13px; height:13px; border:1px solid var(--border-strong); border-radius:3px;
    background:var(--bg-input); position:relative;
  }
  .checkbox-label input[type=checkbox]:checked{background:var(--accent); border-color:var(--accent);}
  .checkbox-label input[type=checkbox]:checked::after{
    content:''; position:absolute; left:3.5px; top:1.5px; width:4px; height:7px;
    border:solid #fff; border-width:0 1.5px 1.5px 0; transform:rotate(45deg);
  }
  .checkbox-label input[type=checkbox]:focus-visible{outline:1px solid var(--accent); outline-offset:1px;}

  #toast{
    position:fixed; bottom:16px; left:50%; transform:translateX(-50%) translateY(10px); z-index:1000;
    background:var(--toast-bg); color:var(--toast-ink); padding:8px 14px; border-radius:var(--radius); font-size:11.5px; opacity:0;
    transition:opacity .15s ease, transform .15s ease; pointer-events:none;
  }
  #toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }


  /* Fields: word labels sit above; one-glyph labels (W, H, A, ↕, X, Y) sit beside the input. */
  .field.side{display:flex; flex-direction:row !important; align-items:center; gap:6px;}
  .field.side > label{margin:0; flex:none; min-width:12px; text-align:center; font-size:11px; color:var(--muted);}
  .field.side > input{flex:1; min-width:0;}
  .field-row{align-items:center;}

  /* Sections: a left gutter carries the section icon, so content never presses against the edge.
     Pattern: <div class="sec"><div class="sec-title"><svg class="sec-icon">…</svg><span>Title</span></div>… */