/* Hallmark · macrostructure: native Workbench · existing Ohana · designed-as-app
 * Pre-emit critique: P5 H4 E3 S5 R5 V4; browser/mobile verification pending.
 * Audience: Hermann and Tomi. Purpose: request, follow, reply. Tone: restrained.
 * Additive styles only; Frappe owns controls, validation, layout and permissions.
 */
@import url("./tokens.css");

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/Fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/Fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/NunitoSans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/NunitoSans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

html, body { overflow-x: clip; }
body { font-family: var(--ohana-font-body); }
body.ohana-tasks, body[data-path="login"] {
  color: var(--ohana-ink);
  background: var(--ohana-paper);
}
.ohana-tasks :where(input, textarea, select, button) { font: inherit; }
.ohana-tasks :where(h1, h2), [data-path="login"] .page-card-head h4 {
  font-family: var(--ohana-font-display);
  font-style: normal;
  font-weight: 500;
  font-size: var(--ohana-title-size);
  line-height: 1.2;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ohana-tasks :where(table, [role="table"], time) { font-variant-numeric: tabular-nums; }
.ohana-tasks :where(button, [role="button"], nav a) { white-space: nowrap; }
.ohana-tasks :where(button, input, textarea, select):focus-visible {
  outline: 3px solid var(--ohana-action);
  outline-offset: 3px;
  transition: none;
}
.ohana-tasks :where(input, textarea, select) {
  border-radius: var(--ohana-radius);
}
.ohana-tasks :where(button:disabled, [aria-disabled="true"]) { cursor: not-allowed; }
.ohana-tasks :where([aria-busy="true"]) { cursor: progress; }
.ohana-tasks img[alt="Brand Logo"] { object-fit: contain; }
.ohana-tasks .prose-f { line-height: 1.65; }
.ohana-tasks .ohana-brand { font-family: var(--ohana-font-display); font-size: 19px; }
.ohana-tasks .ohana-note { color: var(--ohana-muted); }
.ohana-tasks .ohana-request-fields { max-width: 52rem; }

/* The native activity grid's auto minimum lets email bodies force the mobile
   conversation wider than the screen. Keep its avatar rail, shrink the body. */
.ohana-tasks .activity {
  grid-template-columns: 30px minmax(0, 1fr);
  min-width: 0;
}
.ohana-tasks .activity > * { min-width: 0; }
.ohana-tasks .activity :where(iframe, img, video) { max-width: 100%; }
.ohana-tasks .activity iframe { width: 100%; min-width: 0; }
.ohana-tasks .activity :where(p, a, .prose-f) { overflow-wrap: anywhere; }
.ohana-tasks .activity > :last-child :where(.flex, .grid) { min-width: 0; }
.ohana-tasks .ohana-request-submit {
  background: var(--ohana-action);
  color: var(--ohana-panel);
  min-height: var(--ohana-control-height);
  padding-inline: 1.25rem;
}
.ohana-tasks .ohana-request-submit:hover { background: var(--ohana-action-hover); }
.ohana-tasks .ohana-request-submit:disabled { opacity: .5; }

/* Match the native mobile-layout threshold used by useScreenSize. The mobile
   menu and 100%-wide header otherwise compete for width at 320px. Keep the
   action buttons intact and let the breadcrumb/header flex item shrink. */
@media (max-width: 1023.98px) {
  .ohana-tasks header#app-header {
    flex: 1 1 0%;
    min-width: 0;
    width: auto;
  }
  .ohana-tasks .ohana-customer-conversation {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .ohana-tasks :where(button, input:not([type="checkbox"]):not([type="radio"]), select) {
    min-height: var(--ohana-control-height);
  }
  .ohana-tasks .ohana-new-request button:has(> svg:only-child) {
    min-width: var(--ohana-control-height);
  }
  .ohana-tasks .ohana-new-request .ohana-request-submit { width: 100%; }
  .ohana-tasks .activity > :last-child > .flex { flex-wrap: wrap; }
}

/* Keep native data-table scrolling. Enlarge touch controls without changing
   the application's responsive navigation or clipping table columns. */
@media (pointer: coarse) {
  .ohana-tasks :where(button, input:not([type="checkbox"]):not([type="radio"]), select) {
    min-height: var(--ohana-control-height);
  }
  .ohana-tasks button:has(> svg:only-child) { min-width: var(--ohana-control-height); }
}
@media (prefers-reduced-motion: reduce) {
  .ohana-tasks *, .ohana-tasks *::before, .ohana-tasks *::after {
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Framework login remains the real authentication form (including 2FA). */
[data-path="login"] .page-card {
  background: var(--ohana-panel);
  color: var(--ohana-ink);
  border: 1px solid var(--ohana-rule);
  border-radius: var(--ohana-radius);
  box-shadow: none;
}
[data-path="login"] .btn-primary {
  background: var(--ohana-action);
  color: var(--ohana-panel);
  border-color: var(--ohana-action);
}
[data-path="login"] .btn-primary:hover { background: var(--ohana-action-hover); }
[data-path="login"] .btn-primary:active { background: var(--ohana-action-active); }
[data-path="login"] :where(a, button, input):focus-visible {
  outline: 3px solid var(--ohana-action);
  outline-offset: 3px;
}