/* Base look for id.j-tools.net's own pages (login, account, admin, tools hub).
   Deliberately sober monochrome — black on white, no accent colour anywhere, so the
   identity service reads as neutral infrastructure rather than as another branded app.
   The one exception is --brand: it stays black unless a specific tool has set its own
   primary_color, in which case that tool's login page picks it up. */
:root { --brand: #000; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: #000;
  font-family: sans-serif;
  line-height: 1.5;
}

/* Phone-first: a single narrow column with modest margins, widening only once there is
   room for it. The max-widths cap line length on laptops rather than driving the layout. */
.page {
  max-width: 600px;
  margin: 1.5em auto;
  padding: 0 1em;
}
.page-wide { max-width: 760px; }

@media (min-width: 600px) {
  .page { margin: 2.5em auto; padding: 0 1.5em; }
}

h1 { font-size: 1.3em; margin: 0 0 0.6em; }
h2 { font-size: 1.05em; margin: 1.8em 0 0.5em; }

@media (min-width: 600px) {
  h1 { font-size: 1.4em; }
  h2 { font-size: 1.1em; }
}

a { color: #000; }

img { max-width: 100%; }

label { display: block; margin: 1em 0 0.3em; }

input[type=text], input[type=email], input[type=password], select {
  font-size: 16px; /* below 16px iOS zooms the whole page in on focus */
  padding: 0.6em;
  min-height: 44px;
  border: 1px solid #999;
  border-radius: 6px;
  background: #fff;
  color: #000;
  max-width: 100%;
}

button {
  font: inherit;
  font-size: 1rem;
  padding: 0.6em 1.1em;
  min-height: 44px; /* stays a comfortable touch target on a phone */
  border: 1px solid #000;
  border-radius: 6px;
  background: #fff;
  color: #000;
  cursor: pointer;
}
button:hover { background: #f2f2f2; }

/* The one action a page wants you to take, filled so it still reads as primary without
   needing a colour to say so. */
.btn-primary {
  background: var(--brand);
  color: #fff;
}
.btn-primary:hover { background: #333; }

/* Notices carry their meaning through wording and weight rather than red/green, so the
   pages stay monochrome without losing the error/confirmation distinction. */
.notice {
  border: 1px solid #d4d4d4;
  border-left: 4px solid #d4d4d4;
  padding: 0.6em 0.9em;
  margin: 1em 0;
}
.notice-strong {
  border-color: #000;
  border-left-color: #000;
  font-weight: 600;
}

/* Secondary page links, spaced far enough apart to tap one without hitting its neighbour
   and free to wrap onto a second line on a narrow screen. */
.page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.4em;
  margin: 0.8em 0 1.4em;
}

/* A field (or a few) plus its button: side by side when the viewport can hold them,
   each on its own full-width line when it can't, rather than shrinking to unusable
   widths. The 14em basis is what makes an email field wrap before it gets cramped. */
.form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em;
  margin: 0.8em 0;
}
.form-row input[type=text],
.form-row input[type=email],
.form-row input[type=password],
.form-row select {
  flex: 1 1 14em;
  min-width: 0;
}

@media (max-width: 480px) {
  .form-row > * { width: 100%; }
}

/* Login-style forms, where every control owns its own line at any width. */
.form-stacked input[type=text],
.form-stacked input[type=email],
.form-stacked input[type=password],
.form-stacked select { width: 100%; }
.form-stacked button { width: 100%; margin-top: 0.6em; }

ul { padding-left: 1.2em; }
li { margin: 0.5em 0; }

/* List rows that carry their own action buttons (emails, permalinks, tools). The text
   and the buttons are separate flex children so the buttons stay together as a group
   and drop below the text instead of interleaving with it when space runs out. */
.list-plain { list-style: none; padding-left: 0; margin: 0.6em 0; }
.list-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em 0.8em;
  padding: 0.7em 0;
  margin: 0;
  border-bottom: 1px solid #ececec;
}
.list-row:last-child { border-bottom: none; }
.list-row-main { flex: 1 1 14em; min-width: 0; overflow-wrap: anywhere; }
.list-row-actions { display: flex; flex-wrap: wrap; gap: 0.5em; }
/* Narrower than a primary button so two of them still fit on one phone-width line. */
.list-row-actions button { padding-left: 0.8em; padding-right: 0.8em; }

/* The tool's own logo on the login page, sized to be the first thing you see — the bar's
   26px icon is chrome, this is what tells the visitor whose login screen they landed on.
   Height-capped rather than width-capped so a wide wordmark and a square icon both stay
   on one line with the heading below them. */
.login-logo { margin: 0.5em 0 1.2em; }
.login-logo img { max-height: 80px; max-width: 100%; display: block; }

@media (max-width: 480px) {
  .login-logo img { max-height: 60px; }
}

/* Whole row of the tools list is the tap target, icon included. */
.tool-link {
  flex: 1 1 14em;
  display: flex;
  align-items: center;
  gap: 0.6em;
  min-height: 44px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.tool-link img { height: 24px; flex-shrink: 0; }

/* The star sits outside the row's tap target so tapping it can't also follow the tool link.
   Borderless because a boxed button next to the row text reads as the row's main action,
   which it isn't. */
.fav-form { display: flex; flex-shrink: 0; }
.fav-btn {
  border: none;
  background: none;
  padding: 0 0.2em;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}
.fav-btn:hover { background: none; color: #000; }
.fav-btn.is-on { color: #000; }
.fav-checkbox { width: 22px; height: 22px; flex-shrink: 0; }

/* Admin drag-and-drop reordering (edit_tools.php, edit_categories.php). Native HTML5
   drag-and-drop, kept deliberately plain -- a handle, a moving-row cue, nothing fancier. */
.drag-item { cursor: grab; }
.drag-item.dragging { opacity: 0.4; }
.drag-handle { cursor: grab; color: #999; flex-shrink: 0; font-size: 1.1em; }
.default-fav-checkbox { width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; margin-right: 0.4em; }
.icon-btn {
  border: none;
  background: none;
  padding: 0 0.3em;
  min-width: 44px;
  color: #999;
}
.icon-btn:hover { background: none; color: #000; }

.muted { color: #666; }

code { word-break: break-all; }

table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #d4d4d4; padding: 0.5em; text-align: left; overflow-wrap: anywhere; }
th { background: #f7f7f7; }
/* Wide tables scroll inside their own box so the page itself never scrolls sideways. */
.table-wrap { overflow-x: auto; }

/* The one-time permalink display: the value and its copy button side by side when there's
   room, each on its own line on a narrow screen rather than the value getting squeezed. */
.permalink-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em; margin-top: 0.5em; }
.permalink-value { flex: 1 1 14em; min-width: 0; }