/* ArchiCAD.ge — the shared base components.
 *
 * Buttons, fields, a field's label and messages, a dialog, a chip and a card,
 * drawn only from the tokens in gl-tokens.css (linked before this file), so
 * that a button is the same height, radius, colour and focus ring on every
 * page. Every page links this file before its own <style>: the page's rules
 * come later and win where it needs something of its own. Pages with classes
 * of their own (.gla-btn, .glp-input, the login's .btn …) take the same
 * metrics from the same tokens.
 *
 *   <button class="gl-btn gl-btn--primary">…</button>   --secondary --ghost --danger --link
 *   <button class="gl-btn gl-btn--sm gl-btn--icon" aria-label="…"><svg/></button>
 *   <div class="gl-btn-row"><button class="gl-btn">…</button><button class="gl-btn">…</button></div>
 *   <label class="gl-field"><span class="gl-field__label">…</span>
 *     <input class="gl-input" aria-describedby="h e">
 *     <span class="gl-field__hint" id="h">…</span><span class="gl-field__error" id="e" role="alert"></span></label>
 *   <div class="gl-dialog"><div class="gl-dialog__panel" role="dialog" aria-modal="true" aria-labelledby="t">
 *     <div class="gl-dialog__head"><h2 class="gl-dialog__title" id="t">…</h2>
 *       <button class="gl-dialog__close" aria-label="დახურვა">×</button></div>
 *     <div class="gl-dialog__body">…</div><div class="gl-dialog__foot">…</div></div></div>
 */

/* ---- keyboard focus ------------------------------------------------------
   :focus-visible, not :focus, so a mouse click draws no ring while Tab always
   does. :where() keeps it at no specificity: a page's own ring wins. */
:where(:focus-visible) { outline: 2px solid var(--gl-focus); outline-offset: 2px; }

/* ---- buttons -------------------------------------------------------------
   The site's one button (docs/DESIGN.md). A look for its role — primary (the
   one main action of a card or a dialog), secondary (the default), ghost (a
   quiet one beside a louder one, a toolbar's), danger (takes something away),
   link (an action inside a line of text) — and a size: md 38px (default), sm
   32px (a row of tools, a list row), lg 44px (a form's one action, the
   finger size). The heights are minimums: a label too long for one line
   wraps to two, balanced, and the button grows, instead of spilling out of a
   fixed box. The app's older button classes (.btn-action, .sp-btn,
   .btn-top …) take exactly these values in index.html, „buttons: one family“. */
.gl-btn {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gl-space-2);
  min-height: var(--gl-control-md); min-width: 0; padding: 4px var(--gl-btn-pad-md);
  border: 1px solid var(--gl-border-strong); border-radius: var(--gl-radius-control);
  background: var(--gl-surface-2); color: var(--gl-text);
  font: var(--gl-btn-weight) var(--gl-btn-font-md)/var(--gl-btn-line) var(--gl-font-body);
  text-align: center; white-space: normal; text-wrap: balance; overflow-wrap: break-word;
  text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--gl-dur-fast) ease, border-color var(--gl-dur-fast) ease,
              color var(--gl-dur-fast) ease, box-shadow var(--gl-dur-fast) ease, transform 0.1s ease;
}
.gl-btn svg { width: 16px; height: 16px; flex: none; }
.gl-btn:where(:not(:disabled, [aria-disabled="true"])):hover { background: var(--gl-surface-3); }
.gl-btn:where(:not(:disabled, [aria-disabled="true"])):active { transform: translateY(1px); }
.gl-btn:focus-visible { outline: 2px solid var(--gl-focus); outline-offset: 2px; }
.gl-btn:disabled, .gl-btn[aria-disabled="true"] { opacity: var(--gl-disabled-opacity); cursor: default; transform: none; }
.gl-btn--primary { background: var(--gl-accent); border-color: transparent; color: var(--gl-on-accent); }
.gl-btn--primary:where(:not(:disabled, [aria-disabled="true"])):hover { background: var(--gl-accent-hover); }
.gl-btn--secondary { background: var(--gl-surface-2); border-color: var(--gl-border-strong); color: var(--gl-text); }
.gl-btn--ghost { background: transparent; border-color: transparent; color: var(--gl-text-2); }
.gl-btn--ghost:where(:not(:disabled, [aria-disabled="true"])):hover { background: var(--gl-surface-2); color: var(--gl-text); }
/* White on the red fill would read at 3.8:1 at night; the red ink on a red
   wash keeps ≥5:1 in both themes. */
.gl-btn--danger { background: var(--gl-danger-soft); border-color: var(--gl-danger); color: var(--gl-danger-ink); }
.gl-btn--danger:where(:not(:disabled, [aria-disabled="true"])):hover { background: color-mix(in srgb, var(--gl-danger) 22%, transparent); }
/* A quiet destructive action in a list row („წაშლა“ beside „გაგრძელება“):
   the red ink, with the wash only while it is pointed at. */
