/* 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:var(--ctl-font);
    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:var(--on-accent);}

  /* ---------- 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:var(--sp-2);
    background:var(--panel); border-bottom:1px solid var(--border);
    padding:0 var(--sp-3) 0 var(--sp-4);
    position:relative; z-index:40;   /* its menus (language, settings) open over the page below it */
  }
  .app-title{display:flex; align-items:center; gap:var(--sp-2); height:28px; font-weight:600; font-size:var(--fs-app); 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:var(--ctl-font);}
  .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:var(--ctl-font); 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);
    overflow-y:auto;
    overflow-x:hidden;
  }

  /* Sections, as in Figma: the title is a row of its own (--ctl-h tall) and closed sections stack as bare rows;
     an open one has room below its content before the line. Order of space: label–field 4, control–control 8,
     end of a section 12, then a line. */
  .sec{
    box-shadow:inset 0 -1px 0 var(--border);   /* the line takes no room: rows stay on the 4 px grid */
    padding:var(--sp-1) var(--sp-3) var(--sp-3) var(--sp-6);
  }
  .sec-title{
    font-size:var(--ctl-font-sm);
    font-weight:var(--title-weight);
    color:var(--muted);
    letter-spacing:.15px;
    min-height:var(--ctl-h);
    margin:0;
    display:flex;
    align-items:center;
    gap:var(--sp-2);
  }
  .sec-title-row{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); min-height:var(--ctl-h); margin:0;}
  .sec-title-row .sec-title{margin-bottom:0;}
  .sec-icon{width:var(--icon-size); height:var(--icon-size); stroke:var(--muted); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; margin-left:calc(-1 * (var(--icon-size) + var(--sp-1))); margin-right:calc(-1 * var(--sp-2) + var(--sp-1));}
  /* Sections that open and close (.sec.acc): the title toggles; a line only around an open one */
  .sec.acc > .sec-title, .sec.acc > .sec-title-row > .sec-title{cursor:pointer; user-select:none;}
  .sec-chev{width:10px; height:10px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.7; transform:rotate(90deg); transition:transform var(--duration-fast);}
  .sec.acc.collapsed .sec-chev{transform:none;}
  .sec.acc.collapsed > :not(.sec-title):not(.sec-title-row){display:none !important;}
  .sec.acc.collapsed > .sec-title, .sec.acc.collapsed > .sec-title-row{margin-bottom:0;}
  .sec.acc.collapsed{box-shadow:none; padding-bottom:0;}
  .sec.acc.collapsed + .sec.acc.collapsed{padding-top:0;}   /* closed sections: one list of rows */
  .sec.collapsed + .sec:not(.collapsed){box-shadow:inset 0 1px 0 var(--border), inset 0 -1px 0 var(--border);}
  .sec-title .badge{
    color:var(--text-muted);
    font-size:var(--fs-micro);
    font-weight:500;
  }

  .field{margin-bottom:var(--sp-2); flex:1; min-width:0;}
  .field:last-child{margin-bottom:0;}
  label{
    display:block;
    font-size:var(--ctl-font-sm);
    font-weight:500;
    color:var(--muted);
    margin-bottom:var(--sp-1);
  }
  input[type="text"], textarea{
    width:100%;
    background:var(--bg-input);
    border:1px solid var(--control-line);
    border-radius:var(--radius);
    color:var(--text);
    padding:0 var(--sp-2);
    height:var(--ctl-h);
    font-size:var(--ctl-font);
    font-family:inherit;
  }
  input[type="text"]{resize:none;}
  textarea{
    height:auto; padding:var(--sp-1) var(--sp-2); 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:var(--ctl-h); height:var(--ctl-h); border:1px solid var(--control-line); 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:var(--on-accent);}
  .icon-toggle-btn:hover:not(.active){background:var(--bg-hover); color:var(--text);}

  .scrub-input{
    width:100%; height:var(--ctl-h); border:1px solid var(--control-line); background:var(--bg-input);
    border-radius:var(--radius); padding:0 var(--sp-2); font-size:var(--ctl-font); 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:var(--ctl-h-sm); font-size:var(--ctl-font-sm); padding:0 var(--sp-2);}

  .btn{
    width:100%;
    display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
    background:var(--accent);
    color:var(--on-accent); border:1px solid var(--accent); border-radius:var(--radius);
    height:var(--ctl-h); padding:0 var(--sp-4); font-size:var(--ctl-font); 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(--control-line);
    color:var(--text);
  }
  .btn.secondary:hover{background:var(--bg-hover);}
  /* Danger: a secondary button in the alert colour; .armed is the "click again" step (it fills) */
  .btn.secondary.danger{color:var(--danger-label);}
  .btn.secondary.danger:hover{background:var(--danger-wash);}
  .btn.secondary.danger.armed{background:var(--danger); color:var(--on-danger);}
  .btn-quiet{
    display:block; width:100%; text-align:center; background:transparent; border:none;
    color:var(--muted); font-size:var(--ctl-font-sm); padding:var(--sp-1) 0 0; cursor:pointer;
  }
  .btn-quiet:hover{color:var(--text);}
  .hint{font-size:var(--ctl-font-sm); color:var(--muted); margin-top:var(--sp-1); line-height:16px;}

  .icon-btn{
    width:var(--ctl-h-sm); height:var(--ctl-h-sm); 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:var(--icon-size); height:var(--icon-size); flex-shrink:0; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
  /* One edge (as in Crop): a title row's last icon ends where the boxes end — its 16 px drawing, not its 24 px button */
  .sec-title-row > .icon-btn:last-child, .sec-title-row > :last-child > .icon-btn:last-child{margin-right:calc((var(--icon-size) - var(--ctl-h-sm)) / 2);}

  .preset-chips{display:flex; flex-wrap:wrap; gap:var(--sp-1);}
  .preset-chip{
    display:inline-flex; align-items:center; height:var(--ctl-h-sm);
    background:var(--bg-input); border:1px solid var(--control-line); border-radius:var(--radius);
    color:var(--muted); font-size:var(--ctl-font-sm); font-weight:500; padding:0 var(--sp-2); cursor:pointer;
  }
  .preset-chip:hover{background:var(--bg-hover); color:var(--text);}
  .preset-chip.active{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
  .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); border-radius:var(--radius-lg); box-shadow:0 8px 24px rgb(var(--shadow-rgb) / .14);
    padding:var(--sp-3); z-index:50;
  }
  .popover.hidden{display:none;}
  .popover-title{font-size:var(--ctl-font); font-weight:var(--title-weight); margin-bottom:var(--sp-2); color:var(--text);}
  .popover-actions{display:flex; justify-content:flex-end; gap:var(--sp-2); margin-top:var(--sp-3);}
  .popover-actions .btn{width:auto; height:var(--ctl-h-sm); padding:0 var(--sp-3); font-size:var(--ctl-font-sm);}
  .field-row{display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-2);}
  .field-row:last-child{margin-bottom:0;}
  .field-row .field{display:flex; flex-direction:column; gap:var(--sp-1); flex:1; margin-bottom:0;}
  .field-row .field label{margin-bottom:0;}
  .switch-row{display:flex; align-items:center; justify-content:center; gap:var(--sp-2);}

  .seg-toggle{display:flex; gap:var(--sp-05); background:var(--panel-2); border-radius:var(--radius); padding:var(--sp-05);}
  .seg-btn{
    flex:1; height:var(--ctl-h-sm); 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:var(--ctl-font-sm); font-weight:500; padding:0; transition:background var(--duration-press), color var(--duration-press), box-shadow var(--duration-press);
  }
  .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);}
  .switch-side-label{font-size:var(--ctl-font-sm); color:var(--muted); font-weight:500; transition:color var(--duration-fast);}
  .switch-side-label.active-side{color:var(--accent);}   /* on by its colour; a heavier weight would shift the words */
  .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 var(--duration-fast), border-color var(--duration-fast);
  }
  .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:var(--knob); box-shadow:0 1px 2px rgb(var(--shadow-rgb) / .25); transition:transform var(--duration-fast); display:block;
  }
  .switch.on .switch-knob{transform:translateX(15px);}

  .checkbox-label{display:flex; align-items:center; gap:var(--sp-2); font-size:var(--ctl-font); 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:14px; height:14px; border:1px solid var(--border-strong); border-radius:4px;
    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:4px; top:1.5px; width:4px; height:7px;
    border:solid var(--on-accent); 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:var(--sp-2) var(--sp-4); border-radius:var(--radius); font-size:var(--ctl-font); opacity:0;
    transition:opacity var(--duration-ui) var(--ease-out-strong), transform var(--duration-ui) var(--ease-out-strong); pointer-events:none;   /* arrives with the shared ease-out (tool-base.css, Motion) */
  }
  #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:var(--sp-2);}
  .field.side > label{margin:0; flex:none; min-width:12px; text-align:center; font-size:var(--ctl-font); 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>… */

/* Compact tags: the same 20 px pill in editors, suggestions and card details. */
.sk-tag{display:inline-flex;align-items:center;gap:var(--sp-1);height:20px;max-width:100%;padding:0 var(--sp-2);border:0;border-radius:999px;background:var(--bg-selected);color:var(--text);font:var(--ctl-font-sm)/20px var(--font-sans);white-space:nowrap;}
.sk-tag span{min-width:0;overflow:hidden;text-overflow:ellipsis;}
button.sk-tag{cursor:pointer;}
button.sk-tag:hover{background:var(--bg-hover);}