/* Ottoni Habitat 0.6.1 — typography, proportion and component-containment correction.
   Incremental override over 0.6.0. No business logic. */

:root{
  --ottoni-reading:68ch;
  --ottoni-ui-label-spacing:.025em;
  --ottoni-panel-pad:clamp(20px,1.65vw,32px);
}

/* Never turn words into vertical letter columns. The previous global break-word
   rule is intentionally neutralised inside the application shell. */
.ottoni-platform-main,
.ottoni-private-main,
.ottoni-platform-shell{
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
.ottoni-platform-main :where(p,li,a,button,label,small,strong,h1,h2,h3,h4),
.ottoni-private-main :where(p,li,a,button,label,small,strong,h1,h2,h3,h4),
.ottoni-platform-shell :where(p,li,a,button,label,small,strong,h1,h2,h3,h4){
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
.ottoni-platform-main :where(section,article,div,aside,nav,header,footer,main),
.ottoni-private-main :where(section,article,div,aside,nav,header,footer,main){min-width:0}

/* Editorial text should wrap by lines, not by arbitrary characters. */
.ottoni-platform-main :where(h1,h2,h3),
.ottoni-private-main :where(h1,h2,h3){text-wrap:balance}
.ottoni-platform-main p,
.ottoni-private-main p{max-inline-size:var(--ottoni-reading)}

/* Application labels are readable UI, not logos. */
.ottoni-header-060__public a,
.ottoni-header-060__actions a,
.ottoni-member-contextbar a,
.ottoni-homeboard__section-head>a,
.ottoni-preview-chip,
.ottoni-badge,
.ottoni-ui-button,
.ottoni-footer__inner nav a{
  letter-spacing:var(--ottoni-ui-label-spacing)!important;
}
.ottoni-kicker{letter-spacing:.065em!important}

/* A more balanced desktop application bar. */
.ottoni-header-060__bar{gap:clamp(14px,1.5vw,26px);padding-inline:4px}
.ottoni-header-060__public{gap:clamp(12px,1.2vw,22px)}
.ottoni-header-060__public a,.ottoni-header-060__actions a{font-size:clamp(.66rem,.62vw,.76rem)}
.ottoni-header-060__login,.ottoni-header-060__my{padding-inline:12px}

/* Component containment is the central fix for the compressed panels shown in QA. */
.ottoni-homeboard__panel,
.ottoni-module-slot,
.ottoni-art-preview,
.ottoni-tools-preview,
.ottoni-club-preview,
.ottoni-editorial-stage__pane{
  container-type:inline-size;
}
.ottoni-homeboard__panel{padding:var(--ottoni-panel-pad)}
.ottoni-homeboard__hero{padding:0}
.ottoni-homeboard__member{padding:0}
.ottoni-homeboard__principles{padding:0}

/* Art fallback: never retain the old minmax(300px) two-column grid in a narrow panel. */
.ottoni-art-preview{
  display:block!important;
  min-width:0!important;
}
.ottoni-art-preview__copy,
.ottoni-art-preview__copy>p{width:auto!important;min-width:0!important;max-width:58ch!important}
.ottoni-art-preview__gallery{width:100%;min-width:0!important}
@container (min-width:680px){
  .ottoni-art-preview{
    display:grid!important;
    grid-template-columns:minmax(220px,.8fr) minmax(280px,1.2fr)!important;
    gap:clamp(20px,3cqi,42px);
    align-items:center;
  }
}

/* Generic module slots are allowed to expand. Narrow text rails were causing
   apparently random broken words at browser zoom levels. */
.ottoni-module-slot__inner{width:min(calc(100% - (var(--ottoni-gutter) * 2)),var(--ottoni-app-max));max-width:none}
.ottoni-module-slot__head{grid-template-columns:minmax(0,1fr);gap:12px}
.ottoni-module-slot__head h2{max-width:20ch;font-size:clamp(1.9rem,4cqi,3.3rem)}
@container (min-width:760px){
  .ottoni-module-slot__head{grid-template-columns:minmax(260px,.72fr) minmax(300px,1.28fr);gap:clamp(30px,5cqi,74px);align-items:end}
}

/* Better homeboard proportions: desktop remains spatial, but no panel is forced
   to carry a desktop sub-layout after its own usable width becomes small. */
.ottoni-homeboard__grid{grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch}
.ottoni-homeboard__hero-copy{min-width:0;width:min(58%,560px)}
.ottoni-homeboard__hero h1{font-size:clamp(2.8rem,3.35vw,4.45rem)}
.ottoni-homeboard__projects .ottoni-project-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
@container (min-width:650px){.ottoni-homeboard__projects .ottoni-project-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
.ottoni-homeboard__diagnostic-labels{grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}
.ottoni-homeboard__method-flow{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}

/* Compact help language and onboarding. */
.ottoni-onboarding{margin-top:24px;border:1px solid var(--ottoni-line);background:#efe8df}
.ottoni-onboarding__head{padding:20px 22px;display:grid;gap:10px;border-bottom:1px solid var(--ottoni-line)}
.ottoni-onboarding__head h2{margin:.15rem 0 0;font-size:clamp(1.45rem,2.2cqi,2rem);font-weight:400}
.ottoni-onboarding__head>p{margin:0;color:var(--ottoni-ink-soft);font-size:.72rem;line-height:1.55}
.ottoni-onboarding__steps{list-style:none;margin:0;padding:0;display:grid}
.ottoni-onboarding__steps li{min-width:0;padding:18px 20px;display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;border-bottom:1px solid var(--ottoni-line)}
.ottoni-onboarding__steps li:last-child{border-bottom:0}
.ottoni-onboarding__steps li>span{width:30px;height:30px;display:grid;place-items:center;border:1px solid #9d8c7c;border-radius:50%;color:#7a5c45;font-size:.58rem}
.ottoni-onboarding__steps strong{display:block;font-family:var(--ottoni-font-display);font-size:.95rem;font-weight:400}
.ottoni-onboarding__steps p{margin:5px 0 8px;color:var(--ottoni-ink-soft);font-size:.66rem;line-height:1.5}
.ottoni-onboarding__steps a{color:inherit;font-size:.62rem;font-weight:650;text-decoration:none}
.ottoni-onboarding__steps a:hover{text-decoration:underline}
@container (min-width:720px){
  .ottoni-onboarding__head{grid-template-columns:minmax(220px,.75fr) minmax(300px,1.25fr);align-items:end}
  .ottoni-onboarding__steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ottoni-onboarding__steps li{border-bottom:0;border-right:1px solid var(--ottoni-line)}
  .ottoni-onboarding__steps li:last-child{border-right:0}
}

/* Zoom-safe transformation. At 125–200% browser zoom the CSS viewport shrinks;
   switch geometry before text is squeezed. */
@media(max-width:1280px){
  .ottoni-homeboard__hero{grid-column:1/8}
  .ottoni-homeboard__tools{grid-column:8/13}
  .ottoni-homeboard__diagnostic{grid-column:1/5}
  .ottoni-homeboard__projects{grid-column:5/13}
  .ottoni-homeboard__podcast{grid-column:1/5}
  .ottoni-homeboard__evidence{grid-column:5/9}
  .ottoni-homeboard__art{grid-column:9/13}
}
@media(max-width:1060px){
  .ottoni-homeboard__grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .ottoni-homeboard__hero{grid-column:1/-1}
  .ottoni-homeboard__tools{grid-column:1/4}.ottoni-homeboard__diagnostic{grid-column:4/7}
  .ottoni-homeboard__projects{grid-column:1/-1}
  .ottoni-homeboard__podcast{grid-column:1/4}.ottoni-homeboard__evidence{grid-column:4/7}
  .ottoni-homeboard__method,.ottoni-homeboard__member{grid-column:1/-1}
  .ottoni-homeboard__art,.ottoni-homeboard__club,.ottoni-homeboard__cta,.ottoni-homeboard__newsletter{grid-column:span 3}
  .ottoni-homeboard__principles{grid-column:1/-1}
  .ottoni-homeboard__hero-copy{width:min(64%,560px)}
}
@media(max-width:760px){
  .ottoni-homeboard__grid{display:block}
  .ottoni-homeboard__panel{padding:24px 18px}
  .ottoni-homeboard__hero{padding:0}
  .ottoni-homeboard__member,.ottoni-homeboard__principles{padding:0}
  .ottoni-homeboard__hero-copy{width:auto}
  .ottoni-homeboard__section-head{display:grid;gap:8px}
  .ottoni-homeboard__section-head>a{margin-top:0;justify-self:start}
  .ottoni-homeboard__diagnostic-labels{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(prefers-reduced-motion:reduce){
  .ottoni-onboarding *{transition:none!important;animation:none!important}
}