.gl-btn--ghost.gl-btn--danger { background: transparent; border-color: transparent; color: var(--gl-danger-ink); }
.gl-btn--ghost.gl-btn--danger:where(:not(:disabled, [aria-disabled="true"])):hover { background: var(--gl-danger-soft); border-color: var(--gl-danger); color: var(--gl-danger-ink); }
/* An action inside a sentence or under a field: the accent's ink, no box. */
.gl-btn--link {
  min-height: 0; padding: 0; gap: 4px; border-color: transparent; border-radius: 4px; background: transparent;
  color: var(--gl-accent-ink); text-align: left; text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.gl-btn--link:where(:not(:disabled, [aria-disabled="true"])):hover { background: transparent; color: var(--gl-text); text-decoration-color: currentColor; }
.gl-btn--sm { min-height: var(--gl-control-sm); padding: 3px var(--gl-btn-pad-sm); gap: 6px; font-size: var(--gl-btn-font-sm); }
.gl-btn--lg { min-height: var(--gl-control-lg); padding: 5px var(--gl-btn-pad-lg); font-size: var(--gl-btn-font-lg); }
.gl-btn--block { display: flex; width: 100%; }
.gl-btn--icon { width: var(--gl-control-md); padding: 0; }
.gl-btn--icon.gl-btn--sm { width: var(--gl-control-sm); }
.gl-btn--icon.gl-btn--lg { width: var(--gl-control-lg); }
.gl-btn--link.gl-btn--sm, .gl-btn--link.gl-btn--lg { min-height: 0; padding: 0; }
/* A toggle that is on — the chosen tool of a toolbar, a switched-on view
   („მიბმა“, „პანელი“) — says so with aria-pressed="true": the accent's wash
   and ink, on any variant. */
.gl-btn[aria-pressed="true"],
.gl-btn[aria-pressed="true"]:where(:not(:disabled, [aria-disabled="true"])):hover { background: var(--gl-accent-soft); border-color: var(--gl-accent-ring); color: var(--gl-accent-ink); }
/* Buttons side by side (a card's actions) fill their row together, each
   from its label's width, so a pair of short labels shares it about equally
   and neither wraps; when they do not fit on one line, the row breaks and
   each takes a whole line. A --block one always takes a whole line. */
.gl-btn-row { display: flex; flex-wrap: wrap; gap: var(--gl-space-2); }
.gl-btn-row > .gl-btn { flex: 1 1 auto; }
.gl-btn-row > .gl-btn--block { flex-basis: 100%; }

/* ---- fields -------------------------------------------------------------- */
.gl-input, .gl-select, .gl-textarea {
  display: block; width: 100%; min-width: 0; height: var(--gl-control-md); padding: 0 var(--gl-space-3);
  border: 1px solid var(--gl-control-line); border-radius: var(--gl-radius-control);
  background: var(--gl-surface-2); color: var(--gl-text);
  font: 500 14px/1.2 var(--gl-font-body); outline: none;
  transition: border-color var(--gl-dur-fast) ease, box-shadow var(--gl-dur-fast) ease;
}
.gl-textarea { height: auto; min-height: 76px; padding: 10px var(--gl-space-3); line-height: 1.45; resize: vertical; }
/* The arrow drawn in the text colour (two gradients of currentColor), so it
   has the text's contrast in both themes. */
.gl-select {
  -webkit-appearance: none; appearance: none; padding-right: 32px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.gl-input::placeholder, .gl-textarea::placeholder { color: var(--gl-placeholder); opacity: 1; }
.gl-input:hover, .gl-select:hover, .gl-textarea:hover { border-color: var(--gl-muted); }
/* Focus: the edge turns the focus colour and doubles to 2px (≥3:1 in both
   themes); the wash around it only softens it. */
.gl-input:focus, .gl-select:focus, .gl-textarea:focus {
  border-color: var(--gl-focus);
  box-shadow: 0 0 0 1px var(--gl-focus), 0 0 0 4px var(--gl-accent-soft);
}
.gl-input:focus-visible, .gl-select:focus-visible, .gl-textarea:focus-visible { outline: none; }
.gl-input[aria-invalid="true"], .gl-select[aria-invalid="true"], .gl-textarea[aria-invalid="true"] { border-color: var(--gl-danger); }
.gl-input[aria-invalid="true"]:focus, .gl-select[aria-invalid="true"]:focus, .gl-textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 1px var(--gl-danger), 0 0 0 4px var(--gl-danger-soft);
}
.gl-input:disabled, .gl-select:disabled, .gl-textarea:disabled { opacity: var(--gl-disabled-opacity); cursor: not-allowed; }
.gl-input--sm, .gl-select--sm { height: var(--gl-control-sm); font-size: 13px; }
.gl-input--lg, .gl-select--lg { height: var(--gl-control-lg); font-size: 15px; }
/* iOS zooms the page into any field set below 16px when it takes focus and
   does not zoom back out; on phones and tablets the fields are 16px. */
@media (max-width: 900px), (pointer: coarse) {
  .gl-input, .gl-select, .gl-textarea { font-size: 16px; }
}

/* ---- a field: its label, a hint, and the error --------------------------- */
.gl-field { display: grid; gap: 6px; min-width: 0; }
.gl-field__label { font: 600 12.5px/1.35 var(--gl-font-body); color: var(--gl-text-2); }
.gl-field__hint { font-size: 12px; line-height: 1.45; color: var(--gl-subtle); }
.gl-field__error { font-size: 12.5px; line-height: 1.45; color: var(--gl-danger-ink); }
.gl-field__error:empty { display: none; }

/* ---- dialog -------------------------------------------------------------- */
.gl-dialog {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  padding: var(--gl-space-4); background: var(--gl-overlay);
}
.gl-dialog[hidden] { display: none; }
.gl-dialog__panel {
  display: flex; flex-direction: column; width: min(520px, 100%); max-height: calc(100vh - 2 * var(--gl-space-4));
  overflow: hidden; border: 1px solid var(--gl-border-strong); border-radius: var(--gl-radius-lg);
  background: var(--gl-surface-1); color: var(--gl-text); box-shadow: var(--gl-shadow-2);
  font-family: var(--gl-font-body);
}
@supports (height: 100dvh) {
  .gl-dialog__panel { max-height: calc(100dvh - 2 * var(--gl-space-4)); }
}
.gl-dialog__head {
  display: flex; align-items: center; gap: var(--gl-space-3); flex: none;
  padding: var(--gl-space-3) var(--gl-space-3) var(--gl-space-3) 20px; border-bottom: 1px solid var(--gl-border);
}
.gl-dialog__title { flex: 1; min-width: 0; margin: 0; font: 400 16px/1.3 var(--gl-font-head); color: var(--gl-text); }
.gl-dialog__body { flex: 1; min-height: 0; overflow: auto; padding: 20px; }
.gl-dialog__foot {
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--gl-space-2); flex: none;
  padding: var(--gl-space-3) 20px; border-top: 1px solid var(--gl-border);
}
.gl-dialog__close {
  position: relative; display: grid; place-items: center; flex: none;
  width: var(--gl-control-sm); height: var(--gl-control-sm); padding: 0;
  border: 0; border-radius: var(--gl-radius-sm); background: transparent; color: var(--gl-muted); cursor: pointer;
  font-size: 20px; line-height: 1;
  transition: background var(--gl-dur-fast) ease, color var(--gl-dur-fast) ease;
}
.gl-dialog__close:hover { background: var(--gl-surface-3); color: var(--gl-text); }
.gl-dialog__close svg { width: 18px; height: 18px; }
/* A finger needs about 44px: the button stays 32px and grows an invisible
   hit area. */
