/* HEARTH settings panels (Media, Metadata, Users, TV). Firelit forms that
   inherit the same warm surfaces and ember accents as the rest of the app.
   All selectors are .pn- prefixed; modular + responsive + accessible. */

.pn { max-width: 62ch; padding-bottom: 1.6rem; }

/* ---- panel header ---- */
.pn-head { margin: 0 0 1.6rem; }
.pn-eyebrow {
  font-family: var(--f-ui); font-size: var(--step--1);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ember); font-weight: 600; margin: 0 0 .5rem;
}
.pn-title {
  font-family: var(--f-display); font-size: var(--step-2);
  color: var(--ink); margin: 0 0 .5rem; letter-spacing: -.01em;
}
.pn-lede { color: var(--ink-dim); font-size: var(--step-0); margin: 0; }

/* ---- notes / empty ---- */
.pn-note {
  color: var(--ink-dim); padding: 1rem 1.15rem; border: 1px dashed var(--line);
  border-radius: var(--radius); background: var(--bg-raise); font-size: var(--step--1);
}
.pn-note--warn { border-color: rgba(224,169,74,.45); color: var(--ink); }
.pn-empty {
  color: var(--ink-mute); font-size: var(--step--1); font-style: italic;
  padding: .9rem 1rem; border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--bg-raise); list-style: none;
}

/* ---- folder list ---- */
.pn-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.pn-row {
  display: flex; align-items: center; gap: .7rem;
  background: linear-gradient(155deg, var(--bg-hi), var(--bg-card));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .6rem .7rem .6rem .85rem;
}
.pn-row__ico { flex: none; font-size: 1.05rem; line-height: 1; }
.pn-row__label {
  flex: 1 1 auto; min-width: 0; color: var(--ink);
  font-family: ui-monospace, Menlo, monospace; font-size: var(--step--1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pn-x {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg-raise);
  color: var(--ink-mute); font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.pn-x:hover { color: var(--ember-hot); border-color: var(--ember-deep); background: var(--bg-hi); }

/* ---- add row ---- */
.pn-add { display: flex; gap: .55rem; align-items: stretch; flex-wrap: wrap; }
.pn-add .pn-input { flex: 1 1 220px; min-width: 0; }

/* ---- inputs / fields ---- */
.pn-field { margin: 0 0 1.1rem; }
.pn-label {
  display: block; font-size: var(--step--1); color: var(--ink-dim);
  letter-spacing: .04em; margin: 0 0 .4rem;
}
.pn-input {
  width: 100%; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .62rem .8rem; font-size: var(--step-0);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.pn-input::placeholder { color: var(--ink-mute); }
.pn-input:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px var(--glow); }

.pn-input-wrap { display: flex; gap: .5rem; align-items: stretch; }
.pn-input-wrap .pn-input { flex: 1 1 auto; }
.pn-reveal {
  flex: none; background: var(--bg-raise); border: 1px solid var(--line);
  color: var(--ink-dim); border-radius: var(--radius-sm); padding: 0 .85rem;
  font-size: var(--step--1); cursor: pointer;
}
.pn-reveal:hover { color: var(--ink); border-color: var(--ember-deep); }

/* ---- buttons ---- */
.pn-actions { display: flex; gap: .6rem; margin: 0 0 1.2rem; flex-wrap: wrap; }
.pn-btn {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .58rem 1.1rem; font-size: var(--step-0); font-weight: 600;
  cursor: pointer; background: var(--bg-raise); color: var(--ink);
  transition: transform .12s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
}
.pn-btn:hover { transform: translateY(-1px); }
.pn-btn:disabled { opacity: .55; cursor: default; transform: none; }
.pn-btn--primary {
  background: linear-gradient(160deg, var(--ember-soft), var(--ember-hot));
  color: #241109; border-color: transparent; box-shadow: 0 6px 18px var(--glow-hot);
}
.pn-btn--primary:hover { box-shadow: 0 9px 24px var(--glow-hot); }
.pn-btn--ghost { background: var(--bg-hi); }
.pn-btn--ghost:hover { border-color: var(--ember-deep); }

/* ---- hint blocks ---- */
.pn-hint {
  margin-top: 1.3rem; padding: 1rem 1.1rem; border-radius: var(--radius);
  background: var(--bg-raise); border: 1px solid var(--line-soft);
  color: var(--ink-dim); font-size: var(--step--1);
}
.pn-hint p { margin: 0 0 .55rem; }
.pn-hint p:last-child { margin-bottom: 0; }
.pn-hint strong { color: var(--ink); }
.pn-hint__coming { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.pn-tag {
  flex: none; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ember); border: 1px solid var(--ember-deep); border-radius: 999px;
  padding: .12rem .5rem; font-weight: 700;
}
.pn-link { color: var(--ember); text-decoration: none; border-bottom: 1px solid var(--glow); }
.pn-link:hover { color: var(--ember-soft); border-bottom-color: var(--ember); }

/* ---- users ---- */
.pn-user {
  display: flex; align-items: center; gap: .9rem; margin: 0 0 1.3rem;
  background: linear-gradient(155deg, var(--bg-hi), var(--bg-card));
  border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem;
}
.pn-user__avatar {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--f-display);
  font-size: 1.3rem; color: #241109; font-weight: 700;
  background: linear-gradient(150deg, var(--ember-soft), var(--ember-hot));
}
.pn-user__name { font-family: var(--f-display); font-size: var(--step-1); color: var(--ink); }
.pn-user__level { display: flex; align-items: center; gap: .5rem; margin-top: .2rem; }
.pn-user__you { font-size: var(--step--1); color: var(--ink-mute); }
.pn-chip {
  font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  padding: .16rem .55rem; border-radius: 999px; border: 1px solid var(--line);
}
.pn-chip--admin { color: var(--ember); border-color: var(--ember-deep); background: rgba(240,161,90,.1); }
.pn-chip--view { color: var(--good); border-color: rgba(143,183,130,.4); background: rgba(143,183,130,.08); }

.pn-levels { display: grid; gap: .55rem; margin: 0 0 .3rem; }
.pn-level {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--bg-raise); padding: .7rem .9rem;
}
.pn-level__name { color: var(--ink); font-weight: 600; margin-bottom: .15rem; }
.pn-level__desc { color: var(--ink-dim); font-size: var(--step--1); }

