/* ===================================================
   GH Humaniser page (loads after index.css)
   IDs and classes used by humaniser.js are unchanged.
   =================================================== */

.page-humaniser { min-height: 100vh; display: flex; flex-direction: column; }
.hz-main { flex: 1 0 auto; }

.humaniser-tab { font: inherit; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.humaniser-tab:hover { color: var(--forest); }
.tab-dot { display: block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tab-dot.original { background: var(--forest); }
.tab-dot.humanised { background: var(--terra); }
.tab-dot.changes { background: #D9A13B; }

.humaniser-view textarea { display: block; width: 100%; font: inherit; color: var(--forest); border: none; background: transparent; resize: none; outline: none; }
.humaniser-view textarea::placeholder { color: #8A958F; opacity: 1; }
.changes-content { overflow-y: auto; color: var(--forest); white-space: pre-wrap; word-wrap: break-word; }
.changes-content mark { background: var(--blush-light); color: var(--forest); border-radius: 3px; padding: 0 2px; }
.changes-empty { color: #8A958F; }

.humaniser-primary { font: inherit; font-weight: 700; border-radius: 999px; border: 2px solid var(--forest); background: var(--terra); color: #FFFFFF; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.humaniser-primary:hover { transform: translate(-1px, -1px); }
.humaniser-primary:disabled { cursor: progress; opacity: .75; transform: none; }
.humaniser-level select { font: inherit; font-weight: 600; border-radius: 999px; border: 2px solid var(--forest); background-color: var(--paper); color: var(--forest); cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231B312C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.humaniser-level { display: block; }
.humaniser-secondary { font: inherit; font-weight: 700; border-radius: 999px; border: 2px solid var(--forest); background: transparent; color: var(--forest); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.humaniser-secondary:hover:not(:disabled) { background: var(--forest); color: var(--cream); }
.humaniser-secondary:disabled { opacity: .45; cursor: not-allowed; }

.humaniser-status { color: var(--muted); }
.humaniser-status.is-error { color: var(--terra); font-weight: 600; }
.humaniser-status.is-success { color: var(--forest); font-weight: 600; }

.hz-words { color: var(--muted); }
.hz-words strong { color: var(--forest); }
.premium-pointer .pp-lead { color: var(--muted); }
.premium-pointer a { font-weight: 700; color: var(--terra); text-decoration: none; border-radius: 999px; transition: background-color .2s ease, color .2s ease, padding .2s ease; }
.premium-pointer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.premium-pointer.limit-reached a { background: var(--terra); color: #FFFFFF; padding: 8px 16px; text-decoration: none; animation: hz-nudge 1.2s ease 2; }
@keyframes hz-nudge { 0%, 100% { transform: none; } 30% { transform: translateY(-3px); } 60% { transform: translateY(1px); } }

.hz-note { display: flex; align-items: center; color: var(--muted); }
.hz-footer a { color: inherit; }

/* ---------- Desktop ---------- */
@media (min-width: 1200px) {
  .hz-head { max-width: 1440px; width: 100%; margin: 0 auto; padding: 64px 72px 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
  .hz-head-copy { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }
  .hz-head h1 { font-family: var(--serif); font-weight: 800; font-size: 72px; line-height: 1; letter-spacing: -0.03em; }
  .hz-sub { font-size: 21px; line-height: 1.5; color: var(--ink-2); }

  .hz-blocks { position: relative; width: 300px; height: 150px; flex-shrink: 0; }
  .hz-blocks .blk { --d: 14px; --h: 44px; --bw: 2px; position: absolute; left: 0; bottom: 0; height: 58px; }
  .hz-blocks .blk > .f { padding: 0 16px; font-size: 15px; font-weight: 600; }
  .hz-b1 { position: absolute; left: 0; bottom: 0; width: 280px; height: 58px; }
  .hz-b1 .blk { --w: 264px; width: 280px; }
  .hz-b2 { position: absolute; left: 30px; bottom: 60px; width: 250px; height: 58px; transform: rotate(-4deg); }
  .hz-b2 .blk { --w: 234px; width: 250px; }
  .hz-b2 .blk > .f { font-weight: 700; }

  .hz-tool { max-width: 1440px; margin: 0 auto; padding: 40px 72px 80px; }
  .hz-card { background: var(--paper); border: 2px solid var(--forest); border-radius: 22px; box-shadow: 8px 8px 0 var(--forest); overflow: hidden; display: flex; flex-direction: column; }
  .humaniser-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1.5px solid var(--line); }
  .humaniser-tab { border-bottom: 4px solid transparent; padding: 22px; font-size: 18px; font-weight: 600; color: var(--muted); gap: 10px; }
  .humaniser-tab.active { border-bottom-color: var(--terra); font-weight: 700; color: var(--forest); }
  .humaniser-view textarea { font-size: 20px; line-height: 1.7; padding: 36px 44px; height: 412px; }
  .changes-content { font-size: 20px; line-height: 1.7; padding: 36px 44px; height: 412px; }

  .hz-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 28px; border-top: 1.5px solid var(--line); background: var(--card); }
  .hz-actions { display: flex; align-items: center; gap: 12px; }
  .humaniser-primary { font-size: 18px; padding: 15px 30px; box-shadow: 3px 3px 0 var(--forest); }
  .humaniser-primary:hover { box-shadow: 4px 4px 0 var(--forest); }
  .humaniser-level select { font-size: 17px; height: 56px; padding: 0 32px 0 20px; background-position: right 12px center; }
  .humaniser-secondary { font-size: 17px; padding: 14px 24px; }
  .humaniser-status { flex: 1; font-size: 15px; text-align: center; }
  .hz-metrics { display: flex; align-items: center; gap: 26px; font-size: 16px; }
  .hz-words { display: flex; gap: 8px; align-items: baseline; }
  .hz-words strong { font-size: 20px; }

  .hz-note { gap: 10px; margin-top: 22px; font-size: 16px; }

  .hz-footer { flex-shrink: 0; padding: 30px 72px; border-top: 1.5px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 32px; font-size: 15px; color: var(--muted); }
  .hz-footer-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
  .hz-footer-brand img { width: 36px; height: 36px; border-radius: 8px; }
  .hz-footer-brand span { font-family: var(--serif); font-weight: 700; font-size: 19px; color: var(--forest); }
  .hz-footer-text a { text-decoration: none; }
  .hz-footer-text a:hover { color: var(--terra); }
}

/* ---------- Mobile and tablet ---------- */
@media (max-width: 1199px) {
  .hz-head { max-width: 720px; margin: 0 auto; padding: 26px 20px 0; }
  .hz-head-copy { display: flex; flex-direction: column; gap: 10px; }
  .hz-head .eyebrow { font-size: 12px; letter-spacing: 0.18em; }
  .hz-head h1 { font-family: var(--serif); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -0.02em; }
  .hz-sub { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }

  .hz-tool { max-width: 720px; margin: 0 auto; padding: 20px 20px 40px; }

  /* One grid: the bordered card (rows 1 to 3) and the actions below it */
  .hz-card { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
  .hz-card::before { content: ''; grid-column: 1 / -1; grid-row: 1 / 4; background: var(--paper); border: 2px solid var(--forest); border-radius: 18px; box-shadow: 5px 5px 0 var(--forest); z-index: -1; }
  .humaniser-tabs { grid-column: 1 / -1; grid-row: 1; margin: 2px 2px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1.5px solid var(--line); }
  .humaniser-tab { border-bottom: 3px solid transparent; padding: 14px 4px; font-size: 14.5px; font-weight: 600; color: var(--muted); }
  .humaniser-tab.active { border-bottom-color: var(--terra); font-weight: 700; color: var(--forest); }
  .tab-dot { display: none; }
  .humaniser-editor-body { grid-column: 1 / -1; grid-row: 2; margin: 0 2px; }
  .humaniser-view textarea { font-size: 16px; line-height: 1.6; padding: 18px; height: 286px; }
  .changes-content { font-size: 16px; line-height: 1.6; padding: 18px; height: 286px; }

  .hz-bar, .hz-actions { display: contents; }
  .hz-metrics { grid-column: 1 / -1; grid-row: 3; margin: 0 2px 2px; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: 1.5px solid var(--line); background: var(--card); border-radius: 0 0 16px 16px; font-size: 14px; }
  .premium-pointer .arr { display: none; }
  .premium-pointer.limit-reached a { padding: 6px 12px; }

  .humaniser-primary { grid-row: 4; grid-column: 1; margin-top: 24px; font-size: 17px; padding: 15px; box-shadow: 3px 3px 0 var(--forest); }
  .humaniser-level { grid-row: 4; grid-column: 2; margin-top: 24px; }
  .humaniser-level select { width: 100%; height: 56px; font-size: 16px; padding: 0 40px 0 18px; background-position: right 14px center; }
  .humaniser-secondary { grid-row: 5; grid-column: 1 / -1; margin-top: 10px; font-size: 16px; padding: 13px; }
  .humaniser-secondary:disabled { display: none; }
  .humaniser-status { grid-row: 6; grid-column: 1 / -1; font-size: 14px; text-align: center; }
  .humaniser-status:not(:empty) { margin-top: 12px; }

  .hz-note { justify-content: center; gap: 8px; margin-top: 16px; font-size: 13.5px; }
  .hz-note svg { width: 15px; height: 15px; }

  .hz-footer { max-width: 720px; width: 100%; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted); border-top: 1.5px solid var(--line); }
  .hz-footer-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .hz-footer-brand img { width: 30px; height: 30px; border-radius: 6px; }
  .hz-footer-brand span { font-family: var(--serif); font-weight: 700; font-size: 17px; color: var(--forest); }
  .hz-footer-text a { font-weight: 700; text-decoration: none; }
}