/* ==========================================================================
   Mythic Dashboard - Account Detail additions
   Appended to dash.css via <link> in phase 2.
   ========================================================================== */

/* Account header */
.acct-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 22px 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  flex-wrap: wrap; gap: 16px;
}
.acct-head-title {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.acct-head-title h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500; font-size: 28px; margin: 0;
  color: var(--ink); letter-spacing: -0.01em;
}
.acct-head-urls a {
  font-size: 13px; color: var(--blue);
  margin-right: 14px;
}
.acct-head-urls a:hover { text-decoration: underline; }

.card-inner {
  padding: 22px 26px;
}

/* Active plan strip */
.plan-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 26px;
}
@media (max-width: 900px) { .plan-stats { grid-template-columns: repeat(2, 1fr); } }
.plan-stat-l {
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  font-weight: 700;
  margin-bottom: 4px;
}
.plan-stat-v {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500; font-size: 24px;
  color: var(--ink); letter-spacing: -0.005em;
}

/* Post-an-update tabbar + panes */
.tabbar {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.tabbar .tab {
  padding: 9px 16px 11px;
  border: none; background: transparent;
  color: var(--text-2);
  font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.tabbar .tab:hover { color: var(--ink); }
.tabbar .tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--gold);
}
.pane { display: none; }
.pane.is-active { display: block; }
.pane-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 900px) { .pane-grid { grid-template-columns: repeat(2, 1fr); } }
.form-row-check {
  display: flex; align-items: flex-end; padding-bottom: 8px;
}
.check-inline {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--text);
}

/* Weekly calendar */
.wcal { display: flex; flex-direction: column; gap: 22px; }
.wcal-month {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
  padding: 16px 18px;
}
.wcal-month-h {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500; font-size: 19px;
  margin: 0 0 12px;
  color: var(--ink); letter-spacing: -0.005em;
}
.wcal-week {
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.wcal-week-h {
  font-size: 12px; font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.wcal-empty { color: var(--muted); font-size: 12.5px; font-style: italic; }
.wcal-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.wcal-blog-h {
  margin: 10px 0 4px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); font-weight: 700;
}
.wcal-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px;
  color: var(--ink);
  padding: 3px 0;
}
.wcal-item.is-done { color: var(--muted); }
.wcal-item.is-done .wcal-title { text-decoration: line-through; }
.wcal-check {
  display: inline-block; width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  flex-shrink: 0;
}
.wcal-check.on {
  background: var(--green); border-color: var(--green);
}

/* Task cards */
.task-list { display: flex; flex-direction: column; gap: 10px; }
.task-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color .15s;
}
.task-card:hover { border-color: var(--gold-mid); }
.task-card.is-reopened {
  border-left: 3px solid var(--red);
  background: rgba(176,65,62,0.03);
}
.task-card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
}
.task-title {
  font-weight: 600; color: var(--ink);
  font-size: 14.5px;
  margin-bottom: 6px;
}
.task-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 12px;
}
.task-body {
  margin-top: 8px; color: var(--text);
  font-size: 13.5px; line-height: 1.55;
  white-space: pre-wrap;
}
.task-url {
  margin-top: 6px;
  font-size: 12px; color: var(--blue);
  word-break: break-all;
}
.task-actions .btn { padding: 6px 14px; font-size: 12.5px; }

