/* ===== Housey · base styles ================================================= Layout + components. All visual properties are CSS variables (--hsy-*), themed per artboard. See themes.css for the three palettes. ========================================================================== */ .hsy-app { --hsy-pad: 28px; --hsy-side-w: 260px; --hsy-r-sm: 6px; --hsy-r: 10px; --hsy-r-lg: 16px; font-family: var(--hsy-font-body, 'Plus Jakarta Sans', system-ui, sans-serif); color: var(--hsy-ink); background: var(--hsy-bg); display: flex; height: 100%; width: 100%; font-size: 14px; line-height: 1.4; -webkit-font-smoothing: antialiased; } .hsy-app.density-compact { font-size: 13px; } .hsy-app *, .hsy-app *::before, .hsy-app *::after { box-sizing: border-box; } /* Modals get portalled to , escaping `.hsy-app *`. Re-apply box-sizing so 100%-width inputs don't overflow their parent by padding+border. */ [data-modal] *, [data-modal] *::before, [data-modal] *::after { box-sizing: border-box; } .hsy-mono { font-family: var(--hsy-font-mono, 'JetBrains Mono', ui-monospace, monospace); font-feature-settings: 'tnum'; } .hsy-muted { color: var(--hsy-muted); } /* ── Sidebar ────────────────────────────────────────────────────────── */ .hsy-sidebar { width: var(--hsy-side-w); flex: 0 0 auto; background: var(--hsy-side-bg); border-right: 1px solid var(--hsy-line); padding: 24px 16px 16px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; } .hsy-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; } .hsy-brand-mark { width: 32px; height: 32px; display: grid; place-items: center; background: var(--hsy-accent); color: var(--hsy-on-accent); border-radius: var(--hsy-r-sm); font-size: 18px; line-height: 1; } .hsy-brand-name { font-family: var(--hsy-font-display, inherit); font-size: 22px; font-weight: var(--hsy-brand-w, 600); letter-spacing: var(--hsy-brand-tracking, -0.01em); } .hsy-side-section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--hsy-muted); padding: 14px 10px 6px; } .hsy-side-section-label--with-act { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .hsy-side-add { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; background: transparent; color: var(--hsy-muted); border-radius: var(--hsy-r-sm, 6px); cursor: pointer; transition: background .12s, color .12s; } .hsy-side-add:hover { background: var(--hsy-hover); color: var(--hsy-ink); } .hsy-houses { display: flex; flex-direction: column; gap: 2px; } .hsy-house-pill { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: transparent; border-radius: var(--hsy-r); cursor: pointer; text-align: left; color: inherit; font: inherit; transition: background .12s; } .hsy-house-pill:hover { background: var(--hsy-hover); } .hsy-house-pill.is-on { background: var(--hsy-active); } .hsy-house-swatch { width: 28px; height: 28px; border-radius: var(--hsy-r-sm); flex: 0 0 auto; border: 1px solid rgba(0,0,0,0.08); } .hsy-house-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .hsy-house-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hsy-house-sub { font-size: 11px; color: var(--hsy-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hsy-house-add { color: var(--hsy-muted); font-size: 13px; font-weight: 500; } .hsy-house-add:hover { color: var(--hsy-ink); } .hsy-archive { margin-top: 8px; border-top: 1px dashed var(--hsy-line); padding-top: 8px; } .hsy-archive-summary { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--hsy-muted); cursor: pointer; border-radius: var(--hsy-r); list-style: none; } .hsy-archive-summary::-webkit-details-marker { display: none; } .hsy-archive-summary:hover { background: var(--hsy-hover); color: var(--hsy-ink); } .hsy-archive-count { font-size: 11px; padding: 1px 7px; background: var(--hsy-bar-bg); border-radius: 999px; } .hsy-house-archived { opacity: 0.65; } .hsy-house-archived:hover { opacity: 1; } .hsy-house-archived .hsy-row-act { margin-left: auto; opacity: 1; } .hsy-nav { display: flex; flex-direction: column; gap: 2px; } .hsy-nav-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: transparent; border-radius: var(--hsy-r); cursor: pointer; color: var(--hsy-muted); font: inherit; text-align: left; font-weight: 500; transition: background .12s, color .12s; } .hsy-nav-btn:hover { background: var(--hsy-hover); color: var(--hsy-ink); } .hsy-nav-btn.is-on { background: var(--hsy-active); color: var(--hsy-ink); } .hsy-nav-ico { display: flex; } .hsy-nav-label { flex: 1; } .hsy-nav-count { font-family: var(--hsy-font-mono); font-size: 11px; padding: 2px 7px; background: var(--hsy-accent-soft); color: var(--hsy-accent-ink); border-radius: 999px; } .hsy-side-foot { margin-top: auto; padding: 12px 10px; border-top: 1px solid var(--hsy-line); } .hsy-foot-row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; } /* ── Main column ────────────────────────────────────────────────────── */ .hsy-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--hsy-bg); } .hsy-topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--hsy-pad); border-bottom: 1px solid var(--hsy-line); gap: 16px; } .hsy-crumbs { display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--hsy-muted); } .hsy-crumb-sep { opacity: 0.5; } .hsy-crumb-current { font-family: var(--hsy-font-display, inherit); font-size: 20px; color: var(--hsy-ink); font-weight: var(--hsy-h-w, 600); letter-spacing: var(--hsy-h-tracking, -0.01em); } .hsy-top-meta { display: flex; align-items: center; gap: 12px; } .hsy-pillars { display: flex; gap: 6px; } .hsy-pill { font-size: 12px; padding: 4px 10px; background: var(--hsy-accent-soft); color: var(--hsy-accent-ink); border-radius: 999px; font-weight: 500; } .hsy-content { flex: 1; min-height: 0; overflow-y: auto; padding: var(--hsy-pad); } /* ── Screen scaffolding ─────────────────────────────────────────────── */ .hsy-screen { display: flex; flex-direction: column; gap: 22px; } .hsy-screen-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .hsy-eyebrow { text-transform: uppercase; font-size: 11px; letter-spacing: 0.1em; color: var(--hsy-muted); font-weight: 600; margin-bottom: 4px; } .hsy-h1 { font-family: var(--hsy-font-display, inherit); font-size: 36px; font-weight: var(--hsy-h-w, 600); letter-spacing: var(--hsy-h-tracking, -0.02em); margin: 0; line-height: 1.05; } .hsy-h2 { font-family: var(--hsy-font-display, inherit); font-size: 26px; font-weight: var(--hsy-h-w, 600); letter-spacing: var(--hsy-h-tracking, -0.015em); margin: 0; line-height: 1.1; } .hsy-h3 { font-family: var(--hsy-font-display, inherit); font-size: 18px; font-weight: var(--hsy-h-w, 600); margin: 0; letter-spacing: var(--hsy-h-tracking, -0.005em); } /* ── Buttons ────────────────────────────────────────────────────────── */ .hsy-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: var(--hsy-r); border: 1px solid var(--hsy-line); background: var(--hsy-surface); color: var(--hsy-ink); font: inherit; font-weight: 500; cursor: pointer; transition: background .12s, border-color .12s, transform .08s; } .hsy-btn:hover { background: var(--hsy-hover); } .hsy-btn:active { transform: translateY(1px); } .hsy-btn-primary { background: var(--hsy-accent); color: var(--hsy-on-accent); border-color: var(--hsy-accent); } .hsy-btn-primary:hover { background: var(--hsy-accent-hover); border-color: var(--hsy-accent-hover); } .hsy-btn-ghost { background: var(--hsy-surface); color: var(--hsy-ink); border-color: var(--hsy-line); } .hsy-btn-ghost:hover { background: var(--hsy-hover); border-color: var(--hsy-line-strong); } .hsy-btn-danger { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: var(--hsy-r); border: 1px solid var(--hsy-warn); background: var(--hsy-warn); color: #fff; font: inherit; font-weight: 500; cursor: pointer; transition: background .12s, border-color .12s, transform .08s; } .hsy-btn-danger:hover { background: oklch(0.55 0.18 30); color: #fff; border-color: oklch(0.55 0.18 30); } .hsy-btn-danger:active { transform: translateY(1px); } /* Ghost-delete / text button: tertiary text-only "Delete X" used on the LEFT of modal footers. .hsy-btn-text is the spec name; .hsy-btn-ghost-delete is retained as an alias for existing templates. */ .hsy-btn-ghost-delete, .hsy-btn-text { background: transparent; color: var(--hsy-warn); border-color: transparent; padding: 9px 10px; } .hsy-btn-ghost-delete:hover, .hsy-btn-text:hover { background: rgba(216, 99, 58, 0.08); color: var(--hsy-warn); border-color: transparent; } /* Buttons sitting on top of a photo need a backdrop for legibility */ .hsy-detail-head .hsy-btn-ghost, .hsy-card-actions .hsy-btn-ghost { background: rgba(255,255,255,0.92); color: var(--hsy-ink); border-color: rgba(255,255,255,0.92); } .hsy-detail-head .hsy-btn-ghost:hover, .hsy-card-actions .hsy-btn-ghost:hover { background: #fff; } .hsy-detail-head .hsy-btn-danger, .hsy-card-actions .hsy-btn-danger { background: rgba(255,255,255,0.92); color: var(--hsy-warn); border-color: rgba(255,255,255,0.92); } .hsy-detail-head .hsy-btn-danger:hover, .hsy-card-actions .hsy-btn-danger:hover { background: var(--hsy-warn); color: #fff; border-color: var(--hsy-warn); } .hsy-btn-icon { padding: 4px 8px; font-size: 14px; line-height: 1; } .hsy-detail-actions { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; z-index: 2; } .hsy-card-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; z-index: 2; opacity: 0; transition: opacity .15s; } .hsy-room-card:hover .hsy-card-actions, .hsy-room-card:focus-within .hsy-card-actions { opacity: 1; } /* Inline row actions (items, shopping, tasks) */ .hsy-row-actions { display: inline-flex; gap: 4px; margin-left: 8px; opacity: 0; transition: opacity .12s; } .hsy-item-actionable:hover .hsy-row-actions, .hsy-shop-row-actionable:hover .hsy-row-actions, .hsy-task-actionable:hover .hsy-row-actions, .hsy-side-card:hover .hsy-row-actions { opacity: 1; } .hsy-row-act { width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--hsy-line); background: transparent; color: var(--hsy-muted); font-size: 13px; line-height: 1; cursor: pointer; display: inline-grid; place-items: center; transition: background .12s, color .12s, border-color .12s; } .hsy-row-act:hover { background: var(--hsy-hover); color: var(--hsy-ink); border-color: var(--hsy-line-strong); } .hsy-row-act-danger:hover { background: var(--hsy-warn); color: #fff; border-color: var(--hsy-warn); } /* extend item grid to include actions column */ .hsy-item.hsy-item-actionable { grid-template-columns: 24px 1fr auto auto auto; } .hsy-shop-row.hsy-shop-row-actionable { grid-template-columns: 24px 1.3fr minmax(0, 1fr) 50px 80px 80px 60px; } .hsy-task.hsy-task-actionable { position: relative; padding-right: 90px; padding-bottom: 28px; } .hsy-task-actions { position: absolute; top: 6px; right: 6px; z-index: 3; } .hsy-task-badge { position: absolute; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; line-height: 1.5; max-width: 45%; white-space: nowrap; overflow: hidden; pointer-events: none; } .hsy-task-badge svg { flex: 0 0 auto; } .hsy-task-badge-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .hsy-task-badge--room { top: 8px; right: 8px; background: var(--hsy-accent-soft); color: var(--hsy-accent-ink); transition: opacity .12s; } .hsy-task-badge--assignee { bottom: 8px; right: 8px; background: var(--hsy-bar-bg); color: var(--hsy-muted); border: 1px solid var(--hsy-line); } .hsy-task-actionable:hover .hsy-task-badge--room { opacity: 0; } .hsy-task-desc { font-size: 12px; color: var(--hsy-muted); margin-top: 4px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hsy-back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; border: 0; background: transparent; border-radius: var(--hsy-r); cursor: pointer; font: inherit; color: var(--hsy-muted); align-self: flex-start; transition: background .12s, color .12s; } .hsy-back:hover { background: var(--hsy-hover); color: var(--hsy-ink); } /* ── Stat row ───────────────────────────────────────────────────────── */ .hsy-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .hsy-stat { background: var(--hsy-surface); border: 1px solid var(--hsy-line); border-radius: var(--hsy-r-lg); padding: 16px; display: flex; flex-direction: column; gap: 4px; } .hsy-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--hsy-muted); font-weight: 600; } .hsy-stat-value { font-family: var(--hsy-font-display, inherit); font-size: 30px; font-weight: var(--hsy-h-w, 600); letter-spacing: var(--hsy-h-tracking, -0.015em); line-height: 1; } .hsy-stat-sub { font-size: 12px; color: var(--hsy-muted); margin-bottom: 6px; } .hsy-stat-sub[data-tone="warn"] { color: var(--hsy-warn); } .hsy-stat-sub[data-tone="good"] { color: var(--hsy-good); } /* ── Progress bar ───────────────────────────────────────────────────── */ .hsy-bar { width: 100%; height: 6px; background: var(--hsy-bar-bg); border-radius: 999px; overflow: hidden; } .hsy-bar-fill { height: 100%; background: var(--hsy-accent); border-radius: 999px; transition: width .3s cubic-bezier(.2,.7,.3,1); } .hsy-bar[data-tone="warn"] .hsy-bar-fill { background: var(--hsy-warn); } .hsy-bar[data-tone="good"] .hsy-bar-fill { background: var(--hsy-good); } /* ── Rooms grid ─────────────────────────────────────────────────────── */ .hsy-rooms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .hsy-room-card { border: 1px solid var(--hsy-line); background: var(--hsy-surface); border-radius: var(--hsy-r-lg); padding: 0; overflow: hidden; cursor: pointer; text-align: left; font: inherit; color: inherit; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s, border-color .12s; } .hsy-room-card:hover { transform: translateY(-2px); box-shadow: var(--hsy-shadow-hover); border-color: var(--hsy-line-strong); } .hsy-room-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; } .hsy-room-meta { display: flex; align-items: center; justify-content: space-between; } .hsy-room-pct { font-family: var(--hsy-font-mono); font-size: 12px; color: var(--hsy-muted); font-weight: 600; } .hsy-room-name { font-family: var(--hsy-font-display, inherit); font-size: 19px; font-weight: var(--hsy-h-w, 600); letter-spacing: var(--hsy-h-tracking, -0.005em); line-height: 1.1; } .hsy-room-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--hsy-muted); margin-top: 2px; } .hsy-room-card-add { border-style: dashed; background: transparent; display: grid; place-items: center; min-height: 200px; color: var(--hsy-muted); } .hsy-room-card-add:hover { color: var(--hsy-ink); border-color: var(--hsy-line-strong); } .hsy-add-inner { display: flex; align-items: center; gap: 6px; font-weight: 500; } /* ── Tags ───────────────────────────────────────────────────────────── */ .hsy-tag { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; padding: 3px 8px; border-radius: 4px; background: var(--hsy-accent-soft); color: var(--hsy-accent-ink); } .hsy-tag-quiet { background: transparent; border: 1px solid var(--hsy-line); color: var(--hsy-muted); } .hsy-tag-on-photo { background: rgba(255,255,255,0.92); color: var(--hsy-accent-ink); } /* ── Photo placeholder ──────────────────────────────────────────────── */ .hsy-photo { position: relative; width: 100%; overflow: hidden; background: #ddd; } .hsy-photo-stripe { position: absolute; inset: 0; background-image: repeating-linear-gradient( 135deg, rgba(255,255,255,0.07) 0 14px, rgba(0,0,0,0.04) 14px 28px ); mix-blend-mode: overlay; } .hsy-photo-label { position: absolute; bottom: 8px; left: 10px; font-family: var(--hsy-font-mono); font-size: 10px; letter-spacing: 0.05em; color: rgba(255,255,255,0.92); background: rgba(0,0,0,0.28); padding: 3px 7px; border-radius: 4px; display: flex; align-items: center; gap: 4px; backdrop-filter: blur(4px); } /* ── Room detail ────────────────────────────────────────────────────── */ .hsy-detail-head { position: relative; border-radius: var(--hsy-r-lg); overflow: hidden; } .hsy-detail-overlay { position: absolute; inset: auto 24px 24px 24px; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.35); display: flex; flex-direction: column; gap: 6px; } .hsy-detail-overlay .hsy-h1 { color: #fff; } .hsy-detail-stats { display: flex; gap: 6px; align-items: baseline; font-size: 13px; opacity: 0.95; } .hsy-detail-body { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } .hsy-detail-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .hsy-detail-tasks { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .hsy-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; } .hsy-add-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--hsy-surface); border: 1px dashed var(--hsy-line); border-radius: var(--hsy-r); color: var(--hsy-muted); } .hsy-add-input { flex: 1; border: 0; background: transparent; font: inherit; color: var(--hsy-ink); outline: none; } .hsy-add-input::placeholder { color: var(--hsy-muted); } .hsy-cat-block { background: var(--hsy-surface); border: 1px solid var(--hsy-line); border-radius: var(--hsy-r-lg); padding: 6px 12px; } .hsy-cat-head { display: flex; justify-content: space-between; padding: 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--hsy-muted); border-bottom: 1px solid var(--hsy-line); } .hsy-item { display: grid; grid-template-columns: 24px 1fr minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--hsy-line); cursor: pointer; transition: opacity .15s; } .hsy-item-name-btn:hover { color: var(--hsy-accent); } .hsy-item-url a { color: var(--hsy-muted); } .hsy-item-url a:hover { color: var(--hsy-accent); } .hsy-item:last-child { border-bottom: 0; } .hsy-item.is-done { color: var(--hsy-muted); } .hsy-item.is-done .hsy-item-name { text-decoration: line-through; } .hsy-item-name { font-size: 14px; } .hsy-item-qty { font-size: 12px; color: var(--hsy-muted); } .hsy-item-price { font-size: 13px; font-weight: 600; } .hsy-check { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--hsy-line-strong); display: grid; place-items: center; cursor: pointer; transition: background .12s, border-color .12s; color: var(--hsy-on-accent); } .hsy-item.is-done .hsy-check, .hsy-shop-row.is-done .hsy-check { background: var(--hsy-accent); border-color: var(--hsy-accent); } /* ── Side cards ─────────────────────────────────────────────────────── */ .hsy-side-card { background: var(--hsy-surface); border: 1px solid var(--hsy-line); border-radius: var(--hsy-r-lg); padding: 14px 16px; margin-bottom: 14px; } .hsy-side-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--hsy-muted); margin-bottom: 8px; } .hsy-side-body { font-size: 13px; line-height: 1.5; } .hsy-ref-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .hsy-ref-add { background: transparent; border: 1px dashed var(--hsy-line); border-radius: var(--hsy-r); cursor: pointer; color: var(--hsy-muted); display: grid; place-items: center; aspect-ratio: 1/1; } .hsy-ref-add:hover { color: var(--hsy-ink); border-color: var(--hsy-line-strong); } /* ── Tasks board ────────────────────────────────────────────────────── */ .hsy-task-add { display: flex; gap: 8px; align-items: stretch; } .hsy-task-add .hsy-add-input { border: 1px solid var(--hsy-line); background: var(--hsy-surface); border-radius: var(--hsy-r); padding: 8px 12px; width: 280px; } .hsy-select { border: 1px solid var(--hsy-line); background: var(--hsy-surface); border-radius: var(--hsy-r); padding: 0 12px; font: inherit; color: inherit; outline: none; cursor: pointer; } .hsy-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; } .hsy-col { background: var(--hsy-col-bg); border: 1px solid var(--hsy-line); border-radius: var(--hsy-r-lg); padding: 12px; min-height: 320px; display: flex; flex-direction: column; gap: 10px; transition: background .12s, border-color .12s; } .hsy-col.is-over { border-color: var(--hsy-accent); background: var(--hsy-accent-soft); } .hsy-col-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 8px; border-bottom: 1px dashed var(--hsy-line); } .hsy-col-dot { width: 9px; height: 9px; border-radius: 50%; } .hsy-col-dot-todo { background: var(--hsy-muted); } .hsy-col-dot-doing { background: var(--hsy-accent); } .hsy-col-dot-done { background: var(--hsy-good); } .hsy-col-label { font-weight: 600; font-size: 13px; flex: 1; } .hsy-col-count { font-size: 12px; color: var(--hsy-muted); } .hsy-col-body { display: flex; flex-direction: column; gap: 8px; } .hsy-col-empty { padding: 18px; text-align: center; font-size: 12px; color: var(--hsy-muted); border: 1px dashed var(--hsy-line); border-radius: var(--hsy-r); } .hsy-task { display: flex; gap: 8px; align-items: center; padding: 10px 10px 10px 6px; background: var(--hsy-surface); border: 1px solid var(--hsy-line); border-radius: var(--hsy-r); cursor: grab; user-select: none; transition: transform .12s, box-shadow .12s, border-color .12s; } .hsy-task:hover { border-color: var(--hsy-line-strong); box-shadow: var(--hsy-shadow-hover); } .hsy-task:active { cursor: grabbing; } .hsy-task.is-dragging { opacity: 0.55; } .hsy-task-grip { position: absolute; top: 50%; left: 6px; transform: translateY(-50%); display: inline-flex; align-items: center; color: var(--hsy-muted); opacity: 0.4; } .hsy-task-body { padding-left: 22px; } .hsy-task-actionable .hsy-task-body { transform: translateY(9px); } .hsy-task:hover .hsy-task-grip { opacity: 0.8; } .hsy-task-body { flex: 1; min-width: 0; } .hsy-task-title { font-weight: 500; font-size: 14px; line-height: 1.3; } /* ── Shopping list ──────────────────────────────────────────────────── */ .hsy-seg { display: flex; background: var(--hsy-surface); border: 1px solid var(--hsy-line); border-radius: var(--hsy-r); padding: 3px; gap: 2px; } .hsy-seg-btn { border: 0; background: transparent; padding: 6px 12px; border-radius: calc(var(--hsy-r) - 4px); font: inherit; font-weight: 500; cursor: pointer; color: var(--hsy-muted); font-size: 13px; transition: background .12s, color .12s; } .hsy-seg-btn:hover { color: var(--hsy-ink); } .hsy-seg-btn.is-on { background: var(--hsy-active); color: var(--hsy-ink); } .hsy-shop-block { background: var(--hsy-surface); border: 1px solid var(--hsy-line); border-radius: var(--hsy-r-lg); padding: 4px 16px; } .hsy-shop-cat-head { padding: 12px 0; } .hsy-shop-row { display: grid; grid-template-columns: 24px 1.3fr minmax(0, 1fr) 50px 80px 80px 60px; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hsy-line); } .hsy-shop-head-row { padding: 6px 0; border-bottom: 1px solid var(--hsy-line-strong, var(--hsy-line)); } .hsy-shop-col-head { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--hsy-muted); font-weight: 600; } .hsy-shop-actions { display: inline-flex; justify-content: flex-end; gap: 4px; } .hsy-shop-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hsy-shop-url a { font-size: 12px; color: var(--hsy-muted); text-decoration: underline; } .hsy-shop-url a:hover { color: var(--hsy-accent); } .hsy-shop-name-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; } .hsy-shop-name-btn:hover { color: var(--hsy-accent); } .hsy-shop-row:last-child { border-bottom: 0; } .hsy-shop-row.is-done { color: var(--hsy-muted); } .hsy-shop-row.is-done .hsy-shop-name > div:first-child { text-decoration: line-through; } .hsy-shop-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .hsy-shop-name > div { font-size: 14px; } .hsy-shop-row-actionable .hsy-shop-name > div:first-child { cursor: pointer; } .hsy-shop-room { border: 0; background: transparent; font: inherit; font-size: 11px; color: var(--hsy-muted); cursor: pointer; padding: 0; text-align: left; } .hsy-shop-room:hover { color: var(--hsy-accent); } .hsy-shop-room-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; line-height: 1.5; max-width: 100%; white-space: nowrap; overflow: hidden; background: var(--hsy-accent-soft); color: var(--hsy-accent-ink); transition: filter .12s; } .hsy-shop-room-badge svg { flex: 0 0 auto; } .hsy-shop-room-badge-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .hsy-shop-room-badge:hover { filter: brightness(0.96); } .hsy-shop-row.is-done .hsy-shop-room-badge { opacity: 0.6; } .hsy-shop-room-badge.is-empty { background: var(--hsy-bar-bg); color: var(--hsy-muted); border: 1px solid var(--hsy-line); font-weight: 500; } .hsy-shop-qty { font-size: 12px; color: var(--hsy-muted); text-align: right; } .hsy-shop-each { font-size: 12px; text-align: right; } .hsy-shop-total { font-size: 14px; font-weight: 600; text-align: right; } .hsy-shop-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 10px; } .hsy-shop-controls { display: flex; align-items: center; gap: 10px; } .hsy-shop-controls .hsy-add-row { flex: 1; min-width: 0; } #shopping-body .hsy-shop-controls { margin-bottom: 14px; } .hsy-tools-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .hsy-tools-row .hsy-add-row { flex: 1; min-width: 0; margin-bottom: 0; } .hsy-search-input { flex: 0 0 220px; padding: 10px 12px; background: var(--hsy-surface); border: 1px dashed var(--hsy-line); border-radius: var(--hsy-r); color: var(--hsy-ink); font: inherit; outline: none; -webkit-appearance: none; appearance: none; } .hsy-search-input::placeholder { color: var(--hsy-muted); } .hsy-search-input:focus { border-style: solid; border-color: var(--hsy-accent, var(--hsy-ink)); } .hsy-board-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 6px; } .hsy-shop-row.hsy-shop-add-row { padding: 8px 0; border-bottom: 1px solid var(--hsy-line); background: transparent; } .hsy-shop-add-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .hsy-inline-input { border: 1px solid var(--hsy-line); background: var(--hsy-surface); border-radius: var(--hsy-r); padding: 6px 8px; font: inherit; font-size: 13px; color: inherit; width: 100%; outline: none; min-width: 0; } .hsy-inline-input:focus { border-color: var(--hsy-accent); } .hsy-inline-input-sub { font-size: 11px; padding: 4px 6px; color: var(--hsy-muted); } .hsy-inline-input-num { text-align: right; } .hsy-btn-sm { padding: 4px 8px; font-size: 12px; } .hsy-shop-empty { padding: 28px 8px; text-align: center; font-size: 13px; color: var(--hsy-muted); } /* ── Modal (Studio spec) ───────────────────────────────────────────── */ /* Anatomy: .hsy-modal is the fixed scrim wrapper; .hsy-modal-card is the dialog panel. Sizes via .hsy-modal-card--narrow / --wide. */ .hsy-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(10, 10, 10, 0.32); backdrop-filter: blur(2px); z-index: 9999; padding: 24px; } .hsy-modal.is-open { display: flex; animation: hsy-scrim-in .14s ease-out; } @keyframes hsy-scrim-in { from { opacity: 0; } to { opacity: 1; } } .hsy-modal-confirm { z-index: 10001; } .hsy-modal-card { width: 100%; max-width: 440px; max-height: calc(100vh - 48px); background: var(--hsy-surface); color: var(--hsy-ink); border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px -4px rgba(0, 0, 0, 0.10), 0 24px 48px -12px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; overflow: hidden; animation: hsy-modal-in .18s cubic-bezier(.2, .8, .3, 1); } .hsy-modal-card--narrow { max-width: 380px; } .hsy-modal-card--wide { max-width: 520px; } /* Back-compat: existing confirm modal CSS used a child selector */ .hsy-modal-confirm .hsy-modal-card { max-width: 380px; } @keyframes hsy-modal-in { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } } .hsy-modal-head { padding: 20px 22px 4px; display: flex; flex-direction: column; gap: 6px; } .hsy-modal-eyebrow { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--hsy-muted); margin: 0 0 2px; } .hsy-modal-title { font-family: var(--hsy-font-display, 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif); font-size: 22px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; color: var(--hsy-ink); margin: 0; } .hsy-modal-subtitle { margin: 6px 0 0; color: var(--hsy-muted); font-size: 13px; line-height: 1.45; } .hsy-modal-body { padding: 16px 22px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; } .hsy-modal-foot { padding: 14px 18px 14px 22px; border-top: 1px solid var(--hsy-line); background: #fafaf8; display: flex; align-items: center; gap: 8px; } .hsy-modal-foot--bare { border-top: 0; background: transparent; padding-top: 4px; } /* Confirm modal foot: spec drops separator + fill so the loud red button doesn't sit on a contrasting strip. */ .hsy-modal-confirm .hsy-modal-foot { border-top: 0; background: transparent; padding-top: 4px; } .hsy-foot-left { margin-right: auto; } /* ── Form rows + labels ────────────────────────────────────────────── */ /* .hsy-field is the existing label-wrapper variant; .hsy-row is the spec's div-wrapper variant. Both share styling. */ .hsy-field, .hsy-row { display: flex; flex-direction: column; gap: 6px; } .hsy-row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .hsy-row-grid--qty { grid-template-columns: 110px 1fr; } .hsy-field-label, .hsy-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--hsy-muted); display: flex; align-items: baseline; gap: 6px; } .hsy-label-hint { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11px; color: var(--hsy-muted); opacity: 0.7; } /* ── Inputs ────────────────────────────────────────────────────────── */ .hsy-input, input.hsy-input, select.hsy-input, textarea.hsy-input { appearance: none; -webkit-appearance: none; width: 100%; border: 1px solid var(--hsy-line); background: var(--hsy-surface); color: var(--hsy-ink); border-radius: 6px; padding: 9px 12px; font: inherit; font-size: 13px; line-height: 1.4; outline: none; transition: border-color .12s, box-shadow .12s, background .12s; } .hsy-input::placeholder { color: var(--hsy-muted); opacity: 0.8; } .hsy-input:hover:not(:focus) { border-color: var(--hsy-line-strong); } .hsy-input:focus { border-color: var(--hsy-accent); box-shadow: 0 0 0 3px rgba(51, 88, 212, 0.14); } .hsy-input:disabled { background: var(--hsy-bg); color: var(--hsy-muted); cursor: not-allowed; } textarea.hsy-input { resize: vertical; min-height: 64px; line-height: 1.5; padding: 10px 12px; } /* Selects get a custom chevron */ select.hsy-input { background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; padding-right: 36px; cursor: pointer; } /* Numeric inputs — mono numerals, no native spinner */ .hsy-input--num { font-family: var(--hsy-font-mono, 'JetBrains Mono', ui-monospace, monospace); font-feature-settings: 'tnum'; font-size: 13px; } .hsy-input--num::-webkit-outer-spin-button, .hsy-input--num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .hsy-input--num[type="number"] { -moz-appearance: textfield; } /* File input — slim themed style matching other inputs */ .hsy-input--file { padding: 6px 10px; font-size: 12.5px; cursor: pointer; } .hsy-input--file::-webkit-file-upload-button, .hsy-input--file::file-selector-button { border: 1px solid var(--hsy-line); background: var(--hsy-bg); color: var(--hsy-ink); border-radius: 5px; padding: 5px 10px; margin-right: 10px; font: inherit; font-size: 12px; cursor: pointer; } /* Photo edit row in Edit Room modal */ .hsy-photo-edit { display: flex; gap: 12px; align-items: flex-start; } .hsy-photo-edit-preview { flex: 0 0 96px; width: 96px; height: 72px; border: 1px solid var(--hsy-line); border-radius: 6px; overflow: hidden; background: var(--hsy-bg); display: grid; place-items: center; } .hsy-photo-edit-preview img { width: 100%; height: 100%; object-fit: cover; } .hsy-photo-edit-empty { font-size: 11px; color: var(--hsy-muted); text-align: center; padding: 0 6px; } .hsy-photo-edit-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } /* Chunky inline +/- stepper */ .hsy-stepper { position: relative; display: flex; } .hsy-stepper > .hsy-input { padding-right: 36px; } .hsy-stepper-btns { position: absolute; top: 1px; right: 1px; bottom: 1px; width: 28px; display: flex; flex-direction: column; border-left: 1px solid var(--hsy-line); border-radius: 0 5px 5px 0; overflow: hidden; } .hsy-stepper-btns button { flex: 1; border: 0; background: transparent; color: var(--hsy-muted); cursor: pointer; display: grid; place-items: center; padding: 0; transition: background .12s, color .12s; } .hsy-stepper-btns button:hover { background: var(--hsy-hover); color: var(--hsy-ink); } .hsy-stepper-btns button + button { border-top: 1px solid var(--hsy-line); } /* Leading-symbol input (currency) */ .hsy-input-affix { position: relative; display: flex; align-items: center; } .hsy-input-affix > .hsy-prefix { position: absolute; left: 12px; font-family: var(--hsy-font-mono, 'JetBrains Mono', ui-monospace, monospace); color: var(--hsy-muted); font-size: 13px; pointer-events: none; } .hsy-input-affix > .hsy-input { padding-left: 26px; } /* Categories management screen */ .hsy-cat-manage { margin-top: 8px; } .hsy-cat-manage-row { display: grid; grid-template-columns: 1fr 120px auto; align-items: center; gap: 16px; padding: 12px 4px; border-bottom: 1px solid var(--hsy-line); } .hsy-cat-manage-row:last-child { border-bottom: 0; } .hsy-cat-manage-name { font-size: 14px; font-weight: 500; } .hsy-cat-manage-actions { display: inline-flex; gap: 6px; } /* ── Mobile hamburger + backdrop (hidden on desktop) ────────────────── */ .hsy-hamburger { display: none; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; border-radius: var(--hsy-r); cursor: pointer; flex-direction: column; gap: 4px; align-items: center; justify-content: center; } .hsy-hamburger span { display: block; width: 20px; height: 2px; background: var(--hsy-ink); border-radius: 2px; transition: transform .18s, opacity .18s; } .hsy-side-backdrop { display: none; position: fixed; inset: 0; background: rgba(10, 10, 10, 0.42); z-index: 90; } .hsy-app.is-side-open .hsy-side-backdrop { display: block; } /* ── Tablet (≤960px) ────────────────────────────────────────────────── */ @media (max-width: 960px) { .hsy-app { --hsy-pad: 20px; --hsy-side-w: 220px; } .hsy-stat-row { grid-template-columns: repeat(2, 1fr); } .hsy-rooms-grid { grid-template-columns: repeat(2, 1fr); } .hsy-board { grid-template-columns: repeat(2, 1fr); } .hsy-detail-body { grid-template-columns: 1fr; } .hsy-ref-grid { grid-template-columns: 1fr; } .hsy-h1 { font-size: 30px; } .hsy-h2 { font-size: 22px; } } /* ── Phone (≤640px) ─────────────────────────────────────────────────── */ @media (max-width: 640px) { /* Drop compact density — give content room to breathe */ .hsy-app, .hsy-app.density-compact { font-size: 14px; } .hsy-app { --hsy-pad: 14px; } /* Drawer sidebar */ .hsy-sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: min(82vw, 320px); z-index: 100; transform: translateX(-100%); transition: transform .22s cubic-bezier(.2,.8,.3,1); box-shadow: 0 10px 30px rgba(0,0,0,0.18); } .hsy-app.is-side-open .hsy-sidebar { transform: none; } .hsy-main { width: 100%; } .hsy-hamburger { display: inline-flex; margin-right: 4px; } /* Topbar shrinks, hides house meta pills */ .hsy-topbar { padding: 12px var(--hsy-pad); gap: 10px; } .hsy-crumb-current { font-size: 17px; } .hsy-top-meta { display: none; } /* Screen head wraps; smaller headings */ .hsy-screen-head { flex-direction: column; align-items: stretch; gap: 12px; } .hsy-screen-head > div:last-child { flex-wrap: wrap; } .hsy-screen { gap: 16px; } .hsy-h1 { font-size: 26px; } .hsy-h2 { font-size: 20px; } .hsy-h3 { font-size: 16px; } /* Stats: 1-col on narrow phones, 2-col stays for ≥420 via min/max */ .hsy-stat-row { grid-template-columns: 1fr 1fr; gap: 8px; } .hsy-stat { padding: 12px; border-radius: var(--hsy-r); } .hsy-stat-value { font-size: 22px; } /* Rooms: 1-col cards */ .hsy-rooms-grid { grid-template-columns: 1fr; gap: 12px; } .hsy-room-card-add { min-height: 80px; } /* Force action affordances visible (no hover on touch) */ .hsy-card-actions, .hsy-row-actions { opacity: 1; } .hsy-task-actionable .hsy-task-badge--room { /* keep visible since hover-hide breaks on touch */ opacity: 1 !important; } /* 44px tap targets */ .hsy-row-act { width: 36px; height: 36px; font-size: 16px; } .hsy-check { width: 28px; height: 28px; border-radius: 6px; } .hsy-side-add { width: 36px; height: 36px; } .hsy-btn { padding: 10px 14px; } .hsy-btn-icon { padding: 6px 10px; min-width: 36px; min-height: 36px; } .hsy-seg-btn { padding: 9px 14px; font-size: 14px; } /* Inputs: 16px to disable iOS focus zoom */ .hsy-input, input.hsy-input, select.hsy-input, textarea.hsy-input, .hsy-search-input, .hsy-add-input, .hsy-inline-input { font-size: 16px; } .hsy-input--num, .hsy-inline-input-num { font-size: 16px; } /* Shopping toolbar — stack vertically */ .hsy-shop-controls, .hsy-tools-row { flex-direction: column; align-items: stretch; gap: 10px; } .hsy-shop-controls .hsy-add-row, .hsy-tools-row .hsy-add-row { flex: 1 1 auto; } .hsy-search-input { flex: 1 1 auto; } .hsy-seg { width: 100%; } .hsy-seg-btn { flex: 1; text-align: center; } /* Shopping rows: drop the 7-col grid, switch to flexible card layout */ .hsy-shop-block { padding: 4px 12px; } .hsy-shop-row, .hsy-shop-row.hsy-shop-row-actionable { display: grid; grid-template-columns: 28px 1fr auto; grid-template-areas: "check name actions" ". url url" ". qty total"; gap: 4px 10px; padding: 12px 0; align-items: center; } .hsy-shop-row > .hsy-check { grid-area: check; } .hsy-shop-row > .hsy-shop-name { grid-area: name; align-self: center; } .hsy-shop-row > .hsy-shop-url { grid-area: url; align-self: start; } .hsy-shop-row > .hsy-shop-qty { grid-area: qty; justify-self: start; text-align: left; } .hsy-shop-row > .hsy-shop-each { display: none; } .hsy-shop-row > .hsy-shop-total { grid-area: total; justify-self: end; text-align: right; font-size: 15px; } .hsy-shop-row > .hsy-shop-actions { grid-area: actions; justify-self: end; } /* Hide table column headers entirely on mobile */ .hsy-shop-row.hsy-shop-head-row { display: none; } /* Add-row form: keep flex, taller tap */ .hsy-add-row { padding: 6px 12px; } .hsy-add-input { font-size: 16px; padding: 8px 0; } /* Generic item rows */ .hsy-item, .hsy-item.hsy-item-actionable { grid-template-columns: 28px 1fr auto; gap: 8px; padding: 12px 4px; } .hsy-item-qty, .hsy-item-price { font-size: 13px; } /* Tasks board: 1-col, hide drag grip (DnD doesn't work on touch) */ .hsy-board { grid-template-columns: 1fr; gap: 10px; } .hsy-col { min-height: 0; padding: 10px; } .hsy-task { cursor: default; } .hsy-task-grip { display: none; } .hsy-task-body { padding-left: 0; } .hsy-task-actionable .hsy-task-body { transform: none; } .hsy-task.hsy-task-actionable { padding-right: 14px; padding-bottom: 10px; } .hsy-task-actions { position: static; margin-left: auto; } .hsy-task-badge--room, .hsy-task-badge--assignee { position: static; max-width: none; } .hsy-task { flex-wrap: wrap; gap: 8px; } .hsy-task-body { width: 100%; } /* Room detail head: hide overlay (crumb shows room name), stack actions */ .hsy-detail-overlay { display: none; } .hsy-detail-actions { position: static; flex-wrap: wrap; padding: 8px 0 0; } .hsy-detail-head { display: flex; flex-direction: column; gap: 0; } /* Modals: full-bleed friendly sizing */ .hsy-modal { padding: 12px; } .hsy-modal-card, .hsy-modal-card--narrow, .hsy-modal-card--wide { max-width: 100%; max-height: calc(100vh - 24px); } .hsy-modal-head { padding: 18px 18px 4px; } .hsy-modal-body { padding: 14px 18px 16px; } .hsy-modal-foot { padding: 12px 14px 12px 18px; flex-wrap: wrap; } .hsy-modal-title { font-size: 19px; } .hsy-row-grid { grid-template-columns: 1fr; } .hsy-row-grid--qty { grid-template-columns: 1fr 1fr; } /* Photo edit row stacks */ .hsy-photo-edit { flex-direction: column; } .hsy-photo-edit-preview { width: 100%; height: auto; aspect-ratio: 4/3; flex-basis: auto; } /* Categories management — drop fixed cols */ .hsy-cat-manage-row { grid-template-columns: 1fr auto; gap: 10px; } }