/* house-task-modal.css: the Inbox task popup (#inboxTaskOverlay) in the house style.

   Ben, 6 Sep 2026: "the pop-up here still is using old styling. It isn't
   consistent. Look at how ugly this is."

   Two things were wrong, and only one of them was cosmetic.

   The broken one: house.css styles EVERY select as a form field, with
   font-size 14px, input padding, a 14px radius and an inset shadow, all
   !important. The description toolbar's Style / colour / Size selects are
   meant to be 28px chips sitting in a row next to B I U. Inflated into full
   form controls they no longer fit, and the toolbar's flex-wrap pushed each
   onto its own line. That row of stacked full-width boxes in the screenshot is
   a layout failure, not a taste problem.

   The cosmetic one: the modal predates the house style and still carried
   inline colours from the dark theme it was written for.

   Scoped to #inboxTaskOverlay, NOT .inbox-page: the overlay is appended to
   <body>, so .inbox-page never reaches it. Loaded after house.css because
   almost every rule here is undoing a global !important. */

/* ---- shell ---- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay {
  background: rgba(20, 22, 30, .28) !important;
  backdrop-filter: blur(4px) !important;
  padding: 24px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-shell {
  background: var(--hs-paper) !important;
  border: 1px solid var(--hs-line) !important;
  border-radius: var(--hs-radius-card) !important;
  box-shadow: var(--hs-shadow-card) !important;
  font-family: var(--hs-font-body) !important;
  color: var(--hs-ink) !important;
}

/* ---- header ---- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-header {
  border-bottom: 1px solid var(--hs-line) !important;
  padding: 22px 26px 18px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-breadcrumb {
  font-family: var(--hs-font-body) !important;
  font-size: 11px !important;
  letter-spacing: .06em !important;
  color: var(--hs-ink-mute) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-title {
  font-family: var(--hs-font-display) !important;
  font-size: 26px !important;
  line-height: 1.2 !important;
  color: var(--hs-ink) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--hs-radius-input) !important;
  box-shadow: none !important;
  padding: 2px 6px !important;
  margin-left: -6px !important;
}
/* The title is an input. It should not look like a form field until you go to
   edit it, or the header reads as a settings screen. */
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-title:hover {
  border-color: var(--hs-line) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-title:focus {
  border-color: var(--hs-yellow) !important;
  box-shadow: 0 0 0 4px var(--hs-yellow-ring) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-state-pill {
  font-family: var(--hs-font-body) !important;
  border-radius: var(--hs-radius-pill) !important;
  font-size: 11px !important;
  letter-spacing: .05em !important;
}

/* ---- header buttons ---- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-btn,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-btn-close {
  font-family: var(--hs-font-body) !important;
  border-radius: var(--hs-radius-pill) !important;
  border: 1px solid var(--hs-line) !important;
  background: var(--hs-paper) !important;
  color: var(--hs-ink-soft) !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-btn:hover {
  border-color: var(--hs-line-hover) !important;
  background: var(--hs-yellow-soft) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-btn-danger:hover {
  border-color: var(--hs-bad) !important;
  background: rgba(224, 86, 30, .08) !important;
  color: var(--hs-bad) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-btn-close {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ---- body and panels ---- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-body {
  background: var(--hs-paper) !important;
  gap: 0 !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-left {
  background: var(--hs-paper) !important;
  padding: 24px 26px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-right {
  background: var(--hs-bg) !important;
  border-left: 1px solid var(--hs-line) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-label {
  font-family: var(--hs-font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  color: var(--hs-ink-mute) !important;
}

/* ---- the description toolbar: chips in a row, not stacked form fields ----
   Every override here is undoing house.css's global select rule, which is why
   they all need !important to land. */
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .rich-toolbar {
  gap: 4px !important;
  padding: 6px !important;
  border: 1px solid var(--hs-line) !important;
  border-radius: var(--hs-radius-input) !important;
  background: var(--hs-bg) !important;
  flex-wrap: wrap !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .rich-toolbar select,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .rich-toolbar button {
  font-family: var(--hs-font-body) !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  height: 28px !important;
  width: auto !important;
  min-width: 28px !important;
  max-width: none !important;
  padding: 0 8px !important;
  border: 1px solid var(--hs-line) !important;
  border-radius: 9px !important;
  background-color: var(--hs-paper) !important;
  color: var(--hs-ink-soft) !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .rich-toolbar select {
  padding-right: 22px !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--hs-ink-mute) 50%),
                    linear-gradient(135deg, var(--hs-ink-mute) 50%, transparent 50%) !important;
  background-position: right 9px center, right 5px center !important;
  background-size: 4px 4px, 4px 4px !important;
  background-repeat: no-repeat !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .rich-toolbar button:hover,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .rich-toolbar select:hover {
  border-color: var(--hs-line-hover) !important;
  background-color: var(--hs-yellow-soft) !important;
}

/* ---- the editable description (was hardcoded background:#000) ---- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay [contenteditable="true"] {
  background: var(--hs-paper) !important;
  color: var(--hs-ink) !important;
  border: 1px solid var(--hs-line) !important;
  border-radius: var(--hs-radius-input) !important;
  font-family: var(--hs-font-body) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  padding: 12px 14px !important;
  margin-top: 6px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay [contenteditable="true"]:focus {
  border-color: var(--hs-yellow) !important;
  box-shadow: 0 0 0 4px var(--hs-yellow-ring) !important;
}

/* ---- handoff notes: a card on the page ground, not a tinted panel ---- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .inbox-handoff-section {
  background: var(--hs-bg) !important;
  border: 1px solid var(--hs-line) !important;
  border-radius: var(--hs-radius-tile) !important;
  padding: 16px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .inbox-handoff-section h4 {
  font-family: var(--hs-font-body) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--hs-ink-mute) !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .inbox-handoff-textarea {
  background: var(--hs-paper) !important;
  border: 1px solid var(--hs-line) !important;
  border-radius: var(--hs-radius-input) !important;
  font-family: var(--hs-font-body) !important;
  font-size: 14px !important;
  min-height: 84px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .inbox-handoff-btn {
  font-family: var(--hs-font-body) !important;
  border-radius: var(--hs-radius-pill) !important;
  border: 1px solid var(--hs-line) !important;
  background: var(--hs-paper) !important;
  color: var(--hs-ink-soft) !important;
  font-size: 12px !important;
  padding: 7px 15px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .inbox-handoff-btn.is-primary {
  background: var(--hs-yellow) !important;
  border-color: var(--hs-yellow-deep) !important;
  color: var(--hs-ink) !important;
  font-weight: 600 !important;
}

/* ---- side panel fields ---- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-right select,
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-right input[type="date"],
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-right input[type="text"] {
  width: 100% !important;
  font-size: 13px !important;
  border-radius: var(--hs-radius-input) !important;
  border: 1px solid var(--hs-line) !important;
  background-color: var(--hs-paper) !important;
  padding: 8px 12px !important;
}
/* A select has to look like one. Status, Priority, Client and Department all
   rendered as plain boxes with no arrow, so they read as disabled text. */
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-right select {
  padding-right: 30px !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--hs-ink-mute) 50%),
                    linear-gradient(135deg, var(--hs-ink-mute) 50%, transparent 50%) !important;
  background-position: right 14px center, right 9px center !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* ---- primary actions ---- */
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-btn-primary {
  font-family: var(--hs-font-body) !important;
  background: var(--hs-yellow) !important;
  border: 1px solid var(--hs-yellow-deep) !important;
  color: var(--hs-ink) !important;
  border-radius: var(--hs-radius-pill) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 7px 15px !important;
}

/* ---- second review pass, 6 Sep 2026 ("still needs a review") ---- */

/* The assignee chip carried no class, so nothing could style it and it took
   whatever generic rule reached it: a boxed, uppercase, mono-looking tag that
   matched nothing else in the panel. It is a person's name. */
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-assignee-chip {
  background: var(--hs-paper) !important;
  border: 1px solid var(--hs-line) !important;
  border-radius: var(--hs-radius-pill) !important;
  padding: 3px 10px 3px 4px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-assignee-chip span {
  font-family: var(--hs-font-body) !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--hs-ink) !important;
}

/* Department is read-only. Sitting bare in a column of bordered controls it
   read as a field that had failed to render rather than as a value. Give it
   the shape of a value, not of an input. */
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-readonly {
  font-family: var(--hs-font-body) !important;
  font-size: 13px !important;
  color: var(--hs-ink-soft) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px dashed var(--hs-line) !important;
  border-radius: 0 !important;
  padding: 6px 2px !important;
}

/* The breadcrumb is a link. It was the same yellow as the primary buttons,
   which on a light ground reads as decoration rather than as something to
   click, and competes with the one thing on screen that should be yellow. */
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-client-link {
  color: var(--hs-ink-soft) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--hs-line-hover) !important;
  text-underline-offset: 3px !important;
}
html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-client-link:hover {
  color: var(--hs-ink) !important;
  text-decoration-color: var(--hs-yellow-deep) !important;
}

/* ---- the popup on a phone --------------------------------------------------------------------
   Ben, 18 Sep 2026: "when I click a task ... it gives me this empty padding area where it's
   really messy." The header is a flex row: the three buttons (229px) sat beside the title box
   and left it 27px, so the client tag wrapped letter by letter, the pills stacked, the title
   showed two letters, and the row stood 300px tall. On a phone the buttons take their own row
   at the top and the title box gets the full width. The popup itself hugs the screen. */
@media (max-width: 767.98px) {
  html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-header {
    flex-wrap: wrap !important;
    gap: 6px 0 !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-header-actions {
    order: -1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: flex-end !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-header-titlebox {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-breadcrumb {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay input.itm-title:not(#rsp) {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay {
    padding: 8px !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay > * {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-body,
  html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm {
    padding: 14px !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay select:not(#rsp),
  html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay textarea:not(#rsp),
  html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay input:not([type="checkbox"]):not([type="radio"]):not(#rsp) {
    font-size: 16px !important;
  }
  html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay .itm-btn:not(#rsp),
  html:root[data-design-mode][data-theme][data-palette] body#opt-house #inboxTaskOverlay button:not(#rsp) {
    min-height: 40px !important;
    min-width: 40px !important;
  }
}