/* Shared look for the list itself. Each host (tray widget, phone web app)
   supplies its own outer chrome and overrides the variables below. */

.pad-ui {
  --pad-gap: 4px;
  --pad-row-pad: 3px;
  --pad-font: 13px;
  --pad-tap: 17px;
  color: var(--text);
  font-size: var(--pad-font);
}

/* tabs --------------------------------------------------------------------- */
.pad-ui .tabs {
  display: flex; gap: 2px;
  margin: 0 10px 8px;
  padding: 2px;
  background: var(--bg-sunk);
  border-radius: 9px;
}
.pad-ui .tabs button {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  border: 0; border-radius: 7px;
  background: transparent; color: var(--muted);
  font: inherit; font-weight: 500;
  padding: 5px 8px; cursor: pointer;
}
.pad-ui .tabs button:hover { color: var(--text); }
.pad-ui .tabs button[aria-selected="true"] {
  background: var(--bg); color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.pad-ui .tabs .n {
  font-size: .8em; font-variant-numeric: tabular-nums;
  background: var(--line); color: var(--muted);
  border-radius: 999px; padding: 1px 5px; min-width: 17px;
}
.pad-ui .tabs button[aria-selected="true"] .n { background: var(--accent); color: #2a1c00; }

/* composer ----------------------------------------------------------------- */
.pad-ui .composer {
  display: flex; align-items: center; gap: 6px;
  margin: 0 10px 10px;
  padding: 3px 4px 3px 3px;
  background: var(--bg-sunk);
  border: 1px solid transparent;
  border-radius: 9px;
}
.pad-ui .composer:focus-within { border-color: var(--accent); }
.pad-ui .composer input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; color: var(--text);
  font: inherit; padding: 5px 4px; outline: none;
  -webkit-user-select: text; user-select: text;
}
.pad-ui .composer input::placeholder { color: var(--muted); }

.pad-ui .pick {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 7px;
  background: transparent; cursor: pointer;
  font-size: 1.08em; line-height: 1;
}
.pad-ui .pick:hover { background: rgba(128, 128, 128, .18); }
.pad-ui .pick .dot {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px dashed var(--muted);
}

/* list --------------------------------------------------------------------- */
.pad-ui ul {
  list-style: none; margin: 0; padding: 0 6px;
  max-height: var(--pad-list-max, 420px);
  overflow-y: auto;
}
.pad-ui ul::-webkit-scrollbar { width: 8px; }
.pad-ui ul::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 4px; border: 2px solid var(--bg);
}

.pad-ui li {
  display: flex; align-items: center; gap: var(--pad-gap);
  padding: var(--pad-row-pad) 4px var(--pad-row-pad) 2px;
  border-radius: 8px;
  position: relative;
}
.pad-ui li:hover { background: var(--bg-sunk); }
.pad-ui li.dragging { opacity: .35; }
.pad-ui li.drop-before::before, .pad-ui li.drop-after::after {
  content: ""; position: absolute; left: 8px; right: 8px; height: 2px;
  background: var(--accent); border-radius: 1px;
}
.pad-ui li.drop-before::before { top: -1px; }
.pad-ui li.drop-after::after { bottom: -1px; }

.pad-ui .grip {
  width: 12px; flex: none; cursor: grab;
  color: transparent; text-align: center; font-size: .85em; line-height: 1;
  touch-action: none;
}
.pad-ui li:hover .grip { color: var(--muted); }

.pad-ui .check {
  width: var(--pad-tap); height: var(--pad-tap); flex: none;
  border: 1.5px solid var(--line); border-radius: 50%;
  background: transparent; cursor: pointer; padding: 0;
  display: grid; place-items: center;
}
.pad-ui .check:hover { border-color: var(--accent); }
.pad-ui .check svg { opacity: 0; width: 60%; height: 60%; }
.pad-ui li.done .check { background: var(--accent); border-color: var(--accent); }
.pad-ui li.done .check svg { opacity: 1; }

.pad-ui .label {
  flex: 1; min-width: 0;
  padding: 2px;
  word-break: break-word;
  cursor: text;
}
.pad-ui li.done .label { color: var(--muted); text-decoration: line-through; }
.pad-ui .label-edit {
  flex: 1; min-width: 0;
  border: 0; outline: none; background: transparent;
  font: inherit; color: var(--text); padding: 2px;
  -webkit-user-select: text; user-select: text;
}

.pad-ui .icon-btn {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 0; border-radius: 7px;
  background: transparent; color: var(--muted);
  font-size: 1em; cursor: pointer;
}
.pad-ui .icon-btn:hover { background: var(--bg-sunk); color: var(--text); }
.pad-ui .remove { opacity: 0; font-size: 1.08em; }
.pad-ui li:hover .remove { opacity: 1; }
.pad-ui .remove:hover { color: var(--danger); }
.pad-ui .move { opacity: 0; font-size: 1em; }
.pad-ui li:hover .move { opacity: 1; }
.pad-ui .move:hover { color: var(--accent); }

.pad-ui .empty {
  padding: 18px 14px 22px;
  text-align: center; color: var(--muted); font-size: .92em;
}

/* footer ------------------------------------------------------------------- */
.pad-ui .footer {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px 8px 12px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: .85em;
}
.pad-ui .footer .spacer { flex: 1; }
.pad-ui .link {
  border: 0; background: transparent; color: var(--muted);
  font: inherit; cursor: pointer; padding: 2px 4px; border-radius: 5px;
}
.pad-ui .link:hover { background: var(--bg-sunk); color: var(--text); }

/* icon picker -------------------------------------------------------------- */
.pad-picker {
  position: absolute; z-index: 30;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(8, 26px);
  gap: 2px;
}
.pad-picker button {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 0; border-radius: 6px; background: transparent;
  font-size: 14px; cursor: pointer;
}
.pad-picker button:hover { background: var(--bg-sunk); }
.pad-picker .none { font-size: 11px; color: var(--muted); }

/* touch hosts: bigger targets, always-visible actions (no hover on a phone) */
.pad-ui.touch {
  --pad-row-pad: 9px;
  --pad-gap: 8px;
  --pad-font: 16px;
  --pad-tap: 24px;
}
.pad-ui.touch .remove, .pad-ui.touch .move { opacity: .55; }
.pad-ui.touch .grip { color: var(--muted); width: 18px; font-size: 1em; }
.pad-ui.touch .icon-btn { width: 34px; height: 34px; }
.pad-ui.touch .pick { width: 34px; height: 34px; }
.pad-ui.touch .composer input { padding: 9px 4px; }
.pad-ui.touch .tabs button { padding: 9px 8px; }
.pad-ui.touch li:hover { background: transparent; }
.pad-picker.touch { grid-template-columns: repeat(6, 40px); }
.pad-picker.touch button { width: 40px; height: 40px; font-size: 20px; }