/* ---- TV ---- */
.pn-current {
  display: flex; align-items: center; gap: .7rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(155deg, var(--bg-hi), var(--bg-card)); padding: .7rem .85rem;
}
.pn-current__none { color: var(--ink-mute); font-size: var(--step--1); font-style: italic; }
.pn-current__dot {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--good); box-shadow: 0 0 8px rgba(143,183,130,.7);
}
.pn-current__meta { flex: 1 1 auto; min-width: 0; }
.pn-current__name { color: var(--ink); font-weight: 600; }
.pn-current__ip {
  color: var(--ink-mute); font-family: ui-monospace, Menlo, monospace; font-size: var(--step--1);
}
.pn-current__badge {
  flex: none; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--good); font-weight: 700;
}

.pn-tvlist { display: grid; gap: .5rem; margin-top: .3rem; }
.pn-tv {
  display: flex; align-items: center; gap: .7rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-card); padding: .6rem .7rem .6rem .85rem;
}
.pn-tv__ico { flex: none; font-size: 1.1rem; line-height: 1; }
.pn-tv__meta { flex: 1 1 auto; min-width: 0; }
.pn-tv__name { color: var(--ink); font-weight: 600; }
.pn-tv__ip {
  color: var(--ink-mute); font-family: ui-monospace, Menlo, monospace; font-size: var(--step--1);
}

/* ---- narrow screens ---- */
@media (max-width: 520px) {
  .pn-add .pn-btn--primary { flex: 1 1 100%; }
  .pn-user { flex-wrap: wrap; }
}