/* ==========================================================================
   Tab Truck — web app (PWA)
   Same system as the extension: 2px ink outlines, flat sticker shadows.
   Class names match what app.js emits (.group/.note/.share-row/.status…),
   so only the paint changes here.
   ========================================================================== */

* { box-sizing: border-box; }

/* ==========================================================================
   Header
   ========================================================================== */
header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--white);
  border-bottom: var(--outline);
}
header h1 { font-size: 19px; margin: 0; flex: 1; }

.wrap { max-width: 720px; margin: 0 auto; padding: var(--s3) var(--s3) var(--s6); }

/* ==========================================================================
   Buttons
   ========================================================================== */
button {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  border: var(--outline);
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow: var(--lift-sm);
  cursor: pointer;
  min-height: 44px;                 /* hit target — this is the mobile surface */
  white-space: nowrap;              /* keep labels like "Save link" on one line */
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: transform var(--t-fast) var(--ease-fast), box-shadow var(--t-fast) var(--ease-fast), background var(--t-fast) var(--ease-fast);
}
button:hover { background: var(--panel); transform: translateY(-1px); box-shadow: var(--lift); }
button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--shadow-neutral); }

button.primary { background: var(--orange); color: #fff; box-shadow: var(--lift-orange); }
button.primary:hover { background: var(--orange-hover); transform: translateY(-1px); box-shadow: var(--lift-hover-orange); }
button.primary:active { background: var(--orange-press-bg); transform: translateY(2px); box-shadow: 0 1px 0 var(--orange-press); }

button:disabled {
  background: var(--panel); color: var(--ink-muted);
  border-color: var(--shadow-neutral); box-shadow: none;
  cursor: not-allowed; transform: none;
}

.mini {
  padding: 6px 11px; font-size: 12px; border-radius: 9px;
  min-height: 0; box-shadow: 0 2px 0 var(--shadow-neutral);
}
.mini:active { transform: translateY(2px); box-shadow: 0 0 0 var(--shadow-neutral); }
.mini.danger { color: var(--orange-link); }
.mini.danger:hover { background: var(--orange-100); }

/* ==========================================================================
   Inputs
   ========================================================================== */
input[type=text],
input[type=url],
input[type=password],
select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;                  /* ≥16px avoids iOS zoom-on-focus; 15 is the compromise the rest of the UI uses */
  color: var(--ink);
  background: var(--white);
  border: var(--outline);
  border-radius: 11px;
  padding: 11px 13px;

}
input::placeholder { color: var(--ink-muted); }
input:focus, select:focus { border-color: var(--green); }   /* focus = green ring */

select {
  font-family: var(--font-display); font-weight: 600;
  cursor: pointer;
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 10 10'%3E%3Cpath d='M2 4l3 3 3-3' fill='none' stroke='%232A2620' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}

.row { display: flex; gap: var(--s1); margin: 10px 0; }
.hidden { display: none !important; }
.muted { color: var(--ink-soft); font-size: 13px; }

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  background: var(--white);
  border: var(--outline);
  border-radius: var(--r-card);
  box-shadow: var(--lift);
  padding: 18px;
  margin: var(--s2) 0;
}
.card h2 { font-size: 17px; margin: 0 0 6px; }

/* ==========================================================================
   Status line
   ========================================================================== */