/* Chips */
.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #e4e2db; color: #6a6a6a;
}
.chip-seo              { background: rgba(201,163,92,0.18);  color: #7a5622; }
.chip-digital_strategy { background: rgba(134,90,171,0.18);  color: #563475; }
.chip-ppc              { background: rgba(198,88,88,0.18);   color: #8f2e2e; }
.chip-dev              { background: rgba(74,109,165,0.18);  color: #2c4f89; }
.chip-blog             { background: rgba(47,125,79,0.18);   color: #22633f; }
.chip-owner            { background: rgba(198,125,44,0.18);  color: #955a12; }
.chip-reopened         { background: rgba(176,65,62,0.16);   color: var(--red); }

/* Done list */
.done-list {
  list-style: none; padding: 0; margin: 0;
}
.done-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 13.5px; color: var(--text-2);
}
.done-list li:last-child { border-bottom: none; }
.done-list li span:nth-child(2) { text-decoration: line-through; }
.done-check {
  display: inline-block; width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--green);
  position: relative;
  flex-shrink: 0;
}
.done-check::after {
  content: ''; position: absolute;
  left: 3px; top: 6px;
  width: 4px; height: 7px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  transform-origin: center;
}

/* Row-action buttons (edit / delete / unpublish on tbl rows).
 *
 * IMPORTANT: do NOT set `display: flex` on the <td> itself. A flex
 * table cell drops out of the table row's height-sync, so when the
 * row is taller than the Actions cell's own content (e.g. a Blog
 * Articles row where the title wraps to two lines), only the Actions
 * cell stays at 62px while the other cells stretch to 118px. The
 * unpainted vertical gap under the Actions cell then shows the
 * .tbl-wrap's white background straight through, producing a
 * rectangular white block on the far right of every affected row.
 * (Confirmed via DevTools on NC Coastal's Blog Articles table.)
 *
 * Fix: right-align + no-wrap on the cell, then lay the buttons out
 * as inline-block children with a 6px inter-item margin. The cell
 * stays a real `display: table-cell` and inherits the row's height,
 * so the hover background paints edge-to-edge and no gutter can
 * show through.
 */
.row-actions {
  text-align: right;
  white-space: nowrap;
}
.row-actions > * {
  display: inline-block;
  vertical-align: middle;
}
.row-actions > * + * {
  margin-left: 6px;
}
.row-actions .inline-form {
  /* Preserved from the original rule so form-wrapped buttons have
   * zero extra padding/margin and align with plain <a> buttons.
   * display is now inline-block via the `.row-actions > *` rule above. */
  margin: 0;
  padding: 0;
}
.row-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-2);
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
}
.row-btn:hover {
  background: rgba(201,163,92,0.12);
  border-color: rgba(201,163,92,0.35);
  color: #7a5622;
}
.row-btn.danger:hover {
  background: rgba(176,65,62,0.10);
  border-color: rgba(176,65,62,0.35);
  color: var(--red);
}
.btn-sm {
  padding: 6px 12px !important;
  font-size: 12.5px !important;
}
.hours-edit-row .form-row label {
  display: block;
  margin-bottom: 3px;
  color: var(--text-2);
  font-weight: 500;
}
.hours-edit-row input,
.hours-edit-row select {
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

/* Clickable rows (invoice list) */
.tbl tr.clickable-row { transition: background 0.15s; }
.tbl tr.clickable-row:hover td { background: rgba(201,163,92,0.08); }

/* Weekly-calendar circle is now a <button> — reset browser defaults so it
   still looks like the little bubble it used to be, but is now clickable. */
button.wcal-check {
  background: transparent;
  padding: 0; margin: 0;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .1s;
}
button.wcal-check:hover {
  border-color: var(--gold-mid);
  background: rgba(201,163,92,0.15);
}
button.wcal-check.on {
  background: var(--green);
  border-color: var(--green);
}
button.wcal-check.on:hover {
  background: rgba(47,125,79,0.7);
  border-color: rgba(47,125,79,0.7);
}

/* ─── Account Edit — Site Pages review list ───────────────────────────────
   The Site Pages queue used to be a 7-column table; the dense grid crowded
   long paths and titles into narrow cells and read as a spreadsheet. The
   new presentation treats each page as a review ITEM with two zones:
   a header row (path + title on the left, actions on the right) and a
   metadata row of labeled chips (Type / Primary service / Primary area /
   Link target / Confidence). Items stack naturally on tablet and mobile,
   so we no longer need a min-width horizontal-scroll fallback. */

/* Wider card so long paths/titles have room to breathe on desktop. */
.mythic-sitepages-card {
  max-width: min(1400px, calc(100vw - 64px));
}
@media (max-width: 900px) {
  .mythic-sitepages-card { max-width: 100%; }
}

/* Review list — hairline dividers between items, no table chrome. */
.mri-group-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  margin: 6px 0 8px;
}
.mri-group-help {
  color: var(--text-2);
  font-size: 12px;
  margin: 0 0 8px;
  line-height: 1.45;
}
.mythic-review-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-2);
}
.mythic-review-list > li + li { border-top: 1px solid var(--line-2); }

/* Individual review item. Vertical stack: header row + metadata row. */
.mri {
  display: block;
  padding: 16px 4px;
}
.mri-head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}
.mri-headtext {
  min-width: 0;          /* required so long <code> can wrap in a flex row */
  flex: 1 1 320px;
}
.mri-path {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
  word-break: break-word;
  line-height: 1.35;
}
.mri-title {
  color: var(--text-2);
  font-size: 13px;
  margin-top: 3px;
  line-height: 1.45;
  word-break: break-word;
}
.mri-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
.mri-actions > form { margin: 0; display: inline-flex; }

/* Metadata chip row. Each chip is a label + value pair. */
.mri-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.4;
}
.mri-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.mri-chip-l {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}
.mri-chip-v {
  color: var(--ink);
  font-weight: 500;
  font-size: 12.5px;
}
.mri-chip-v.is-em { font-weight: 600; }
.mri-chip-v.is-muted { color: var(--muted); font-weight: 400; }

/* Confidence pill — small colored dot for glanceability, PLUS text label
   so it never depends on color alone. */
.mri-conf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mri-conf .mri-conf-dot {
  width: 7px; height: 7px; border-radius: 999px;
  display: inline-block;
}
.mri-conf.is-high   { background:#eaf3ec; color:#1b5e20; }
.mri-conf.is-high   .mri-conf-dot { background:#2f7d4f; }
.mri-conf.is-medium { background:#fbf3dc; color:#8d6e00; }
.mri-conf.is-medium .mri-conf-dot { background:#c67d2c; }
.mri-conf.is-low    { background:#f6e2e6; color:#88283e; }
.mri-conf.is-low    .mri-conf-dot { background:#b0413e; }

/* Outlined button styling for review actions. Reuses the design system's
   .btn + .btn-outline (transparent → ink-on-hover) and adds an accessible
   focus-visible ring. Sized down for row context. */
.btn.mri-btn {
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
}
.btn.mri-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Confirmed item — same shell, quieter treatment (reviewed metadata line
   in place of proposal chips) so the two sections read as one language. */
.mri-confirmed .mri-meta { color: var(--text-2); }
.mri-reviewed {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

@media (max-width: 720px) {
  .mri-actions { width: 100%; justify-content: flex-start; }
}

/* Task type: Review (added 2026-09-18). Teal, distinct from the gold SEO chip,
   the purple Digital Strategy chip and the blue DEV chip at the same opacity so
   the row reads as one family. Contrast checked against the chip background. */
.chip-review { background: rgba(38,124,124,0.18); color: #1b5c5c; }