/* Phase 124: extracted from pages.css. Source order preserved exactly; every rule here matches only the account screen's DOM, and this sheet loads immediately after pages.css at every load site, so the cascade is unchanged. Do not add a rule that can match another surface — put that in pages.css. ⚠️ THE FILE KEEPS ITS NAME. Phase 159 renamed views/profile.php to views/you.php and profile.js to you.js, but index.php's load order for this stylesheet is pinned by scripts/test_phase80_shell_corrections.mjs, and renaming it buys nothing the rename of the two modules did not already buy. */ /* Custom flag language dropdown (profile) */ .lang-dd{position:relative;} .lang-dd-toggle{width:100%;display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--background);border:2px solid var(--card-border);border-radius:8px;color:var(--text);font-size:1.05rem;font-family:inherit;cursor:pointer;text-align:left;transition:border-color 0.2s;} .lang-dd-toggle:hover{border-color:var(--primary);} .lang-dd-name{flex:1;} .lang-dd-caret{color:var(--text-muted);font-size:0.85rem;} .lang-dd-menu { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:50; max-height:240px; overflow-y:auto; padding:6px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:10px; box-shadow:0 14px 34px rgba(0,0,0,0.16); } .lang-dd-menu.hidden{display:none;} .lang-dd-option{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;color:var(--text-color);} .lang-dd-option:hover{background:rgba(111,95,228,0.08);} .lang-dd-option.active{background:var(--accent-glow);font-weight:700;} /* You -> Privacy and data (own activity log + GDPR data export) */ /* `.mydata-h3` went with Phase 166: Privacy and data is three `.you-card` sections now, and each heading is the shared `.you-card-title` inside a `.you-card-head`. A rule kept for a class the markup no longer uses is what the unused-CSS scan is for. */ .mydata-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:12px 0 14px;} .mydata-stat{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--card-border);border-radius:12px;background:var(--bg-color);} .mydata-stat-val{font-size:1.25rem;font-weight:800;color:var(--primary);} .mydata-stat-lab{font-size:0.76rem;color:var(--text-muted);font-weight:700;} .mydata-export-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;} .mydata-export-pw{width:auto;flex:1;min-width:190px;max-width:280px;padding:9px 12px;font-size:0.9rem;} /* ── You (Phase 159, on the canvas material since Phase 163) ────────────────────────────────────── One list of destinations and thirteen single-purpose screens behind it. ⚠️ You IS ITS OWN COLUMN, NOT THE SHARED `.lpage-grid`. Learn, Practice and Speak put a 340px report column beside an 800px main one; You IS the report, so it takes one wider column (1040px, the canvas's) and splits inside itself — Activity beside Achievements, the destinations two across. A right-hand column here would be a report beside a report. ⚠️ STILL NO ACCENT BUTTON ON THE ROOT (ui-contracts.md's design-restraint directive). Phase 163 gives this screen the app's material — a raised identity card, stat cards, a row card per destination — but not a primary action: it is a report and a set of doors, and a purple button here would compete with the one on whichever screen the learner came to act on. ⚠️ THE SUB-SCREENS ARE NOT RESTYLED. `.you-row` below is the hairline row of /you/account and /you/pro; the ROOT's destinations are `.lp-row.surface-item` inside `.you-rows.lp-panel`, so the two never share a rule. */ /* Phase 165 (D-4): 1040px → --learner-content-max (1164px), the ONE learner width. You is still its own single column, not the shared grid — it is now the same TOTAL width as Learn's main column plus its report column, which is the point: the content edge does not move as a learner crosses between the two. The card grids inside widen with it; Phase 166 restructures this screen into the settings workspace and owns whatever that reflow needs. */ .you-page{width:100%;max-width:var(--learner-content-max);margin:0 auto;padding:var(--app-content-top) var(--app-content-gutter) 96px;} /* The root's blocks are spaced by ONE gap rather than a margin-top per block: a card that declines to render (no activity yet, no badges) then leaves no hole where its margin was. */ #you-root{display:flex;flex-direction:column;gap:16px;} .you-skeleton{display:flex;flex-direction:column;gap:16px;} /* Phase 177b: the Overview's placeholder is built from the shared bars in the real frames (views/you.php), so the bare-span shimmer below is the HEADER's only — scoped to it, or it would flatten every bar in the Overview's placeholder into a 14px line. */ .you-hero-skeleton span{height:14px;border-radius:999px;background:linear-gradient(100deg,rgba(111,95,228,0.07) 30%,rgba(139,125,240,0.18) 50%,rgba(111,95,228,0.07) 70%);background-size:220% 100%;animation:youSkeletonSheen 1.25s ease-in-out infinite;} @keyframes youSkeletonSheen{to{background-position:-120% 0;}} .you-subhead{margin:0 0 10px;} .you-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--text-muted);font-size:0.9rem;font-weight:700;text-decoration:none;} .you-back:hover{color:var(--primary-hover);} .you-back:focus-visible{outline:3px solid var(--signal-cyan);outline-offset:2px;border-radius:10px;} .you-screen-title{margin:0 0 14px;font-family:var(--font-display);font-size:1.3rem;font-weight:800;} .you-screen-title:focus{outline:none;} .you-screen-title:focus-visible{outline:3px solid var(--signal-cyan);outline-offset:4px;border-radius:8px;} /* THE WIDE HEADER (Phase 174). The identity card this screen used to open on is gone: its avatar, name, rank line and level bar are the header's now, so what is left here is only what the shared `.lhero*` recipe (components.css) does not already own. ⚠️ THE AVATAR IS ITS OWN ROW, ABOVE THE NAME, and that is a measurement rather than a taste. The verification for this phase is that `.lhero-title`'s left edge equals the first panel's below it; an avatar in a column beside the copy pushes the heading right by its own width plus a gap, and the two edges then disagree by ~70px at every width. */ /* ⚠️ YOU'S HEADER TRACKS YOU'S COLUMN, NOT THE PAGE GRID'S. `.lhero-inner` caps at the grid's total (800 + 24 + 340) by default and responsive.css narrows that to `--lpage-main` below 1241px, where the right column folds under the main one — correct for Learn, Practice and Speak, wrong here: You is ONE wide column (`.you-page`, `--learner-content-max`) and never folds, so the heading was left 19.2px inside its own panels at 768. The two numbers are identical above 1240px, so this rule only ever bites in the band where the grid narrows and You does not. */ .you-lhero .lhero-inner{max-width:var(--learner-content-max);} .you-lhero-avatar{--you-avatar:56px;} .you-avatar{display:flex;align-items:center;justify-content:center;width:var(--you-avatar,56px);height:var(--you-avatar,56px);flex:none;border-radius:50%;border:1px solid var(--card-border);background:rgba(255,255,255,0.6);color:var(--primary);font-family:var(--font-display);font-size:1.5rem;font-weight:800;} /* The crown sits after the name; `.lhero-title` is not a flex row, so the gap is a margin. */ .lhero-title .you-crown{margin-left:8px;} .you-crown{color:var(--accent);font-size:0.85rem;} /* ⚠️ `.you-name` IS THE ERROR STATE'S HEADING ONLY now (youErrorHtml's `