.status { min-height: 20px; margin: 10px 0; color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.status.err  { color: var(--orange-press); }
.status.warn { color: var(--orange-link); }

/* ==========================================================================
   Groups — the "session card" from §02, adapted for a narrow screen
   ========================================================================== */
.group {
  background: var(--white);
  border: var(--outline);
  border-radius: var(--r-card);
  box-shadow: var(--lift);
  overflow: hidden;
  margin: var(--s2) 0;
}
.group-head {
  display: flex; align-items: center; gap: var(--s1);
  padding: 12px 14px;
  background: var(--panel);
  border-bottom: var(--outline);
}
.group-head b { flex: 1; font-family: var(--font-display); font-weight: 600; font-size: 15px; min-width: 0; }
.group-head .count {
  flex: none;
  font-size: 11px; font-weight: 700;
  color: var(--green-press);
  background: var(--green-100);
  border-radius: var(--r-pill);
  padding: 4px 9px;
}

.dot {
  width: 10px; height: 10px; border-radius: var(--r-pill); flex: none;
  border: 1.5px solid var(--ink);
}

.group ul { list-style: none; margin: 0; padding: 10px; display: grid; gap: 8px; }
.group li {
  background: var(--cream);
  border: var(--hair);
  border-radius: 12px;
  padding: 10px 12px;
}
.group li a {
  color: var(--ink); text-decoration: none; word-break: break-word;
  font-size: 14px; font-weight: 600;
}
.group li a:hover { color: var(--orange-link); text-decoration: underline; }

/* ==========================================================================
   Notes
   ========================================================================== */
#notesWrap h2 { font-size: 17px; margin: var(--s4) 0 var(--s1); }
.note-row { display: flex; align-items: flex-start; gap: var(--s1); }
.note-row .note { flex: 1; }
#notes .note {
  background: var(--white);
  border: var(--outline);
  border-radius: 12px;
  box-shadow: var(--lift-sm);
  padding: 11px 13px;
  margin: var(--s1) 0;
  white-space: pre-wrap;
  font-size: 14px;
}

/* ==========================================================================
   Add bar
   ========================================================================== */
.addbar input, .addbar select { margin-bottom: var(--s1); }
.addbar .row { margin: 0; }
.addbar select { flex: 1; width: auto; margin: 0; }

/* ==========================================================================
   Sharing
   ========================================================================== */
.token-box, .bm-code {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dark-text);
  background: var(--dark-bg);
  border: var(--outline);
  border-radius: 10px;
  padding: 10px;
}
.token-box { margin-top: var(--s1); max-height: 110px; overflow: auto; word-break: break-all; white-space: pre-wrap; }
.bm-code { flex: 1; overflow: auto; white-space: nowrap; }

.share-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 0;
  border-top: var(--hair);
}
.share-row:first-child { border-top: none; }
.share-row .mini { margin-left: 4px; }

.shared-box {
  margin-top: var(--s2);
  background: var(--cream);
  border: var(--outline);
  border-radius: 14px;
  padding: 14px;
}
.shared-box ul { list-style: none; margin: var(--s1) 0 0; padding: 0; }
.shared-box li { padding: 8px 0; border-top: var(--hair); }
.shared-box li:first-child { border-top: none; }
.shared-box a { color: var(--ink); text-decoration: none; word-break: break-word; font-weight: 600; }
.shared-box a:hover { color: var(--orange-link); text-decoration: underline; }

/* ==========================================================================
   Bookmarklet
   ========================================================================== */
.bm summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; }
.bm-btn {
  display: inline-block;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: #fff; background: var(--orange);
  border: var(--outline);
  border-radius: 12px;
  box-shadow: var(--lift-orange);
  padding: 11px 16px;
  text-decoration: none;
  cursor: grab;
}

details summary { cursor: pointer; }
.conn-details { margin-top: var(--s2); }
.origin-info { word-break: break-all; }

/* The chevron is baked into a data-URI, so it can't follow --ink. In dark mode
   --ink flips to cream, and a dark chevron would vanish — hence its own variant. */
:root[data-theme="dark"] select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 10 10'%3E%3Cpath d='M2 4l3 3 3-3' fill='none' stroke='%23FBF6EC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* dark: green brightens, so text on a green fill must go near-black */
:root[data-theme="dark"] .group-head .count { color: var(--green-ok-text); }

/* theme cycle button (the PWA has no options page, so the control lives here) */
.theme-cycle { font-size: 15px; line-height: 1; min-width: 40px; }

/* ==========================================================================
   Phones — this app is used on the phone, so tune the touch surface.
   ========================================================================== */
@media (max-width: 720px) {
  /* 16px inputs stop iOS from zooming the page in on focus */
  input[type=text], input[type=url], input[type=password], select { font-size: 16px; }

  /* roomier tap targets for the small header/share controls */
  .mini { min-height: 40px; padding: 8px 12px; }
}