@media (pointer: coarse) {
  .gl-dialog__close::after { content: ''; position: absolute; inset: -6px; }
}
/* On a phone the dialog rises from the bottom edge, where the thumb is. */
@media (max-width: 560px) {
  .gl-dialog { place-items: end stretch; padding: 0; }
  .gl-dialog__panel { width: 100%; border-radius: var(--gl-radius-lg) var(--gl-radius-lg) 0 0; border-bottom: 0; }
  .gl-dialog__foot > .gl-btn { flex: 1 1 auto; }
}

/* ---- chip ---------------------------------------------------------------- */
.gl-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px;
  border: 1px solid var(--gl-border); border-radius: var(--gl-radius-pill);
  background: var(--gl-surface-3); color: var(--gl-text-2);
  font: 600 12px/1 var(--gl-font-body); white-space: nowrap;
}
.gl-chip svg { width: 12px; height: 12px; flex: none; }
button.gl-chip, a.gl-chip { cursor: pointer; text-decoration: none; transition: background var(--gl-dur-fast) ease, color var(--gl-dur-fast) ease; }
button.gl-chip:hover, a.gl-chip:hover { background: var(--gl-accent-soft); border-color: var(--gl-accent-ring); color: var(--gl-text); }
.gl-chip--accent { background: var(--gl-accent-soft); border-color: var(--gl-accent-ring); color: var(--gl-accent-ink); }
.gl-chip--success { background: var(--gl-success-soft); border-color: transparent; color: var(--gl-success-ink); }
.gl-chip--warning { background: var(--gl-warning-soft); border-color: transparent; color: var(--gl-warning-ink); }
.gl-chip--danger { background: var(--gl-danger-soft); border-color: transparent; color: var(--gl-danger-ink); }
@media (pointer: coarse) {
  button.gl-chip, a.gl-chip { position: relative; }
  button.gl-chip::after, a.gl-chip::after { content: ''; position: absolute; inset: -10px -2px; }
}

/* ---- card ---------------------------------------------------------------- */
.gl-card {
  padding: var(--gl-space-4); border: 1px solid var(--gl-border); border-radius: var(--gl-radius-lg);
  background: var(--gl-surface-1); color: var(--gl-text); box-shadow: var(--gl-shadow-1);
}