You`). The success state's H1 is the header's `.lhero-title`, which carries the shared type scale; this one still needs a size or a failed load renders a browser-default 2em heading. */ .you-name{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--font-display);font-size:1.3rem;font-weight:800;line-height:1.2;} /* The header ships a skeleton so it has its shape before any endpoint answers — two bars, sized for the heading and the line under it rather than the root's three. */ .you-hero-skeleton{gap:10px;padding:0;} .you-hero-skeleton span:nth-child(1){width:min(280px,60%);height:34px;border-radius:12px;} .you-hero-skeleton span:nth-child(2){width:min(420px,80%);} /* Rank-tiered avatar frame (Phase 18) — auto-upgrades with rank (tier 0 = Cadet, default). */ .you-avatar.avatar-tier-1,.you-avatar.avatar-tier-2{border-color:var(--primary);box-shadow:inset 0 0 20px rgba(111,95,228,0.2),0 0 14px var(--primary-glow);} .you-avatar.avatar-tier-3,.you-avatar.avatar-tier-4{border-width:2px;border-color:var(--primary);box-shadow:inset 0 0 22px rgba(111,95,228,0.25),0 0 22px var(--primary-glow);} .you-avatar.avatar-tier-5,.you-avatar.avatar-tier-6{border-width:2px;border-color:var(--accent);box-shadow:inset 0 0 22px rgba(244,162,60,0.25),0 0 24px var(--accent-glow);} .you-avatar.avatar-tier-7,.you-avatar.avatar-tier-8{border-width:3px;border-color:var(--accent);box-shadow:inset 0 0 26px rgba(244,162,60,0.3),0 0 30px var(--accent-glow);animation:avatarAura 3s ease-in-out infinite;} /* The track, the fill and the XP line are `.lhero-bar` / `.lhero-bar-fill` / `.lp-chip` now (Phase 174). All this class still carries is the fill's travel, so the reduced-motion block at the foot of this sheet still has something to stand down. */ .you-level-fill{transition:width 0.85s cubic-bezier(0.16,1,0.3,1);} /* The four numbers, as stat cards (KIT §4: 36px icon tile, Baloo 2 800 28px number, 12px label). */ .you-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;} .you-tile{display:flex;align-items:center;gap:14px;min-width:0;padding:16px 18px;border-radius:20px;} .you-tile-ic{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:11px;background:rgba(111,95,228,0.1);color:var(--primary-hover);font-size:0.95rem;} .you-tile-ic--warm{background:rgba(244,130,92,0.14);color:#B84E2C;} .you-tile-ic--violet{background:rgba(111,95,228,0.1);color:var(--primary-hover);} .you-tile-ic--teal{background:var(--signal-cyan-soft);color:var(--signal-cyan);} .you-tile-ic--gold{background:rgba(244,162,60,0.16);color:#A9691F;} .you-tile-text{display:flex;flex-direction:column;gap:2px;min-width:0;} .you-tile-val{font-family:var(--font-display);font-size:1.75rem;font-weight:800;line-height:1;} .you-tile-lbl{overflow:hidden;color:var(--text-secondary);font-size:0.75rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap;} /* Activity beside Achievements above 720px; one under the other below (the media block at the end). */ /* STRETCH, not start (Phase 177a, owner): side by side, two cards of different heights read as a ragged pair — Activity stopped short beside Achievements. Stacked below 720px, so it only acts here. */ .you-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch;} /* ⚠️ A LONE CARD TAKES THE WHOLE ROW. Either card can decline to render (no badges yet, no active day yet — the no-zeros rule), and in a two-column grid the survivor sat in the left half with a hole beside it. you-render.js sets the modifier because it already knows which case this is. */ .you-pair.is-single{grid-template-columns:minmax(0,1fr);} .you-card{display:flex;flex-direction:column;gap:14px;min-width:0;padding:16px 18px;border-radius:20px;} .you-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;} /* ⚠️ THE THREE RESETS ARE LOAD-BEARING, NOT TIDYING. components.css's element rule paints every bare `h3` uppercase, letter-spaced and `--text-muted`; the same class on an `h2` (the root's cards) is untouched by it. Without these three declarations one class had two appearances, and every card title on Account and Privacy read "DELETE MY ACCOUNT" in ink LIGHTER than its own summary line — the inverted hierarchy the artboards were redrawn to remove. */ .you-card-title{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--font-display);font-size:1.15rem;font-weight:800;text-transform:none;letter-spacing:normal;color:var(--text-color);} .you-card-title>i{color:var(--primary-hover);font-size:0.85rem;} .you-card-note{color:var(--text-secondary);font-size:0.78rem;font-weight:700;white-space:nowrap;} .you-card-link{color:var(--text-secondary);font-size:0.78rem;font-weight:700;text-decoration:none;white-space:nowrap;} .you-card-link:hover,.you-card-link:focus-visible{color:var(--primary-hover);} .you-activity{display:flex;flex-direction:column;gap:10px;} .you-activity-strip{display:flex;gap:3px;} .you-activity-cell{flex:1 1 0;min-width:0;height:22px;border-radius:3px;background:var(--surface-item-bg);} /* ⚠️ The legend's swatches are a DIFFERENT class and a DIFFERENT attribute from the day cells: the Phase 159 suite counts `.you-activity-cell` to prove the strip is the reporting window, and counts distinct `data-level` values to prove the five intensity buckets reach the markup. A legend wearing either name would make both guards answer about the legend instead. */ .you-activity-cell[data-level="1"],.you-activity-swatch[data-heat="1"]{background:color-mix(in srgb,var(--primary) 22%,transparent);} .you-activity-cell[data-level="2"],.you-activity-swatch[data-heat="2"]{background:color-mix(in srgb,var(--primary) 45%,transparent);} .you-activity-cell[data-level="3"],.you-activity-swatch[data-heat="3"]{background:color-mix(in srgb,var(--primary) 70%,transparent);} .you-activity-cell[data-level="4"],.you-activity-swatch[data-heat="4"]{background:var(--primary);} .you-activity-legend{display:flex;align-items:center;gap:4px;} .you-activity-swatch{flex:0 0 12px;width:12px;height:12px;border-radius:3px;background:var(--surface-item-bg);} .you-activity-legend-lbl{color:var(--text-muted);font-size:0.7rem;font-weight:700;} .you-activity-legend-lbl:first-child{margin-right:2px;} .you-activity-legend-lbl:last-child{margin-left:2px;} .you-activity-line{margin:0;color:var(--text-secondary);font-size:0.82rem;font-weight:600;} /* The Achievements card's four badge tiles: two earned, then the next in progress. */ .you-badges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;} .you-badge{display:flex;align-items:flex-start;gap:10px;min-width:0;} .you-badge-ic{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:11px;background:var(--surface-item-bg);color:var(--text-muted);font-size:0.9rem;} .you-badge.is-earned .you-badge-ic{background:rgba(244,162,60,0.16);color:#A9691F;} .you-badge-text{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0;} .you-badge-name{overflow:hidden;font-size:0.86rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap;} .you-badge-detail{overflow:hidden;color:var(--text-secondary);font-size:0.74rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap;} .you-badge-track{display:block;height:5px;overflow:hidden;border-radius:999px;background:var(--surface-item-bg);} .you-badge-fill{display:block;height:100%;border-radius:999px;background:var(--primary);} .you-badge.is-earned .you-badge-fill{background:var(--accent);} /* Phase 161 — the Appearance row. It sits directly above the row list and takes the settings-row anatomy the app already has (.set-arow, admin.css). ⚠️ IN A PANEL OF ITS OWN SINCE PHASE 163's FIX ROUND. Bare, it sat straight on the page scenery between the report cards and the row panel, and the composition rule is that nothing sits on the background except a section heading. Same material, same width and the same corner radius as the row panel below, so the two read as one block. */ .you-prefs{padding:2px 16px;border-radius:20px;} .you-rows{display:flex;flex-direction:column;} /* The ROOT's destination list: the shared list panel, two row cards across above the shell's breakpoint (the You.dc.html grid) and one below. Scoped to `.lp-panel` so the hairline lists on /you/account and /you/pro — which are the same `.you-rows` element — keep their single column. */ .you-rows.lp-panel{gap:10px;} .you-rows--tail{margin-top:18px;} .you-row{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:0 2px;border:0;border-top:1px solid var(--card-border);border-radius:0;background:none;box-shadow:none;color:var(--text-color);font:inherit;text-align:left;text-decoration:none;cursor:pointer;} .you-rows>.you-row:first-child{border-top:0;} .you-row:hover{color:var(--primary-hover);background:none;box-shadow:none;transform:none;} .you-row:focus-visible{outline:3px solid var(--signal-cyan);outline-offset:-2px;border-radius:10px;} .you-row-label{flex:1;min-width:0;overflow:hidden;font-size:0.95rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap;} .you-row-chevron{flex:0 0 auto;color:var(--text-muted);font-size:0.72rem;} /* ⚠️ `you-row-crown`, `you-row-pill` and `you-row-dot` HAVE NO RULES OF THEIR OWN ANY MORE, on purpose: Phase 163 made all three the shared `.lp-chip` state meta, and a second rule set on the same span would fight the chip recipe over colour and radius for no gain. The names survive because test_phase159_you.mjs identifies each meta by them — they are the handle, not the style. */ /* Log out is a button, not a link — it acts rather than navigates, so it carries no chevron. ⚠️ TWO SELECTORS, NOT ONE. On the root it is a `.lp-row` inside `.lp-panel`, and that rule sets `color:var(--text-color)` at (0,2,0) — a bare `.you-row-action` at (0,1,0) loses to it, so the one destructive door on the screen would render in the same ink as "Account". */ .you-row-action,.you-rows .you-row-action{color:var(--danger);} .you-row-action:hover,.you-rows .you-row-action:hover{color:var(--danger);} .you-rows .you-row-action .lp-row-icon{background:rgba(239,68,68,0.1);color:var(--danger);} /* ── Phase 166: the settings WORKSPACE ──────────────────────────────────────────────────────────── Above the shell's own 1024 breakpoint You is a 280px index column beside the open section; below it the index is gone and the root's row panel is the list, exactly as it was. Everything here is written phone-first so the whole desktop half lives in ONE @media block at the end of the file — a second block above these rules would reverse the cascade the next reader expects (the CSS_MEDIA_ORDER lint's reason). */ .you-workspace{display:block;} /* The index is DISPLAY:NONE by default and shown only above 1025. It is rendered on every width — you.js does not know the viewport — so hiding it is what stops a phone painting the same list twice, once as the index and once as the root's rows. */ .you-index{display:none;} .you-pane{min-width:0;} /* One line under a screen's heading, never a paragraph (ui-contracts.md): it says what the screen is for, and anything longer goes behind an (i) beside the card it belongs to. */ .you-screen-sub{margin:-6px 0 18px;color:var(--text-secondary);font-size:0.92rem;line-height:1.4;} /* The DISCLOSURE half of the (i) rule (ui-contracts.md). Copy a learner will read and act on — what an export contains, the address to write to for more, what to do about a sign-in they do not recognise — expands inside the card instead of hiding in a hover bubble that a phone never shows and a mouse has to hold open. ⚠️ NO `display` HERE: the body is collapsed with the `hidden` attribute, and a display declaration would outrank the UA rule and leave it permanently open. */ .you-card-disclosure{margin:0 0 4px;} .you-card-disclosure>.vocab-hint:last-child{margin-bottom:0;} .you-card-info{color:var(--text-muted);font-size:0.78rem;cursor:help;} .you-card-info:focus-visible{outline:3px solid var(--signal-cyan);outline-offset:3px;border-radius:50%;} /* "At a glance" — four destination rows inside the shared list panel. The head sits in from the panel's padding so its title lines up with the row titles under it, not with the panel edge. */ .you-glance .you-card-head{padding:4px 4px 0;} .you-glance-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;} /* Two form fields that are one decision (Language's "I speak" / "I want to learn"). */ .you-fieldrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;} /* Learning settings is ONE form of three cards and ONE Save (D8), so the form is the stack. */ #you-screen-learning>form{display:flex;flex-direction:column;gap:16px;} #you-screen-learning>form>.btn{align-self:flex-start;} /* The group cards keep their markup and lose the hairline rule that separated them when they were bare sections — a keyline inside a card is a second frame around the same content. */ .settings-section.you-card{margin-bottom:0;padding:16px 18px;border-bottom:0;} /* The referral block is its own card now (you.js authors it), so the separator it used to need above it on a shared screen would draw a line under nothing. */ .you-refer.you-card{margin-top:0;padding-top:0;border-top:0;} /* ── Account: four collapsed cards on one screen ─────────────────────────────────────────────────── ⚠️ `.you-acard-body` MUST NOT BE GIVEN A `display`. It is collapsed with the `hidden` attribute, and any display declaration here would outrank the UA's `[hidden]{display:none}` — every form would then be open at once, which is the one-primary rule broken four ways. */ .you-acards{display:flex;flex-direction:column;gap:14px;} /* Phase 182 (the owner, 2026-09-20): OPAQUE. `--surface-item-bg` is a 5.5% violet wash — right for a row inside a panel, wrong for a card standing on the scenery, where the constellations showed through it. */ .you-acard{padding:14px 16px;border-radius:20px;} /* ⚠️ THE SHELL'S OWN SHAPE, or this loses: components.css paints `.surface-item` at (0,4,1) under `body:is(.app-shell-active,.app-shell-study):not(…):not(…)`, so a shorter selector leaves the card a 7.5% violet wash with the constellations showing through it (the owner, 2026-09-20). */ body:is(.app-shell-active,.app-shell-study):not(.app-shell-public-route):not(.hyper-theme) .you-acard.surface-item{background:var(--surface-base-bg);} /* ⚠️ THE WARM CARD KEEPS ITS WARMTH. The rule above ties components.css's `:is(.surface-item-warm,.is-due)` at (0,5,1) and wins on load order, which flattened Delete-my-account to the same white as its siblings (the detached review, 2026-09-20). The tint is that rule's own, laid over the opaque base rather than replacing it, so the card is both warm and solid. */ :root{--you-acard-warm:rgba(244,162,60,0.075);} body:is(.app-shell-active,.app-shell-study):not(.app-shell-public-route):not(.hyper-theme) .you-acard.surface-item:is(.surface-item-warm,.is-due){background-image:linear-gradient(var(--you-acard-warm),var(--you-acard-warm));background-color:var(--surface-base-bg);} /* A form that ends in a save stands in a bar of its own, as the admin's settings pages do. */ .you-form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px;padding:12px 16px;border:1px solid var(--surface-edge-shade);border-radius:16px;background:var(--surface-base-bg);box-shadow:var(--surface-shadow-base);} .you-form-actions>.profile-error:empty,.you-form-actions>.profile-success:empty{display:none;} .you-acard-head{display:flex;align-items:center;gap:14px;min-height:56px;} .you-acard-ic{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:rgba(111,95,228,0.1);color:var(--primary-hover);font-size:1.05rem;} .you-acard-ic--teal{background:var(--signal-cyan-soft);color:var(--signal-cyan);} .you-acard-ic--coral{background:rgba(244,130,92,0.14);color:#B84E2C;} .you-acard-text{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0;} /* Same three resets as `.you-card-title` above, and for the same reason — these are `h3`s too. */ .you-acard-title{margin:0;font-family:var(--font-display);font-size:1.05rem;font-weight:800;line-height:1.25;text-transform:none;letter-spacing:normal;color:var(--text-color);} .you-acard-title:focus{outline:none;} .you-acard-title:focus-visible{outline:3px solid var(--signal-cyan);outline-offset:3px;border-radius:8px;} .you-acard-line{overflow:hidden;color:var(--text-secondary);font-size:0.84rem;font-weight:600;line-height:1.3;text-overflow:ellipsis;white-space:nowrap;} /* ⚠️ THE CHIP NEEDS ITS OWN `[hidden]` RESTORE, and the body above does not. `.lp-chip` (components.css) declares `display:inline-flex` at (0,1,0), which OUTRANKS the UA sheet's `[hidden]{display:none}` — so `chip.hidden = !on` in you.js changed nothing and every account, two-factor on or off, showed a green "On" pill beside "Manage". The rule: any element toggled with the `hidden` ATTRIBUTE that also wears a display-bearing class needs this line, and the guard in test_phase166_you.mjs walks the view for the next one. */ .you-acard-chip{flex:0 0 auto;} .you-acard-chip[hidden]{display:none;} .you-acard-toggle{flex:0 0 auto;min-height:40px;} .you-acard-body{margin-top:14px;padding-top:14px;border-top:1px solid var(--card-border);} .you-acard-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px;} .you-error{margin:24px 0 12px;color:var(--text-muted);font-size:0.9rem;text-align:center;} .you-retry{display:block;margin:0 auto;} /* Streak freezes */ .you-freeze-count{margin:0 0 4px;font-family:var(--font-display);font-size:1.3rem;font-weight:800;} .you-freeze-fields{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;} .you-freeze-fields label{display:flex;flex-direction:column;gap:6px;font-size:0.85rem;font-weight:700;color:var(--text-muted);} .you-freeze-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:16px;} /* Nebulingo Pro */ .you-pro-status{margin:0;font-family:var(--font-display);font-size:1.15rem;font-weight:800;} .you-pro-plan{margin:2px 0 0;color:var(--text-muted);font-size:0.85rem;} .you-refer{margin-top:26px;padding-top:20px;border-top:1px solid var(--card-border);} .you-refer-head{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--font-display);font-size:1.05rem;} .you-refer-head i{color:var(--accent);} .you-refer-sub{margin:6px 0 0;color:var(--text-muted);font-size:0.88rem;} .you-refer-linkrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;} .you-refer-link{flex:1;min-width:200px;} .you-refer-stats{margin:10px 0 0;color:var(--text-muted);font-size:0.85rem;} /* The notifications list, mounted inline as /you/notifications rather than as the header popover. */ /* ⚠️ max-height AND overflow ARE PART OF THE UNDO, not decoration. The popover is a fixed box that scrolls inside itself; inline it is the page, and a viewport-derived max-height with overflow:hidden turned the sub-screen into a nested scroller trapped under the bottom tab bar. responsive.css's phone rule is scoped :not(.notification-panel-inline) for the same reason. */ /* ⚠️ IT IS A PAGE PANEL, NOT NOTHING (Phase 183, the owner: "the list needs a proper panel, its styling is off"). The undo above stripped the popover's fixed-box chrome — and left the list with no background, no border and no shadow at all, measured `rgba(0,0,0,0)` with `padding:0`, so the rows stood directly on the scenery. The material is the shell's own, the same three tokens every other list panel in the app reads, and the 6px inset is what makes the frame visible around the rows rather than a hairline they run into. */ .notification-panel-inline{position:static;width:100%;max-width:none;max-height:none;overflow:visible;margin:0;padding:6px;border:1px solid var(--surface-edge-shade);border-radius:20px;background:var(--surface-base-bg);box-shadow:var(--surface-shadow-base);} .notification-panel-inline .notification-panel-head{min-height:0;padding:6px 8px 10px;} /* Clearing what you have already read is a destructive action, so it is quiet and coral-inked rather than sitting beside "Mark all read" in the same primary violet — and it arms twice before it acts. */ .notification-clear-read{min-height:36px;padding:6px 8px;border:0;border-radius:9px;background:transparent;color:var(--text-muted);font-family:inherit;font-weight:800;font-size:0.76rem;cursor:pointer;} .notification-clear-read:hover:not(:disabled){background:rgba(239,68,68,0.09);color:var(--danger);} .notification-clear-read:disabled{opacity:0.55;cursor:default;} .notification-clear-read.is-arming{background:rgba(239,68,68,0.12);color:var(--danger);} .notification-clear-read:focus-visible{outline:3px solid var(--primary-glow);outline-offset:2px;} /* A row and its delete control: the row stays the button it was (a delete button cannot be nested inside it), so the two sit side by side and the X reveals itself on hover or focus — and stays put for a keyboard or touch user, who has no hover to reveal it with. */ .notification-row{display:flex;align-items:stretch;gap:4px;} .notification-row>.notification-item{flex:1;min-width:0;} .notification-drop{flex:0 0 34px;display:grid;place-items:center;align-self:center;width:34px;height:34px;border:0;border-radius:10px;background:transparent;color:var(--text-muted);font-size:0.8rem;cursor:pointer;opacity:0;transition:opacity 0.16s,background 0.16s,color 0.16s;} .notification-row:hover>.notification-drop,.notification-drop:focus-visible{opacity:1;} .notification-drop:hover{background:rgba(239,68,68,0.1);color:var(--danger);} .notification-drop:focus-visible{outline:3px solid var(--primary-glow);outline-offset:2px;} /* The BODY carries a second cap (components.css: max-height ~560px + overflow-y:auto), which is the same nested scroller one level down and is not width-dependent — it would bite on a desktop too. */ .notification-panel-inline .notification-panel-body{max-height:none;overflow:visible;} .notification-panel-inline:focus{outline:none;} /* Achievements showcase (Phase 18) — derived-badge trophy case, split by family (Ranks / Stellar Energy). */ .ach-section{margin-top:26px;} .ach-section:first-child{margin-top:8px;} .ach-section-title{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:1.1rem;margin:0;padding-bottom:10px;border-bottom:1px solid var(--card-border);} .ach-section-title i{color:var(--primary);} .ach-section-count{margin-left:auto;font-size:0.8rem;font-weight:700;color:var(--text-muted);} .ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;margin-top:16px;} .ach-badge { display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:18px 12px; border-radius:16px; border:1px solid var(--card-border); background:var(--card-bg); transition:transform 0.2s,box-shadow 0.2s; cursor:default; } .ach-badge:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.08);} .ach-icon{width:54px;height:54px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:1.5rem;} .ach-name{font-weight:800;font-size:0.95rem;} .ach-detail{font-size:0.72rem;color:var(--text-muted);} .ach-bar{width:100%;height:5px;border-radius:5px;background:var(--card-border);overflow:hidden;margin-top:4px;} .ach-bar-fill{height:100%;background:var(--primary);border-radius:5px;} .ach-badge.earned .ach-icon{color:#fff;background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 4px 12px var(--primary-glow);} .ach-badge.earned.ach-xp .ach-icon{background:linear-gradient(135deg,var(--accent),#f6c453);box-shadow:0 4px 12px var(--accent-glow);} .ach-badge.locked{opacity:0.7;} .ach-badge.locked .ach-icon{color:var(--text-muted);background:var(--card-border);} .ach-badge.locked .ach-name{color:var(--text-muted);} /* Two-factor authentication panel (Profile › Security) */ .mfa-status{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;} .mfa-status i{font-size:1.3rem;} .mfa-status.mfa-on i{color:var(--primary);} .mfa-status.mfa-off i{color:var(--text-muted);} .mfa-sub{color:var(--text-muted);font-size:0.92rem;margin:8px 0 18px;line-height:1.45;} .mfa-actions{display:flex;flex-wrap:wrap;gap:12px;} .mfa-setup,.mfa-confirm,.mfa-done{margin-top:22px;padding-top:20px;border-top:1px solid var(--card-border);} .mfa-setup p,.mfa-confirm p,.mfa-done p{margin:0 0 12px;line-height:1.5;} .mfa-confirm input,.mfa-setup input{margin-bottom:12px;} .mfa-key { font-family:var(--font-mono,monospace); font-size:1.25rem; font-weight:700; letter-spacing:2px; background:var(--bg-color); border:1px dashed var(--primary); border-radius:12px; padding:16px 18px; text-align:center; word-break:break-all; cursor:pointer; transition:background 0.2s,border-color 0.2s; margin-bottom:12px; } .mfa-key:hover{background:#eef2ff;} .mfa-key.copied{border-style:solid;border-color:var(--primary);background:#e0f2fe;} .mfa-key.copied::after{content:" ✓ copied";font-size:0.8rem;letter-spacing:normal;color:var(--primary);} .mfa-verify-row{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;} .mfa-verify-row input{flex:1;min-width:140px;margin-bottom:0;text-align:center;letter-spacing:6px;font-size:1.2rem;font-weight:700;} .mfa-codes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0;} .mfa-codes span { font-family:var(--font-mono,monospace); font-size:1.05rem; font-weight:700; letter-spacing:2px; text-align:center; background:var(--bg-color); border:1px solid var(--card-border); border-radius:8px; padding:10px; user-select:all; } .mfa-err{color:var(--danger);font-weight:700;font-size:0.9rem;min-height:1.1em;} .mfa-qr{display:flex;align-items:center;justify-content:center;padding:16px;background:#fff;border:1px solid var(--card-border);border-radius:16px;margin-bottom:14px;min-height:160px;} .mfa-qr .qr-canvas{width:220px;height:220px;image-rendering:pixelated;border-radius:4px;} .mfa-qr-load{color:var(--text-muted);font-size:1.6rem;} .mfa-manual{margin-bottom:14px;} .mfa-manual-toggle{cursor:pointer;color:var(--primary);font-weight:700;font-size:0.9rem;list-style:none;} .mfa-manual-toggle::-webkit-details-marker{display:none;} .mfa-manual[open] .mfa-manual-toggle{margin-bottom:8px;} .danger-zone-banner { background:#fee2e2; border:1px solid rgba(239,68,68,0.2); padding:15px; border-radius:12px; margin-bottom:20px; color:#991b1b; font-size:0.95rem; } .danger-zone-banner-desc{margin:8px 0 0;color:#b91c1c;line-height:1.5;} .warning-zone-banner { background:#fffbeb; border:1px solid rgba(244,162,60,0.2); padding:15px; border-radius:12px; margin-bottom:20px; color:#92400e; font-size:0.95rem; } .warning-zone-banner-desc{margin:8px 0 0;color:#b45309;line-height:1.5;} /* --- Support tickets (Phase 59) --- */ .support-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;} .support-email-opt{display:flex;align-items:center;gap:8px;font-size:0.85rem;color:var(--text-muted);cursor:pointer;} .support-chip-bad{color:var(--danger);border-color:rgba(239,68,68,0.4);} .support-form{display:flex;flex-direction:column;gap:9px;} .support-diag-opt{display:flex;align-items:flex-start;gap:9px;font-size:0.82rem;color:var(--text-muted);cursor:pointer;line-height:1.45;} .support-diag-opt input{margin-top:3px;flex:none;} .support-nudge{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:0.82rem;padding:9px 12px;border:1px solid rgba(111,95,228,0.35);border-radius:10px;background:rgba(111,95,228,0.07);color:var(--text-color);} .support-nudge.hidden{display:none;} .support-nudge i{color:var(--primary);} /* The You root's desktop split: the destinations two across from the shell's own breakpoint up. It is the SAME 1024 the header-tabs/tab-bar swap uses (responsive.css), because the rows fold for the same reason the shell does — below it there is no room for two columns of anything. */ /* Phase 166: above the shell's breakpoint the 280px index column IS the navigation, so the root's own row panel and the back link both stand down — three ways to reach the same ten screens on one viewport is what the restructure was for. Below it nothing here applies and the phone keeps the flat list it has had since Phase 159. */ /* Phase 181: THE ADMIN MENU IS THIS MENU, so the anatomy moved OUT of the >=1025 block below — the admin panel keeps its own menu at every width and a copy of these rules is what let it drift (its rows were `.btn` buttons that never inherited the page font, so they rendered in Arial). You is untouched: its index is `display:none` under 1025, so nothing here reaches the phone list it keeps. */ /* Phase 172: THE INDEX IS NAVIGATION, SO IT IS TEXT AND AIR. It used to be eleven `.surface-item` row cards — a tile, a border, a keyline, a trace and a shadow each — standing beside a pane of three to five content cards, which put sixteen framed boxes on one 1440 screen and gave the eye nothing to tell the steering from the content. That is what the owner read as "not balanced". The panel is now the only frame; a row is a glyph, a label and air; three short kickers make a column of eleven read as three. Nothing here escapes the ≥1025 block, because below it the index is `display:none` and the phone keeps the row cards. */ .you-nav-group{display:flex;flex-direction:column;gap:1px;} /* ⚠️ `--text-secondary`, NOT `--text-muted`: 11px at weight 800 is still normal text for AA, and #7A7596 measures 4.36:1 on white (ui-contracts.md). A kicker names the rows under it and has to be readable, not merely present. */ .you-nav-kicker{margin:0 0 5px;padding:0 10px;color:var(--text-secondary);font-size:0.69rem;font-weight:800;letter-spacing:0.11em;text-transform:uppercase;} /* ⚠️ `width:100%` IS FOR THE BUTTONS IN THIS LIST, NOT TIDINESS (Phase 183, the owner: "You's Log out should be a full-width row like the other index rows"). Most rows are ``, which fills the column; Log out and the admin menu's back control are `