/* Storyline inputs, auto roll, player notes, sync status, admin panel. */

/* sync status in the masthead */
#sync-status {
  align-self: center;
  font: 400 0.75rem var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 4px 10px;
  border: 1px solid var(--line);
}
#sync-status:empty { display: none; }
#sync-status[data-status="saved"] { color: var(--bone); border-color: var(--bone); }
#sync-status[data-status="saving"] { color: var(--red); border-color: var(--red); }
#sync-status[data-status="local"] { color: var(--mute); border-style: dashed; }

/* storyline: your own text next to rolled entries */
.own {
  display: block;
  margin-top: 12px;
  font-size: 0.92rem;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.own textarea { margin-top: 6px; font-size: 1.02rem; text-transform: none; letter-spacing: 0; }
.own-line { margin-top: 6px; font-size: 0.95rem; }
.entry { flex-direction: column; align-items: stretch; gap: 6px; }
.entry-row { display: flex; gap: 10px; align-items: center; }
.entry-row select { flex: 1; }
.wide-field { flex: 1 1 100%; }
.entry-enemy .field.wide-field input { font-size: 0.95rem; }

/* skills: auto roll */
.auto { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.auto .hint { margin: 0; max-width: 380px; }

/* player notes on the final sheet page */
.player-notes { margin-top: 18px; }
.write-hint { font-size: 0.94rem; color: #4d443d; margin: 0 0 8px; }
.write-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.write-box { min-width: 0; }
.write-label {
  margin: 0 0 4px;
  font: 700 0.74rem var(--body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}
textarea.ruled {
  display: block;
  width: 100%;
  min-height: 90px;
  padding: 4px 6px;
  border: 1px solid var(--paper-ink);
  background-color: #f6f1e7;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 23px, #c9bfae 23px, #c9bfae 24px);
  background-attachment: local;
  line-height: 24px;
  font-size: 14px;
  color: var(--paper-ink);
  resize: vertical;
}
textarea.ruled:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.sheet .write-box textarea.ruled { font-family: var(--body); }

/* ---------- width safety ----------
   A <select> is as wide as its longest option unless told otherwise, which
   pushed lifepath cards past the viewport. Clamp controls and let flex/grid
   children shrink. */
.panel, .lp-card, .pcard, .stat-card, .item, .entry, .role-card, .write-box, .qchip { min-width: 0; }
.lp-grid > *, .grid-2 > *, .split > * { min-width: 0; }

select, input, textarea { min-width: 0; max-width: 100%; }

.lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.choose { flex-wrap: wrap; min-width: 0; }
.choose select { width: auto; min-width: 0; max-width: 100%; flex: 1 1 180px; }

.entry-row { flex-wrap: wrap; }
.entry-row select, .entry select { flex: 1 1 200px; min-width: 0; max-width: 100%; }
.entry-btns { flex: 0 0 auto; }
.add-row { flex-wrap: wrap; }
.add-row select { flex: 1 1 200px; min-width: 0; }

/* long words and unbroken strings wrap instead of widening a card */
.result strong, .result span, .lp-v, .lp-desc, .ability, .lead,
.pcard-ability, .sheet-handle, .sk-n, .item-list li, .write-hint { overflow-wrap: anywhere; }

/* Sub-pixel rounding in grid gaps can add a stray 1px of horizontal scroll.
   clip (unlike hidden) does not create a scroll container, so the sticky
   masthead keeps working. */
body { overflow-x: clip; }

/* ---------- mobile ---------- */

@media (max-width: 1000px) {
  /* minmax(0,…) lets the sheet's wide tables scroll inside their card instead of widening the page */
  .split, .s-body { grid-template-columns: minmax(0, 1fr); }
  .s-body > *, .s-side, .s-block { min-width: 0; }
}

@media (max-width: 900px) {
  .lp-grid,
  .sheet-back .lp-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-wide { grid-column: auto; }
}

@media (max-width: 640px) {
  .masthead { padding: 10px 12px 0; }
  main { padding: 18px 12px 44px; }

  .brand { gap: 4px 10px; }
  /* two buttons on one row instead of three wrapped rows */
  .top-actions {
    margin-left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .top-actions .btn { width: 100%; }
  #sync-status { grid-column: 1 / -1; justify-self: start; font-size: 0.7rem; padding: 2px 6px; }
  .pulse { height: 16px; margin-top: 2px; }

  /* All steps visible at once: no step can hide off the right edge. */
  .rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
    padding-bottom: 10px;
  }
  .rail-step {
    padding: 8px 6px;
    gap: 6px;
    font-size: 0.84rem;
    letter-spacing: 0.02em;
    justify-content: flex-start;
  }
  .rail-step .n { font-size: 0.7rem; }
  .rail-step .ts { display: inline; }
  .rail-step .t { display: none; }

  /* comfortable touch targets */
  .btn { min-height: 44px; padding: 12px 18px; }
  .btn-small { min-height: 38px; padding: 8px 12px; }
  .btn-quiet { min-height: 38px; }
  .btn-step { min-height: 44px; }
  .qchip { min-height: 44px; }

  .portrait-row { flex-wrap: wrap; }
  .lp-actions { gap: 8px; }
  .lp-actions > .btn { flex: 1 1 140px; }
  .entry-row .btn, .entry-btns .btn { flex: 0 0 auto; }
  .own textarea, .lp-card textarea { font-size: 16px; }

  .stat-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .item-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .sheet-toolbar .btn { flex: 1 1 auto; }
  .sheet-page { padding: 14px 12px 18px; font-size: 15px; }
  .sheet-head { gap: 10px; }
  .sheet-portrait { width: 70px; height: 86px; }
  .s-stats { gap: 4px; }
  .s-tile { padding: 6px 2px 4px; }
  .s-val { font-size: 1.35rem; }
  .s-vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-vitals .v:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Four micro-columns cannot fit "Atributo/Nivel/Total" labels; the rows read
     fine without a header (stat code and numbers are self-explanatory). */
  .skill-head { display: none; }
  .skill-row {
    grid-template-columns: minmax(0, 1fr) 54px 50px 40px;
    gap: 4px;
    padding: 8px 4px;
    border-top: 1px solid var(--line);
  }
  .skill-stat { font-size: 0.7rem; letter-spacing: 0; }
  .skill-list { border-top: 1px solid var(--line); }
  .sk-list li { grid-template-columns: minmax(0, 1fr) 42px 30px 38px; gap: 4px; padding: 4px 2px; }
  .portrait-empty { font-size: 0.56rem; letter-spacing: 0.04em; }
  .pool-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pool-row .btn { width: 100%; }
  .sk-tot { font-size: 0.95rem; }
  .sk-stat { font-size: 0.82rem; }
  /* wide tables scroll inside their card instead of pushing the page */
  .w-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .w-table { min-width: 430px; }
  .write-grid { gap: 10px; }
  textarea.ruled { font-size: 16px; }
}

@media (max-width: 420px) {
  main { padding: 16px 10px 40px; }
  .display { font-size: 1.4rem; }
  .display-sm { font-size: 1.05rem; }
  .wordmark { font-size: 0.95rem; }
  .product { display: none; }
  .skill-head, .skill-row { grid-template-columns: minmax(0, 1fr) 48px 46px 38px; gap: 4px; }
  .skill-stat { font-size: 0.64rem; }
  .skill-name .d { font-size: 0.9rem; }
  .s-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .s-code { font-size: 0.58rem; }
  .write-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-line { grid-template-columns: minmax(0, 1fr); }
  .pcard-facts { gap: 6px; }
  .admin-table { min-width: 620px; }
}

/* admin */
body.admin main { max-width: 1100px; }
.login { max-width: 420px; margin: 40px auto; }
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-form .field { margin-bottom: 0; }
.error { color: #ff8a80; margin: 0; }
.list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.list-head .input { max-width: 320px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.admin-table { width: 100%; border-collapse: collapse; background: var(--panel); }
.admin-table th {
  text-align: left;
  padding: 10px 12px;
  background: var(--red);
  color: #130c0c;
  font: 700 0.78rem var(--body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.admin-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.admin-table tr:nth-child(even) td { background: var(--panel-2); }
.admin-table .handle { font: 400 1.05rem var(--display); }
.admin-table .actions { display: flex; flex-wrap: wrap; gap: 6px; }
.btn-danger { background: #5a1417; color: var(--bone); }
.btn-danger:hover { background: #7d1d21; }

/* Admin: a 5-column table can't work on a phone, so each row becomes a card. */
@media (max-width: 720px) {
  .table-wrap { border: 0; overflow: visible; }
  .admin-table { min-width: 0; display: block; background: transparent; }
  .admin-table thead { display: none; }
  .admin-table tbody { display: block; }
  .admin-table tr {
    display: block;
    background: var(--panel);
    border: 1px solid var(--line);
    border-top: 3px solid var(--red);
    padding: 12px 14px;
    margin-bottom: 12px;
  }
  .admin-table tr:nth-child(even) td { background: transparent; }
  .admin-table td { display: block; border: 0; padding: 2px 0; }
  .admin-table td.handle { font-size: 1.2rem; }
  .admin-table td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--mute);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .admin-table td.actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .admin-table td.actions .btn { flex: 1 1 auto; }
}

/* Print: the page is narrower than 1000px, so the mobile single-column rules
   apply. Restore the real sheet layout. This file loads after styles.css,
   hence the overrides live here rather than in the print block there. */
@media print {
  .s-body { grid-template-columns: 1.05fr 1fr; }
  .sheet-back .lp-grid { grid-template-columns: 1fr 1fr; }
  .write-grid { grid-template-columns: 1fr 1fr; }
  .lp-line { grid-template-columns: 140px 1fr; }
  .skill-head { display: grid; }
}