/* ----------------------------------------
   BASE ELEMENT STYLES
   Default styling for HTML elements using design tokens.
   Only applies within views that have opted into the new design system.
   Scoped under .pw-layout to avoid conflicts with Pico-based views.
---------------------------------------- */

.pw-layout {
  font-family: var(--pw-font);
  color: var(--pw-text);
  background: var(--pw-bg);
  line-height: var(--pw-leading-normal);
}

/* Override Pico's .container padding reset at breakpoints */
main.pw-layout {
  padding: var(--pw-space-4) var(--pw-space-6) var(--pw-space-8);
}

.pw-layout h1,
.pw-layout h2,
.pw-layout h3 {
  font-weight: var(--pw-weight-semibold);
  letter-spacing: var(--pw-tracking-tight);
  line-height: var(--pw-leading-tight);
}

.pw-layout h1 { font-size: var(--pw-text-3xl); }
.pw-layout h2 { font-size: var(--pw-text-xl); }
.pw-layout h3 { font-size: var(--pw-text-lg); }

.pw-layout a {
  color: var(--pw-primary);
  text-decoration: none;
}

.pw-layout a:hover {
  color: var(--pw-primary-hover);
  text-decoration: underline;
}

/* --- Buttons --- */
.pw-layout button,
.pw-layout [type="button"],
.pw-layout [type="submit"],
.pw-layout [type="reset"],
.pw-layout [role="button"] {
  display: inline-flex;
  align-items: center;
  gap: var(--pw-space-2);
  font-family: var(--pw-font);
  font-size: var(--pw-text-base);
  font-weight: var(--pw-weight-medium);
  padding: 0.45rem 1.25rem;
  border: 1px solid var(--pw-primary);
  border-radius: var(--pw-radius-full);
  background: var(--pw-primary);
  color: var(--pw-primary-inverse);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.pw-layout button:hover,
.pw-layout [type="button"]:hover,
.pw-layout [type="submit"]:hover,
.pw-layout [type="reset"]:hover,
.pw-layout [role="button"]:hover {
  background: var(--pw-primary-hover);
  border-color: var(--pw-primary-hover);
  color: var(--pw-primary-inverse);
}

.pw-layout :is(button, [type="button"], [type="submit"], [type="reset"], [role="button"]).outline {
  background: transparent;
  border-color: var(--pw-primary);
  color: var(--pw-primary);
}

.pw-layout :is(button, [type="button"], [type="submit"], [type="reset"], [role="button"]).outline:hover {
  background: transparent;
  border-color: var(--pw-primary-hover);
  color: var(--pw-primary-hover);
}

/* --- Form fields --- */
.pw-layout label {
  display: block;
  font-size: var(--pw-text-base);
  font-weight: var(--pw-weight-medium);
  margin-bottom: var(--pw-space-1);
}

.pw-layout input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
.pw-layout select,
.pw-layout textarea {
  display: block;
  width: 100%;
  font-family: var(--pw-font);
  font-size: var(--pw-text-base);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--pw-border);
  border-radius: var(--pw-radius-md);
  background: var(--pw-input-bg);
  color: var(--pw-text);
  margin-bottom: var(--pw-space-4);
  transition: border-color 0.15s;
}

/* Monospace readonly display field (e.g. sign-in link URL).
   Specificity matches the input rule above: (0,0,3,1). */
.pw-layout input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]).pw-monospace-display {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--pw-text-sm);
  color: var(--pw-text-muted);
  margin-bottom: var(--pw-space-2);
}

.pw-layout input:focus,
.pw-layout select:focus,
.pw-layout textarea:focus {
  outline: none;
  border-color: var(--pw-primary);
  box-shadow: 0 0 0 3px var(--pw-primary-focus);
}

/* Required field indicator */
.pw-layout label:has(+ input[required])::after,
.pw-layout label:has(+ select[required])::after,
.pw-layout label:has(+ textarea[required])::after {
  content: " *";
  color: var(--pw-danger);
}

/* --- Tables --- */
.pw-layout table {
  width: 100%;
  border-collapse: collapse;
}

.pw-layout th {
  text-align: left;
  font-size: var(--pw-text-sm);
  font-weight: var(--pw-weight-medium);
  color: var(--pw-text-muted);
  padding: var(--pw-space-2) var(--pw-space-3);
  border-bottom: 2px solid var(--pw-border);
}

.pw-layout td {
  padding: var(--pw-space-3);
  border-bottom: 1px solid var(--pw-border);
  font-size: var(--pw-text-base);
}

.pw-layout tbody tr:last-child td {
  border-bottom: none;
}

/* --- Description lists --- */
.pw-layout dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.25rem;
}

.pw-layout dt {
  color: var(--pw-text-muted);
  font-size: var(--pw-text-base);
  font-weight: var(--pw-weight-medium);
  padding-top: 0.1rem;
}

.pw-layout dd {
  margin: 0;
}

/* --- Utility --- */
.pw-layout .text-muted {
  color: var(--pw-text-muted);
}