/* Mark's Heimdall — application styles.
   Layered on top of Pico CSS (vendored, unmodified).
   Pico supplies the design system (typography, form controls, buttons,
   light/dark via prefers-color-scheme); this file adds layout, the card grid
   and the small corrective rules Pico's generic element styles need here.

   Pico quirks this file corrects (verified against pico.min.css v2.0.6):
   - .container zeroes its horizontal padding above 576px, so page content
     would touch the viewport edge → we restore padding-inline.
   - `ul li { list-style: square }` targets the li directly, so list-style
     set on the parent ul is inherited-defeated → we re-kill it on li.
   - buttons get form-element-sized padding (0.75rem/1rem), so plain <button>
     next to <a class="btn"> looked mismatched → .btn now applies to both. */

:root {
  --heimdall-radius: 8px;
}

/* ---------- Page scaffolding ---------- */

.container {
  max-width: 75rem;
  margin-inline: auto;
  /* restore horizontal gutters Pico removes on .container */
  padding: 1.5rem 1.25rem 3rem;
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.page-head h1 { margin: 0; font-size: 1.5rem; }

.session {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--pico-muted-color);
  font-size: 0.9rem;
}
.session .btn,
.session .inline { margin: 0; }

/* ---------- Card grid ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1rem;
  align-items: stretch; /* equal-height rows: a proper grid, not bricks */
}

.card {
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--heimdall-radius);
  box-shadow: none; /* Pico's soft shadow read as a stray outline */
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0;
  min-width: 0;
}

.card-private {
  border: 3px solid var(--pico-secondary);
}

.card-title { margin: 0; font-size: 1.05rem; }

.card-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; }

/* Long descriptions clamp to 3 lines; the toggle is revealed by app.js only
   when the text actually overflows. Without JS the clamp still keeps the
   grid tidy. */
.card-desc-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; }
.card-desc {
  margin: 0;
  color: var(--pico-muted-color);
  overflow-wrap: anywhere;
}
.card-desc[data-clamp] {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-desc[data-clamp].expanded {
  display: block;
  -webkit-line-clamp: none;
}
.desc-toggle {
  padding: 0.05rem 0.4rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--pico-primary);
}

/* ---------- Card links ---------- */

.card-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
/* Pico styles `ul li` directly, which beats inheritance from the ul. */
.card-links li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.card-links a { font-weight: 500; }
.link-local { font-style: italic; }

/* ---------- "How to access" collapsible ---------- */

.card-instructions { margin: 0; }
.card-instructions summary {
  cursor: pointer;
  color: var(--pico-primary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
}
.card-instructions summary::-webkit-details-marker { display: none; }
/* Reuse Pico's chevron icon; rotates when open. */
.chevron {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  flex: none;
  background: var(--pico-icon-chevron) center / contain no-repeat;
  transition: transform 0.15s ease;
}
.card-instructions[open] .chevron { transform: rotate(180deg); }
.card-instructions p { white-space: pre-wrap; margin: 0.5rem 0 0; }

/* ---------- Card admin footer ---------- */

.card-admin {
  margin-top: auto; /* pinned to the bottom so equal-height cards align */
  padding-top: 0.5rem;
  border-top: 1px solid var(--pico-muted-border-color);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.card-admin .btn,
.card-admin .inline { margin: 0; }

/* ---------- Tags ---------- */

.tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  vertical-align: middle;
}
.tag-public   { background: #e6f4ea; color: #1e7d34; }
.tag-private  { background: #f6e9fa; color: #7a2e8e; }
.tag-local    { background: #eaf1fd; color: #175cd3; }

[data-theme="dark"] .tag-public,
:root:not([data-theme="light"]) .tag-public { background: #12261a; color: #6fd58c; }
[data-theme="dark"] .tag-private,
:root:not([data-theme="light"]) .tag-private { background: #2a1430; color: #d9a3e8; }
[data-theme="dark"] .tag-local,
:root:not([data-theme="light"]) .tag-local { background: #14213a; color: #8ab4ff; }

/* ---------- Buttons (uniform for <a> and <button>) ---------- */

.btn {
  display: inline-block;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 6px;
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
  font-weight: inherit;
  text-decoration: none;
  color: inherit;
  background: transparent;
  cursor: pointer;
  line-height: 1.5;
  margin: 0;
  box-shadow: none;
  user-select: none;
}
.btn:hover { border-color: var(--pico-primary); color: var(--pico-primary); }
.btn-danger { color: var(--pico-del-color, #b42318); border-color: currentColor; }
.btn-danger:hover { color: var(--pico-del-color, #b42318); border-color: var(--pico-del-color, #b42318); }
.btn-quiet { border-color: transparent; color: var(--pico-muted-color); }
.btn-quiet:hover { color: inherit; border-color: transparent; }
.btn-primary {
  background: var(--pico-primary-background);
  border-color: var(--pico-primary-border);
  color: var(--pico-primary-inverse);
}
.btn-primary:hover {
  background: var(--pico-primary-hover);
  border-color: var(--pico-primary-hover);
  color: var(--pico-primary-inverse);
}

.inline { display: inline; margin: 0; }

.empty { color: var(--pico-muted-color); grid-column: 1 / -1; margin: 0; }
.error { color: var(--pico-del-color, #b42318); font-weight: 600; }
.notice {
  background: var(--pico-mark-background-color, #fffaeb);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
}

/* ---------- Login + service forms ---------- */

.login-box, .form-box { max-width: 34rem; margin: 3rem auto; }
.login-box form, .form-box form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 1rem;
}

.form-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.25rem;
}
.admin-actions { margin-top: 1.5rem; }

/* Checkbox labels: flex-center the box with its text (Pico leaves them
   baseline-aligned, which reads as off-center). */
label.check,
.link-local-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  width: fit-content;
  cursor: pointer;
}
label.check input[type="checkbox"],
.link-local-check input[type="checkbox"] {
  margin: 0;
  flex: none;
}

/* Link rows in the service form */
.links-fieldset { display: flex; flex-direction: column; gap: 0.5rem; }
.link-rows { display: flex; flex-direction: column; gap: 0.5rem; }
.link-row {
  display: grid;
  grid-template-columns: 1fr 2fr auto auto;
  gap: 0.5rem;
  align-items: center;
}
.link-row input[type="checkbox"] { margin: 0; }
.link-remove { padding: 0.2rem 0.55rem; line-height: 1.4; }

@media (max-width: 40rem) {
  .link-row { grid-template-columns: 1fr; }
  .link-local-check { justify-self: start; }
}