[
  {
    "id": "global-header",
    "name": "Global header",
    "category": "Navigation",
    "provenance": "observed-adapted",
    "anatomy": [
      "Supplied PtaKaro wordmark linked to home",
      "Primary destinations",
      "Search control",
      "Saved items or account entry only when available"
    ],
    "variants": [
      "Paper with bottom divider",
      "Ink with reverse wordmark"
    ],
    "states": {
      "default": "60 px product-header height across desktop and mobile; paper background; ink labels.",
      "hover": "Underline or quiet surface on a destination; never change layout.",
      "focus_visible": "Two-tone 2 px focus ring with 4 px offset.",
      "current": "Use aria-current=page and a persistent visual marker.",
      "expanded": "Menu trigger reports aria-expanded and owns its panel."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "60 px header; retain a 140 px wordmark when space permits; use the standalone symbol only in a constrained utility context. Expose labeled Menu and Search buttons."
    },
    "accessibility": [
      "Use a labeled nav landmark and a skip-to-main link.",
      "Navigation links remain real links; menu toggles are buttons.",
      "Do not trap focus in a nonmodal desktop dropdown."
    ],
    "usage": [
      "Limit primary choices to the actual content taxonomy.",
      "Reserve the lime accent for the active task or primary action."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-website/apple-homepage-source.html",
        "selector": "globalnav-list",
        "line": 132,
        "evidence": "The reference header has a named navigation list, search control, and compact menu trigger."
      },
      {
        "file": "workspace/ptakaro-brand-site/dist/index.html",
        "selector": "<header>",
        "line": 4,
        "evidence": "Existing PtaKaro guide uses a sticky logo/navigation header."
      }
    ],
    "adaptation": "Keep the navigation hierarchy and compact density; use the PtaKaro assets and readable label sizes instead of Apple glyphs or typography."
  },
  {
    "id": "mobile-navigation",
    "name": "Mobile navigation sheet",
    "category": "Navigation",
    "provenance": "observed-adapted",
    "anatomy": [
      "Menu trigger",
      "Sheet title",
      "Close control",
      "Vertical navigation list",
      "Optional nested disclosure"
    ],
    "variants": [
      "Full-width sheet below the header",
      "Nested category panel"
    ],
    "states": {
      "closed": "Panel content is inert and absent from the tab order.",
      "open": "Show the menu in a paper surface; preserve the current location.",
      "nested": "Provide an explicit Back button and visible parent label.",
      "focus_visible": "Focus ring stays inside the viewport."
    },
    "responsive": {
      "large": "Hide the compact trigger when a complete desktop navigation fits.",
      "medium": "Collapse only when content no longer fits; do not rely solely on device naming.",
      "small": "Use the available viewport height with safe-area padding; scroll the menu region, not both body and panel simultaneously."
    },
    "accessibility": [
      "Use a native dialog if the sheet blocks the page, otherwise use disclosure semantics.",
      "For modal sheets, move focus inside, support Escape, and return focus to Menu.",
      "Touch targets are at least 44 × 44 px."
    ],
    "usage": [
      "Keep all essential destinations reachable on small screens.",
      "Use plain navigation lists, not application menu roles for ordinary website links."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-iphone/source.html",
        "selector": "globalnav-menutrigger-button",
        "line": 529,
        "evidence": "Reference source has a compact menu trigger with aria-controls."
      },
      {
        "file": "workspace/ptakaro-iphone/source.html",
        "selector": "globalnav-menuback-button",
        "line": 465,
        "evidence": "Reference source has an explicit main-menu back button."
      }
    ],
    "adaptation": "The menu trigger and back structure are observed; sheet dimensions and focus management are recommended implementation behavior."
  },
  {
    "id": "category-rail",
    "name": "Category and product rail",
    "category": "Navigation",
    "provenance": "observed-adapted",
    "anatomy": [
      "Labeled nav region",
      "Consistent product thumbnail or category icon",
      "Category name",
      "Optional factual status label"
    ],
    "variants": [
      "Image-led product family rail",
      "Text-only topic rail"
    ],
    "states": {
      "default": "Equal visual slots with 12 px image-to-label spacing.",
      "hover": "Underline the label.",
      "focus_visible": "Visible ring without clipping.",
      "current": "Underline and aria-current; retain legible ink text."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Allow native horizontal scrolling with a visible trailing item and 16 px edge padding; do not shrink every category into the viewport."
    },
    "accessibility": [
      "Use a list of links inside nav.",
      "If the adjacent label identifies the image, use empty alt text.",
      "No automatic rail scrolling or focus-triggered navigation."
    ],
    "usage": [
      "Use when visitors need to move between product families.",
      "Keep the full taxonomy reachable through a browse-all link when the rail is selective."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-iphone/source.html",
        "selector": "id=\"chapternav\"",
        "line": 651,
        "evidence": "The category page includes a labeled product-family navigation with picture and text links."
      }
    ],
    "adaptation": "Adapt the shallow visual browsing rail with licensed product imagery or PtaKaro icons."
  },
  {
    "id": "breadcrumbs",
    "name": "Breadcrumb trail",
    "category": "Navigation",
    "provenance": "observed-adapted",
    "anatomy": [
      "Home link or symbol",
      "Ancestor links",
      "Current page text",
      "Decorative separators"
    ],
    "variants": [
      "Full hierarchy",
      "Compact parent link on narrow pages"
    ],
    "states": {
      "default": "12–14 px slate text; links remain distinguishable.",
      "hover": "Underline the ancestor.",
      "focus_visible": "Ink focus ring with offset.",
      "current": "Current destination is plain text or aria-current=page."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Wrap cleanly or show the immediate parent; do not create a horizontally clipped text row."
    },
    "accessibility": [
      "Use nav aria-label=Breadcrumb and an ordered list.",
      "Hide separators from assistive technology.",
      "Do not replace understandable names with unexplained icons."
    ],
    "usage": [
      "Use on deep product and guide pages.",
      "Omit from a homepage or one-level landing page."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-watch-compare/source.html",
        "selector": "ac-gf-breadcrumbs-item",
        "line": 12732,
        "evidence": "Reference footer contains a breadcrumb hierarchy."
      }
    ],
    "adaptation": "The trail is an orientation aid, not a second global navigation."
  },
  {
    "id": "section-navigation",
    "name": "Local section navigation",
    "category": "Navigation",
    "provenance": "observed-adapted",
    "anatomy": [
      "Page or product title",
      "Section links",
      "Optional persistent task action"
    ],
    "variants": [
      "In-page anchor bar",
      "Sticky compact bar"
    ],
    "states": {
      "default": "Paper/white surface with a line divider.",
      "current": "Underline the active section and set aria-current=location where reliable.",
      "hover": "Underline affordance without reflow.",
      "focus_visible": "Outline stays clear of the sticky boundary."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Use a scrollable text rail or a labeled section picker; retain section labels rather than displaying icon-only tabs."
    },
    "accessibility": [
      "Anchor links reference unique section IDs.",
      "Apply scroll-margin-top so headings and focus are not hidden by sticky UI.",
      "Do not use tab roles unless only one associated panel is shown."
    ],
    "usage": [
      "Use on long product and comparison pages.",
      "Avoid stacking a global header, local header, and tray until they consume the screen."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-mac-shop/source.html",
        "selector": "rf-navbar",
        "line": 1066,
        "evidence": "Store source declares a contextual navigation mount point."
      },
      {
        "file": "workspace/ptakaro-iphone/source.html",
        "selector": "localnav-wrap",
        "line": 653,
        "evidence": "Category source includes local navigation structure."
      }
    ],
    "adaptation": "The local navigation structure is observed; scroll tracking and responsive section picker are proposed PtaKaro behaviors."
  },
  {
    "id": "footer",
    "name": "Footer and legal directory",
    "category": "Navigation",
    "provenance": "observed-adapted",
    "anatomy": [
      "Grouped navigation columns",
      "Brand/home link",
      "Legal and editorial policy links",
      "Locale control only if supported"
    ],
    "variants": [
      "Desktop directory",
      "Compact mobile disclosures"
    ],
    "states": {
      "default": "Paper surface; 12–14 px readable text; line separators.",
      "hover": "Underline text links.",
      "expanded": "Mobile group button updates aria-expanded.",
      "focus_visible": "Outline remains visible on all links and disclosure buttons."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Stack groups; use real disclosure buttons or details/summary where helpful. Keep legal links visible."
    },
    "accessibility": [
      "Use a contentinfo landmark and meaningful group headings.",
      "Do not set role=presentation on interactive disclosure buttons.",
      "Keep footer text readable at zoom and narrow widths."
    ],
    "usage": [
      "Publish only actual destinations and approved contact details.",
      "Include sourcing, corrections, affiliate disclosure, privacy, and terms when those pages exist."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-website/apple-homepage-source.html",
        "selector": "ac-gf-directory-column-section-title-button",
        "line": 1483,
        "evidence": "Reference footer has grouped columns and mobile disclosure buttons."
      }
    ],
    "adaptation": "Retain information hierarchy while replacing all reference-company legal copy and links."
  },
  {
    "id": "announcement-ribbon",
    "name": "Announcement ribbon",
    "category": "Messaging",
    "provenance": "observed-adapted",
    "anatomy": [
      "One concise statement",
      "Contextual link",
      "Optional dismiss button"
    ],
    "variants": [
      "Paper informational",
      "Lime high-priority editorial notice"
    ],
    "states": {
      "default": "Text wraps naturally within the content width.",
      "hover": "Underline the contextual link.",
      "dismissed": "Persist dismissal only when appropriate to the specific notice.",
      "focus_visible": "Link and dismiss action retain separate focus targets."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Use 16 px side padding and natural height; never marquee or clip the message."
    },
    "accessibility": [
      "Use normal document flow for static notices; do not announce promotional text as an alert.",
      "A dismiss button has an explicit label.",
      "Do not rely on color alone to convey urgency."
    ],
    "usage": [
      "Use for a real update, maintenance note, or qualified content announcement.",
      "Do not fabricate trade-in, delivery, discount, or finance promises from the Apple references."
    ],
    "motion": {
      "default": "No animated color intro; optional 160 ms opacity dismissal.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-iphone/source.html",
        "selector": "ac-ribbon__upgrade-2026-content-copy",
        "line": 626,
        "evidence": "The reference uses a narrow one-message ribbon with a contextual link."
      }
    ],
    "adaptation": "Use the format only; no Apple offer or service claim transfers to PtaKaro."
  },
  {
    "id": "button-primary",
    "name": "Primary button",
    "category": "Actions",
    "provenance": "observed-adapted",
    "anatomy": [
      "Action label",
      "Optional leading/trailing 16–20 px icon",
      "Optional busy indicator"
    ],
    "variants": [
      "Lime fill with ink label",
      "Ink fill with white label for quiet or lime surfaces",
      "Compact 44 px and default 44 px heights"
    ],
    "states": {
      "default": "999 px pill radius for product primary actions; 44 px height; 16–24 px inline padding; 14–16 px/700 label. A compact 40 px visual button retains a 44 px interactive wrapper.",
      "hover": "Master product tokens use lime hover #B6E329 and ink hover #263248.",
      "pressed": "Proposed lime pressed #AED823; avoid moving surrounding layout.",
      "focus_visible": "2 px contrasting ring with 4 px offset, never color change alone.",
      "disabled": "Quiet surface and slate label; use disabled when truly unavailable and explain why.",
      "loading": "Keep width and action label; add a spinner and aria-busy."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Use full width only for a dominant single action or a stacked form; otherwise size to content. Maintain 44 px minimum target."
    },
    "accessibility": [
      "Use button for actions and an anchor for navigation.",
      "Accessible name begins with the visible label.",
      "Do not remove focus during an asynchronous action."
    ],
    "usage": [
      "Use one primary action per decision cluster.",
      "Labels describe the result: Compare phones, Save list, View details."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-website/apple-homepage-source.html",
        "selector": "tile-ctas",
        "line": 240,
        "evidence": "Campaign tiles group primary and secondary CTA links."
      },
      {
        "file": "workspace/ptakaro-brand-site/dist/brand-tokens.json",
        "selector": "\"colors\"",
        "line": 3,
        "evidence": "Approved PtaKaro palette, fonts, button/card radii, and spacing scale."
      }
    ],
    "adaptation": "Hierarchy comes from the reference and ink/lime coloring from the approved palette. The product guide proposes pill actions as an extension; the pre-existing identity token remains 12 px for buttons. Fields and regular rectangular controls remain 12 px."
  },
  {
    "id": "button-secondary",
    "name": "Secondary button",
    "category": "Actions",
    "provenance": "observed-adapted",
    "anatomy": [
      "Action label",
      "Optional icon",
      "Visible boundary"
    ],
    "variants": [
      "Outline on paper or white",
      "Soft neutral fill",
      "Reverse on ink"
    ],
    "states": {
      "default": "999 px product-action pill radius and 44 px height, aligned with the primary button; rectangular utility variants keep 12 px corners.",
      "hover": "Paper/white variant gains proposed #F5F5F7 fill and ink boundary.",
      "pressed": "Use a slightly darker neutral fill.",
      "focus_visible": "Same focus system as the primary button.",
      "disabled": "Retain a discernible label; do not suggest it is active.",
      "loading": "Preserve label and geometry."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Stack with the primary action when labels no longer fit; keep action order consistent."
    },
    "accessibility": [
      "Use proper action or link semantics.",
      "Interactive borders need adequate contrast; the pale decorative line token alone is insufficient.",
      "Do not use opacity to obscure an actionable control."
    ],
    "usage": [
      "Use for a viable alternative such as Add to compare beside View details.",
      "Keep the secondary action subordinate through fill, not smaller touch area."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-website/apple-homepage-source.html",
        "selector": "button-secondary",
        "line": 242,
        "evidence": "Homepage campaign CTAs include a secondary button treatment."
      },
      {
        "file": "workspace/ptakaro-brand-site/dist/brand-tokens.json",
        "selector": "\"colors\"",
        "line": 3,
        "evidence": "Approved PtaKaro palette, fonts, button/card radii, and spacing scale."
      }
    ],
    "adaptation": "Adapt the action hierarchy to PtaKaro colors; the master product guide uses pill CTA buttons as an extension of the earlier 12 px button token."
  },
  {
    "id": "text-link",
    "name": "Text link and CTA pair",
    "category": "Actions",
    "provenance": "observed-adapted",
    "anatomy": [
      "Descriptive link label",
      "Optional directional chevron",
      "Optional accompanying primary action"
    ],
    "variants": [
      "Inline body link",
      "Standalone editorial CTA",
      "Inverse on ink"
    ],
    "states": {
      "default": "Ink with underline in running text; slate is secondary copy, not the sole link affordance.",
      "hover": "Underline standalone link; icon may shift 2 px.",
      "focus_visible": "Visible outline around the complete link.",
      "visited": "May remain brand ink if reading context retains navigation history."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Allow long labels to wrap; provide comfortable vertical spacing in groups."
    },
    "accessibility": [
      "Link text identifies the destination without relying on surrounding imagery.",
      "Decorative chevrons are aria-hidden.",
      "For repeated Learn more labels, add the specific subject to the accessible name."
    ],
    "usage": [
      "Use links for navigation, buttons for changing state.",
      "Limit CTA pairs to two clear choices in a campaign panel."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-iphone/source.html",
        "selector": "icon-wrapper ac-ribbon",
        "line": 628,
        "evidence": "Reference link markup separates visible copy from a decorative directional icon."
      },
      {
        "file": "workspace/ptakaro-website/apple-homepage-source.html",
        "selector": "tile-ctas",
        "line": 240,
        "evidence": "Campaign tiles group primary and secondary CTA links."
      }
    ],
    "adaptation": "Keep the simple action pair mechanic and descriptive text; no Apple-specific destinations."
  },
  {
    "id": "icon-button",
    "name": "Icon button",
    "category": "Actions",
    "provenance": "observed-adapted",
    "anatomy": [
      "16–24 px icon",
      "44 px target",
      "Accessible label",
      "Optional pressed indicator"
    ],
    "variants": [
      "Quiet square with 12 px radius",
      "Circular carousel paddle",
      "High-contrast card disclosure"
    ],
    "states": {
      "default": "Ink icon on neutral surface.",
      "hover": "Neutral fill or contrasting tint.",
      "pressed": "Slightly stronger fill without icon distortion.",
      "focus_visible": "Clearly separated ring.",
      "disabled": "Native disabled state; carousel endpoint remains understandable.",
      "selected": "Use aria-pressed for true toggles such as Save."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Keep full target size even when the visual glyph is small; do not rely on hover tooltips."
    },
    "accessibility": [
      "Provide a contextual label such as Next buying guides or Save this phone.",
      "Decorative SVGs use aria-hidden=true.",
      "Use button type=button to avoid accidental form submission."
    ],
    "usage": [
      "Use familiar icons sparingly.",
      "Pair destructive or unfamiliar actions with visible text."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-iphone/source.html",
        "selector": "card-control",
        "line": 1076,
        "evidence": "Feature cards use labeled disclosure buttons."
      },
      {
        "file": "workspace/ptakaro-iphone/source.html",
        "selector": "paddlenav-arrow",
        "line": 2035,
        "evidence": "Galleries use labeled previous/next buttons."
      }
    ],
    "adaptation": "Round paddles may remain a functional exception to the 12 px button token; the default standalone control uses 12 px corners."
  },
  {
    "id": "search-field",
    "name": "Search field and suggestions",
    "category": "Forms",
    "provenance": "observed-adapted",
    "anatomy": [
      "Persistent visible label",
      "Search input",
      "Search icon",
      "Clear button",
      "Optional suggestion list"
    ],
    "variants": [
      "Compact header search",
      "Prominent discovery search",
      "Dialog search"
    ],
    "states": {
      "empty": "Helpful placeholder supplements the label.",
      "focus_visible": "Ink boundary and ring; keep label visible.",
      "typing": "Debounce remote suggestions and indicate work without clearing the query.",
      "results": "Show product/category groups with clear labels.",
      "no_results": "Repeat the query and offer correction or browse paths.",
      "error": "Keep the query and expose Retry.",
      "disabled": "Explain unavailability instead of showing a dead primary entry point."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Use full available width, 44 px input height, 16 px text, and inputmode=search; render suggestions within the viewport."
    },
    "accessibility": [
      "Use a search form and explicit input label.",
      "For autocomplete, implement combobox/listbox semantics with Arrow keys, Enter, and Escape; do not claim this behavior exists from markup alone.",
      "Announce result counts politely and do not force focus into suggestions."
    ],
    "usage": [
      "Search title, model, category, or question.",
      "No fabricated popular searches or result totals."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-app-store/source.html",
        "selector": "search-input__text-field",
        "line": 47,
        "evidence": "Reference has a search input with suggestion relationships."
      },
      {
        "file": "workspace/ptakaro-brand-site/dist/index.html",
        "selector": "class=\"searchbox\"",
        "line": 11,
        "evidence": "Existing PtaKaro concept includes a prominent question-led search field."
      }
    ],
    "adaptation": "The field pattern is observed; full suggestion keyboard handling and error recovery are PtaKaro requirements."
  },
  {
    "id": "select-field",
    "name": "Model and sort selector",
    "category": "Forms",
    "provenance": "observed-adapted",
    "anatomy": [
      "Visible label",
      "Selected value",
      "Chevron",
      "Option list",
      "Optional help text"
    ],
    "variants": [
      "Native select by default",
      "Searchable combobox for large model sets"
    ],
    "states": {
      "default": "44 px height, 12 px radius, white fill, visible neutral border.",
      "hover": "Border becomes ink.",
      "focus_visible": "Ink ring with offset.",
      "selected": "Selection persists in the URL or page state.",
      "invalid": "Text error and icon supplement error border.",
      "disabled": "Explain why the model/option is unavailable."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Use one selector per compared item; labels may wrap; use the system picker for a native select."
    },
    "accessibility": [
      "Associate a label with each control, including distinct Model 1 and Model 2 names.",
      "Do not navigate on focus or merely opening the list.",
      "Announce updated comparison content without moving keyboard focus."
    ],
    "usage": [
      "Use for model replacement and sort order.",
      "Disable duplicate model selections only with an explanation or offer a swap."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-watch-compare/reference.css",
        "selector": ".template-dropdown .selector-element",
        "line": 1,
        "evidence": "Comparison stylesheet contains bordered dropdown selector styling and a 200 ms border transition."
      }
    ],
    "adaptation": "Selector styling is evidenced in local CSS, not verified through browser interaction; PtaKaro uses 12 px instead of source-specific radii."
  },
  {
    "id": "segmented-control",
    "name": "Segmented view control",
    "category": "Forms",
    "provenance": "proposed-extension",
    "anatomy": [
      "Two to four mutually exclusive labels",
      "Selected segment surface",
      "Group label"
    ],
    "variants": [
      "Grid/List view",
      "All details/Differences view"
    ],
    "states": {
      "default": "Quiet neutral track and ink labels.",
      "selected": "White or ink selected segment with explicit state.",
      "hover": "Subtle neutral fill.",
      "focus_visible": "Ring around focused segment.",
      "disabled": "Explain unavailable views if present."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Fit only concise labels; wrap to ordinary controls or a select instead of compressing text."
    },
    "accessibility": [
      "Use radios for an exclusive setting, or tabs only when switching associated panels.",
      "Implement correct Arrow-key navigation for the chosen semantic pattern.",
      "Expose group name and selected state."
    ],
    "usage": [
      "Use only for a small, stable set of equivalent views.",
      "Do not style navigation to unrelated pages as a setting."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-brand-site/dist/brand-tokens.json",
        "selector": "\"colors\"",
        "line": 3,
        "evidence": "Approved PtaKaro palette, fonts, button/card radii, and spacing scale."
      },
      {
        "file": "workspace/ptakaro-watch-compare/reference.css",
        "selector": ".section-compare-table .compare-header-row,.section-compare-table .compare-row",
        "line": 1,
        "evidence": "Comparison CSS aligns product columns in a grid; three columns become two at the medium breakpoint."
      }
    ],
    "adaptation": "Proposed extension for PtaKaro filtering and comparison; no segmented-control behavior is asserted from these Apple captures."
  },
  {
    "id": "filter-chip",
    "name": "Filter chip",
    "category": "Forms",
    "provenance": "proposed-extension",
    "anatomy": [
      "Human-readable filter label",
      "Optional count",
      "Selected checkmark or remove control"
    ],
    "variants": [
      "Selectable filter",
      "Applied filter with remove action"
    ],
    "states": {
      "default": "Paper or white fill and visible outline.",
      "hover": "Quiet neutral fill.",
      "selected": "Ink text on lime with a checkmark or explicit remove action.",
      "focus_visible": "Distinct ring.",
      "disabled": "Unavailable values retain explanatory context."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Wrap applied filters; keep the full label readable; provide Clear filters when more than one is applied."
    },
    "accessibility": [
      "Use buttons with aria-pressed for toggles or native checkboxes styled as chips.",
      "Remove controls name the exact filter.",
      "Announce changed result counts politely."
    ],
    "usage": [
      "Use for budget, brand, storage, or content type only when data supports them.",
      "Preserve filters in navigation history and the shareable URL."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-brand-site/dist/brand-tokens.json",
        "selector": "\"colors\"",
        "line": 3,
        "evidence": "Approved PtaKaro palette, fonts, button/card radii, and spacing scale."
      }
    ],
    "adaptation": "Proposed extension using the approved palette and control sizing; not an observed Apple component in this source set."
  },
  {
    "id": "form-field",
    "name": "Text field, checkbox, and switch",
    "category": "Forms",
    "provenance": "proposed-extension",
    "anatomy": [
      "Visible field label",
      "Input/control",
      "Help text",
      "Inline error when relevant"
    ],
    "variants": [
      "Text input or textarea",
      "Checkbox for an independent choice",
      "Switch for an immediate persistent setting"
    ],
    "states": {
      "default": "White field, 12 px radius, visible neutral boundary.",
      "focus_visible": "Ink focus ring with offset.",
      "checked": "Ink check on lime or white mark on ink; text still identifies meaning.",
      "invalid": "Specific correction below the field linked with aria-describedby.",
      "read_only": "Readable value with clear read-only treatment.",
      "disabled": "Visible explanation when action is unavailable."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Use full-width fields, 16 px input text, natural textarea height, and labels above fields."
    },
    "accessibility": [
      "Use native input semantics; preserve browser autofill and input types.",
      "Clicking a label activates its control.",
      "Do not use a placeholder as the only label or red as the only error signal."
    ],
    "usage": [
      "Use for naming a collection or updating real preferences.",
      "A switch commits immediately; a checkbox inside a form can commit on Save."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-brand-site/dist/brand-tokens.json",
        "selector": "\"colors\"",
        "line": 3,
        "evidence": "Approved PtaKaro palette, fonts, button/card radii, and spacing scale."
      },
      {
        "file": "workspace/ptakaro-app-store/source.html",
        "selector": "search-input__label",
        "line": 47,
        "evidence": "The app-detail reference demonstrates a labeled field, but not a general-purpose PtaKaro form system."
      }
    ],
    "adaptation": "General form controls are proposed extensions; the source only supplies adjacent input design context."
  },
  {
    "id": "campaign-hero",
    "name": "Campaign hero",
    "category": "Cards & Content",
    "provenance": "observed-adapted",
    "anatomy": [
      "Short eyebrow when needed",
      "One dominant headline",
      "One explanatory sentence",
      "Primary/secondary CTA pair",
      "One focal visual"
    ],
    "variants": [
      "Paper editorial hero",
      "Ink product hero",
      "Split copy and image"
    ],
    "states": {
      "default": "Calm surface, large type, deliberate negative space.",
      "hover": "Only explicit links/buttons react unless the entire panel has one destination.",
      "focus_visible": "Focus is visible on each explicit action.",
      "image_unavailable": "Preserve text and reserved image space with a quiet fallback."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Stack copy and art, use 48 px / 52 px display text, and choose a small-screen crop; allow content height rather than fixed viewport clipping."
    },
    "accessibility": [
      "One page h1; meaningful heading order below it.",
      "Use descriptive alt text for an informative product image or empty alt for purely decorative art.",
      "Avoid nested whole-panel links around CTA buttons."
    ],
    "usage": [
      "Make the page purpose clear before showing a product list.",
      "Use PtaKaro editorial claims that can be substantiated; do not import manufacturer superlatives."
    ],
    "motion": {
      "default": "Optional once-only reveal using the 600 ms master reveal token, with opacity and at most 8 px travel; never hide core content until JavaScript runs.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-website/apple-homepage-source.html",
        "selector": "tile-copy-wrapper",
        "line": 236,
        "evidence": "Homepage campaign tiles separate headline/CTA copy from an image wrapper."
      },
      {
        "file": "workspace/ptakaro-brand-site/dist/index.html",
        "selector": "class=\"webhero\"",
        "line": 11,
        "evidence": "Existing PtaKaro identity shows a split discovery hero."
      }
    ],
    "adaptation": "Borrow the composition and action hierarchy while preserving PtaKaro typography, imagery rights, and truthful content."
  },
  {
    "id": "promo-tile",
    "name": "Paired promotional tile",
    "category": "Cards & Content",
    "provenance": "observed-adapted",
    "anatomy": [
      "Short heading",
      "Support line",
      "One or two actions",
      "Contained image"
    ],
    "variants": [
      "Two-up campaign tiles",
      "Single full-width editorial tile"
    ],
    "states": {
      "default": "24 px rounded card, 24–32 px padding, paper/white/ink surface.",
      "hover": "Treat explicit actions individually; a one-link tile may gain a soft shadow.",
      "focus_visible": "If whole-tile link, ring follows the tile boundary.",
      "loading": "Reserve the media ratio."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Collapse to one column with 16–24 px gaps; keep the copy ahead of the image."
    },
    "accessibility": [
      "Heading and accessible link name identify the subject.",
      "Keep copy as HTML rather than text burned into art.",
      "Ensure text-image overlap is avoided at text zoom."
    ],
    "usage": [
      "Use to present two equal editorial routes.",
      "Avoid a wall of visually identical primary CTA buttons."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-website/apple-homepage-source.html",
        "selector": "tile-content",
        "line": 235,
        "evidence": "Homepage repeats campaign tiles with self-contained copy, actions, and imagery."
      }
    ],
    "adaptation": "Use 24 px PtaKaro cards instead of relying on source-page edge-to-edge rectangles."
  },
  {
    "id": "product-card",
    "name": "Product catalogue card",
    "category": "Cards & Content",
    "provenance": "observed-adapted",
    "anatomy": [
      "Product image",
      "Model name",
      "Short differentiator",
      "Qualified price block",
      "Primary detail link",
      "Optional save/compare control"
    ],
    "variants": [
      "Vertical card",
      "Compact horizontal result",
      "Image-led shelf card"
    ],
    "states": {
      "default": "White surface, 24 px radius, 24 px padding, consistent image stage.",
      "hover": "For a single-link card, lift at most 4 px and add a soft ink shadow.",
      "focus_visible": "Each real control has its own visible focus target.",
      "saved": "Save button exposes aria-pressed and a filled icon.",
      "compared": "Compare control has a selected check and explicit state.",
      "price_unavailable": "Show Price unavailable rather than zero."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "One or two columns depending on readable width; keep card actions at 44 px; avoid fitting three tiny products across a phone."
    },
    "accessibility": [
      "Use an article/list-item structure with a linked title.",
      "Do not nest save buttons in a whole-card anchor.",
      "Price qualification and freshness are programmatically related to the value."
    ],
    "usage": [
      "Show a concise comparable set of attributes.",
      "Actual product data and images must be verified separately; reference content is not a data source."
    ],
    "motion": {
      "default": "Use the 300 ms card token with cubic-bezier(0,0,.5,1); hover lift is at most 4 px and applies only on fine-pointer devices. Keep focus treatment equally visible.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-iphone/source.html",
        "selector": "product-tile-positioning",
        "line": 2102,
        "evidence": "Lineup tiles include model imagery, color indicators, positioning copy, pricing, and actions."
      },
      {
        "file": "workspace/ptakaro-mac-shop/source.html",
        "selector": "rf-hcard-scrim-price",
        "line": 1091,
        "evidence": "Shopping cards include a distinct price area."
      }
    ],
    "adaptation": "Use the product anatomy; change purchase language to View details or Compare unless PtaKaro genuinely sells the item."
  },
  {
    "id": "feature-story-card",
    "name": "Feature story card",
    "category": "Cards & Content",
    "provenance": "observed-adapted",
    "anatomy": [
      "Topic eyebrow",
      "Short headline",
      "Large image or illustration",
      "Labeled disclosure control"
    ],
    "variants": [
      "Light feature card",
      "Ink feature card",
      "Modal detail trigger"
    ],
    "states": {
      "default": "28 px feature-card radius; headline anchored consistently across the shelf.",
      "hover": "4 px lift or subtle image scale up to 1.02 on fine-pointer devices.",
      "focus_visible": "Focus within gives a visible card boundary; trigger remains distinct.",
      "open": "Dialog trigger reports state where useful.",
      "image_unavailable": "Keep headline and disclosure usable."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Use a comfortably readable single card with a partial next card in a rail; keep minimum content padding at 24 px."
    },
    "accessibility": [
      "Disclosure button names the topic, such as Read the camera guide.",
      "Use a real dialog only if detail is a contained interruption; otherwise use an ordinary page link.",
      "Do not make essential information available only on hover."
    ],
    "usage": [
      "Use for camera, battery, performance, or software explanations.",
      "Keep headline legible against imagery with a solid text area or tested scrim."
    ],
    "motion": {
      "default": "Use the 300 ms card token with cubic-bezier(0,0,.5,1); hover lift is at most 4 px and applies only on fine-pointer devices. Keep focus treatment equally visible.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-iphone/source.html",
        "selector": "feature-card-content",
        "line": 921,
        "evidence": "Feature cards combine an eyebrow, short headline, art, and disclosure control."
      },
      {
        "file": "workspace/ptakaro-iphone/source.html",
        "selector": "ric-modal-close-button",
        "line": 1059,
        "evidence": "The feature-card detail pattern has a labeled modal close control."
      }
    ],
    "adaptation": "The card-to-detail relationship is observed; PtaKaro supplies original editorial text and its own imagery."
  },
  {
    "id": "benefit-card",
    "name": "Benefit or explainer card",
    "category": "Cards & Content",
    "provenance": "observed-adapted",
    "anatomy": [
      "Simple icon",
      "Short title",
      "Two to three lines of explanation",
      "Optional detail link"
    ],
    "variants": [
      "Flat bordered card",
      "Quiet surface card",
      "Full-width explainer"
    ],
    "states": {
      "default": "White or paper surface, 24 px radius, 24 px padding.",
      "hover": "Only linked cards react; noninteractive explanatory cards remain still.",
      "focus_visible": "Visible ring on any action.",
      "unavailable": "Omit unsupported service claims rather than graying them out."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Stack naturally; icon remains 24–32 px and text keeps 17 px / 25 px body sizing."
    },
    "accessibility": [
      "Use real headings in a consistent hierarchy.",
      "Decorative icons are hidden from assistive technology.",
      "Do not make the complete paragraph a redundant link target."
    ],
    "usage": [
      "Use for How comparison works, Price sources, or Editorial method.",
      "Do not imply finance, shipping, repairs, expert support, or warranty services without evidence."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-mac-shop/source.html",
        "selector": "rf-ccard-content-desc",
        "line": 1371,
        "evidence": "Shopping shelves include explanatory cards with a header and description."
      },
      {
        "file": "workspace/ptakaro-iphone/source.html",
        "selector": "utility-modal-block-body",
        "line": 2512,
        "evidence": "Utility cards expand into explanatory content blocks."
      }
    ],
    "adaptation": "Translate the benefit-card format into PtaKaro’s real editorial value and methods."
  },
  {
    "id": "compact-recommendation",
    "name": "Compact recommendation row",
    "category": "Cards & Content",
    "provenance": "observed-adapted",
    "anatomy": [
      "Square thumbnail",
      "Title",
      "One metadata line",
      "Short trailing action"
    ],
    "variants": [
      "Related product",
      "Related guide",
      "App/software listing"
    ],
    "states": {
      "default": "64 px image stage; two text lines; generous row padding.",
      "hover": "Quiet row background or link underline.",
      "focus_visible": "Focus ring follows the actual link/action.",
      "loading": "Reserve the thumbnail and text footprint."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Use 48–56 px thumbnails if needed; wrap the title; never truncate the primary action label."
    },
    "accessibility": [
      "One main link is enough when the entire item shares a destination.",
      "Thumbnail is decorative when the title supplies its meaning.",
      "Action names identify the specific item where repeated."
    ],
    "usage": [
      "Use in related content or search suggestions.",
      "Show ratings or availability only when verified."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-app-store/source.html",
        "selector": "small-lockup-item",
        "line": 165,
        "evidence": "App detail page contains compact recommendations with icon, title, metadata, and a trailing view affordance."
      }
    ],
    "adaptation": "Use PtaKaro products or guides and original metadata instead of copying App Store listings."
  },
  {
    "id": "review-card",
    "name": "Review or reader feedback card",
    "category": "Cards & Content",
    "provenance": "observed-adapted",
    "anatomy": [
      "Review title",
      "Verified author display name",
      "Date",
      "Optional sourced rating",
      "Excerpt",
      "Read full review action"
    ],
    "variants": [
      "Editorial review excerpt",
      "Published reader feedback"
    ],
    "states": {
      "default": "Calm card with visible attribution and date.",
      "hover": "Only the detail link/control changes.",
      "expanded": "Show complete text in page or a labeled dialog.",
      "unavailable": "Do not display invented reviews or averages."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Use one column or a manually scrolled rail; leave body text at 17 px / 25 px."
    },
    "accessibility": [
      "Use time datetime for the date.",
      "Rating has a textual equivalent, not only stars.",
      "Truncation always has an accessible route to the full text."
    ],
    "usage": [
      "Use only real, permission-appropriate content.",
      "Clearly distinguish editorial judgment from reader comments."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-app-store/source.html",
        "selector": "review-header",
        "line": 151,
        "evidence": "Review cards include date, author, rating/excerpt structure, and expanded dialogs."
      }
    ],
    "adaptation": "The review layout is observed; all Apple reviews, scores, usernames, and counts must be replaced with actual PtaKaro content or omitted."
  },
  {
    "id": "folder-card",
    "name": "Saved collection / folder card",
    "category": "Saved Collections",
    "provenance": "proposed-extension",
    "anatomy": [
      "Quiet tab-shaped folder silhouette or collection icon",
      "Collection name",
      "Item count",
      "Up to three product thumbnails",
      "Overflow action"
    ],
    "variants": [
      "Named collection",
      "Default Saved items collection",
      "Empty collection",
      "Create new collection"
    ],
    "states": {
      "default": "Paper/white folder body with 20 px corners; the folder tab is a subtle shape, not a logo modification.",
      "hover": "4 px lift and soft shadow on fine-pointer devices.",
      "focus_visible": "Title link and overflow button have separate rings.",
      "selected": "Checkmark plus ink/lime border state in selection mode.",
      "empty": "Say No saved items and offer Browse products.",
      "syncing": "Show a quiet Saving indicator; do not claim success prematurely.",
      "error": "Preserve local edits and expose Retry."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Use one or two columns depending on width; keep names wrapped up to two lines with full text available; no drag-only organization."
    },
    "accessibility": [
      "Collection is a link, actions are separate buttons.",
      "Expose item count in readable text.",
      "Provide keyboard Move to collection and rename/delete controls; confirm deletion only when it removes the collection/data."
    ],
    "usage": [
      "Use to organize an actual saved shortlist.",
      "Persist collections to a defined storage layer; if device-local, say Saved on this device."
    ],
    "motion": {
      "default": "Use the 300 ms card token with cubic-bezier(0,0,.5,1); hover lift is at most 4 px and applies only on fine-pointer devices. Keep focus treatment equally visible.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-app-store/source.html",
        "selector": "Save and organize your favorites",
        "line": 33,
        "evidence": "Reference description mentions organizing favorites; it does not demonstrate a folder-card UI."
      },
      {
        "file": "workspace/ptakaro-brand-site/dist/brand-tokens.json",
        "selector": "\"colors\"",
        "line": 3,
        "evidence": "Approved PtaKaro palette, fonts, button/card radii, and spacing scale."
      }
    ],
    "adaptation": "Explicit PtaKaro extension. The 20 px folder treatment, behavior, persistence model, and states are proposed, not observed in the Apple captures."
  },
  {
    "id": "saved-item-row",
    "name": "Saved item row",
    "category": "Saved Collections",
    "provenance": "proposed-extension",
    "anatomy": [
      "Product thumbnail and linked title",
      "Current known price with freshness",
      "Collection label",
      "Compare action",
      "Remove or move menu"
    ],
    "variants": [
      "Collection detail row",
      "Selected bulk-action row"
    ],
    "states": {
      "default": "White row with a quiet divider.",
      "hover": "Neutral surface; keep actions visible on touch.",
      "selected": "Native checkbox and selected surface.",
      "removed": "Offer Undo when removal is reversible.",
      "stale": "Mark old price information explicitly.",
      "missing_product": "Preserve the saved entry and state that the source is unavailable."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Stack metadata beneath the title; put actions on a separate row; do not hide price qualification."
    },
    "accessibility": [
      "Use a list and independent buttons.",
      "Bulk selection has Select all and selection count text.",
      "Removal does not move focus unpredictably; focus the next item or collection heading."
    ],
    "usage": [
      "Make returning to a shortlist reliable.",
      "Never claim account synchronization when only local storage exists."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-brand-site/dist/brand-tokens.json",
        "selector": "\"colors\"",
        "line": 3,
        "evidence": "Approved PtaKaro palette, fonts, button/card radii, and spacing scale."
      },
      {
        "file": "workspace/ptakaro-app-store/source.html",
        "selector": "Recent Activity",
        "line": 33,
        "evidence": "Reference prose describes returning to saved and recent activity; the saved-row UI is not present."
      }
    ],
    "adaptation": "Proposed extension for PtaKaro saved collections."
  },
  {
    "id": "card-carousel",
    "name": "Card shelf carousel",
    "category": "Collections & Disclosure",
    "provenance": "observed-adapted",
    "anatomy": [
      "Section heading and optional See all link",
      "Semantic list of cards",
      "Native scroll viewport",
      "Previous/next paddles",
      "Optional position text"
    ],
    "variants": [
      "Product shelf",
      "Editorial card shelf",
      "Benefit shelf"
    ],
    "states": {
      "default": "24 px card gaps with aligned leading content edge.",
      "hover": "Individual cards may react; shelf position never changes on hover.",
      "start_end": "Disable the unavailable paddle and preserve an understandable endpoint.",
      "focus_visible": "Focused card/control scrolls fully into view without clipping.",
      "dragging": "Native touch scroll; do not intercept vertical page gestures.",
      "empty": "Omit the shelf or show a purposeful empty state."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Use a readable card width and reveal part of the next card; support touch scroll plus visible controls; no auto-advance."
    },
    "accessibility": [
      "Label the carousel region with its heading and keep cards as a list.",
      "Previous/next labels include the shelf name; controls keep focus after use.",
      "Do not hide off-screen but reachable content from assistive technology without a coherent paging strategy."
    ],
    "usage": [
      "Use for browsable secondary content where not all items must be compared at once.",
      "Use a grid for exhaustive results and a table for aligned comparisons."
    ],
    "motion": {
      "default": "User-initiated scrolling only. A controlled gallery transition may use the 600 ms master gallery token; native smooth-scroll timing remains browser-controlled. No autoplay or simulated momentum.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-mac-shop/source.html",
        "selector": "rf-cards-scroller-platter",
        "line": 1078,
        "evidence": "A horizontally organized shelf contains repeated card items; fallback HTML is present inside noscript."
      },
      {
        "file": "workspace/ptakaro-iphone/source.html",
        "selector": "paddlenav-arrow-previous",
        "line": 2035,
        "evidence": "Category galleries expose contextual previous and next buttons."
      }
    ],
    "adaptation": "Shelf structure is observed; explicit non-autoplay, keyboard, and endpoint behavior are PtaKaro requirements."
  },
  {
    "id": "media-gallery",
    "name": "Product media and screenshot gallery",
    "category": "Collections & Disclosure",
    "provenance": "observed-adapted",
    "anatomy": [
      "Consistent image stage",
      "Primary image/screenshot",
      "Thumbnail or page navigation",
      "Optional caption",
      "Expand control"
    ],
    "variants": [
      "Contained product renders",
      "Portrait app screenshots",
      "Editorial detail images"
    ],
    "states": {
      "default": "Reserve the image aspect ratio and show its complete useful content.",
      "selected": "Thumbnail boundary and current-page text.",
      "loading": "Neutral aspect-ratio placeholder.",
      "error": "Readable Image unavailable fallback.",
      "expanded": "Open a labeled lightbox without losing the current slide."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Allow horizontal touch scrolling for screenshots; use a readable single image stage for products. Fit expanded media within viewport and safe areas."
    },
    "accessibility": [
      "Each informative image has distinct alt text.",
      "Expose slide number and total without excessive live announcements.",
      "Provide keyboard previous/next and close controls for a lightbox; captions remain text."
    ],
    "usage": [
      "Use licensed, accurate product art; do not stretch or crop away differentiating details.",
      "Treat screenshot text as potentially unreadable at small scale and supply captions for key meaning."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-app-store/source.html",
        "selector": "id=\"product_media_phone_\"",
        "line": 65,
        "evidence": "App detail page contains a dedicated screenshot/media shelf."
      },
      {
        "file": "workspace/ptakaro-app-store/source.html",
        "selector": "expanded-media-header",
        "line": 95,
        "evidence": "Expanded media includes a dedicated header/control area."
      }
    ],
    "adaptation": "Use the media sequence and expanded-view mechanic; original app/product assets remain a separate content requirement."
  },
  {
    "id": "detail-dialog",
    "name": "Detail dialog",
    "category": "Collections & Disclosure",
    "provenance": "observed-adapted",
    "anatomy": [
      "Scrim",
      "Panel",
      "Heading",
      "Persistent close button",
      "Scrollable content",
      "Optional footer actions"
    ],
    "variants": [
      "Short confirmation/action dialog",
      "Long editorial detail dialog"
    ],
    "states": {
      "closed": "No focusable descendants in the active page tree.",
      "opening": "Save trigger and place focus at the first useful element or heading.",
      "open": "Page behind is inert; body scroll is locked without a jump.",
      "closing": "Restore the trigger or logical successor.",
      "validation_error": "Keep open and focus or describe the invalid field."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Use 16 px outer margin or a full-height sheet for long details; keep close control visible; content scrolls within the available height."
    },
    "accessibility": [
      "Prefer native dialog.showModal with a heading referenced by aria-labelledby.",
      "Escape closes ordinary dialogs; Tab remains inside; focus returns after closing.",
      "Do not set aria-modal on a panel that leaves the background interactive."
    ],
    "usage": [
      "Use for focused detail or a short task; long primary editorial content deserves a shareable page.",
      "Backdrop dismissal must not discard an unsaved edit without a recovery path."
    ],
    "motion": {
      "default": "PtaKaro dialog recommendation: 300 ms fade with at most 8 px panel travel, using the master guide timing. This does not state an observed Apple duration.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-app-store/source.html",
        "selector": "content-modal-container",
        "line": 151,
        "evidence": "Native dialog markup contains expanded detail content and a labeled close button."
      },
      {
        "file": "workspace/ptakaro-iphone/source.html",
        "selector": "class=\"ric-modal",
        "line": 941,
        "evidence": "Category feature content includes modal wrappers and labeled close buttons."
      }
    ],
    "adaptation": "The disclosure/modal pattern is observed; do not replicate incomplete static-source ARIA relationships without implementing correct behavior."
  },
  {
    "id": "accordion",
    "name": "Accordion and image accordion",
    "category": "Collections & Disclosure",
    "provenance": "observed-adapted",
    "anatomy": [
      "Heading with disclosure button",
      "Chevron or plus/minus",
      "Associated content panel",
      "Optional contextual image"
    ],
    "variants": [
      "Independent FAQ sections",
      "Single-open image explainer"
    ],
    "states": {
      "collapsed": "Heading remains visible and panel is hidden.",
      "expanded": "aria-expanded=true; content follows the trigger in reading order.",
      "hover": "Quiet heading surface or underline.",
      "focus_visible": "Ring around the trigger, not only the glyph."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Place the contextual image immediately after the expanded copy; use full-width triggers with at least 44 px targets."
    },
    "accessibility": [
      "Use a button in a heading or details/summary.",
      "Connect aria-controls to the panel; do not copy role=presentation from reference buttons.",
      "Do not move focus on expansion or require hover to open."
    ],
    "usage": [
      "Use for optional explanations or FAQs.",
      "Keep critical price qualifications and primary comparison differences visible outside collapsed content."
    ],
    "motion": {
      "default": "160–200 ms content fade; if animating height, measure content and avoid clipping during text zoom.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-iphone/source.html",
        "selector": "data-component-list=\"ImageAccordion\"",
        "line": 4879,
        "evidence": "Source contains an image accordion with headings, buttons, associated trays, and contextual pictures."
      }
    ],
    "adaptation": "Adopt progressive disclosure and linked images; improve semantic button behavior rather than repeating source-specific roles."
  },
  {
    "id": "overflow-menu",
    "name": "Contextual overflow menu",
    "category": "Collections & Disclosure",
    "provenance": "proposed-extension",
    "anatomy": [
      "Labeled trigger",
      "Compact action list",
      "Optional separators",
      "Destructive action label"
    ],
    "variants": [
      "Collection actions",
      "Saved-item actions"
    ],
    "states": {
      "closed": "Menu/list is hidden and not focusable.",
      "open": "Place panel near the trigger without clipping.",
      "hover": "Neutral item surface.",
      "focus_visible": "Active item has a clear focus treatment.",
      "disabled": "Explain unavailable actions where needed."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Use a simple popover or bottom sheet when the available width is insufficient; keep action labels visible."
    },
    "accessibility": [
      "Prefer a disclosure containing ordinary buttons unless full application-menu keyboard behavior is implemented.",
      "Escape dismisses and returns focus.",
      "Clicking outside dismisses only when no pending edit can be lost."
    ],
    "usage": [
      "Use for secondary Rename, Move, Remove, or Delete actions.",
      "Keep the frequent primary action out of the overflow."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-brand-site/dist/brand-tokens.json",
        "selector": "\"colors\"",
        "line": 3,
        "evidence": "Approved PtaKaro palette, fonts, button/card radii, and spacing scale."
      },
      {
        "file": "workspace/ptakaro-app-store/source.html",
        "selector": "content-modal-container",
        "line": 151,
        "evidence": "Native dialog markup contains expanded detail content and a labeled close button."
      }
    ],
    "adaptation": "Proposed extension for collection and item management; no folder overflow menu is observed in the captures."
  },
  {
    "id": "tooltip",
    "name": "Supplementary tooltip",
    "category": "Collections & Disclosure",
    "provenance": "proposed-extension",
    "anatomy": [
      "Short supplementary text",
      "Associated trigger",
      "Optional pointer"
    ],
    "variants": [
      "Icon clarification",
      "Abbreviation explanation"
    ],
    "states": {
      "hidden": "No visual tooltip.",
      "visible": "Appears on keyboard focus and hover without covering the trigger.",
      "dismissed": "Escape dismisses while focus remains on trigger."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Do not depend on hover; essential explanations belong in visible text or a tap disclosure."
    },
    "accessibility": [
      "Use aria-describedby when appropriate.",
      "Tooltip itself contains no interactive controls.",
      "Allow pointer movement onto the tooltip without disappearance and keep it open while hovered/focused."
    ],
    "usage": [
      "Use only for helpful supplementary meaning.",
      "Never place a required instruction, error, price condition, or action exclusively in a tooltip."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-brand-site/dist/brand-tokens.json",
        "selector": "\"colors\"",
        "line": 3,
        "evidence": "Approved PtaKaro palette, fonts, button/card radii, and spacing scale."
      }
    ],
    "adaptation": "Proposed extension; source captures do not establish a tooltip interaction."
  },
  {
    "id": "comparison-matrix",
    "name": "Comparison matrix",
    "category": "Data & Comparison",
    "provenance": "observed-adapted",
    "anatomy": [
      "Selected product column headers",
      "Section headings",
      "Aligned feature rows",
      "Comparable values and units",
      "Source/qualification notes"
    ],
    "variants": [
      "Two-product mobile comparison",
      "Three-product desktop comparison",
      "All details or differences view"
    ],
    "states": {
      "default": "Common row baseline and equal columns; white/paper surfaces with quiet dividers.",
      "different": "Use a labeled difference marker plus subtle neutral/lime tint.",
      "unknown": "Say Not confirmed, Not available, or Not applicable as appropriate.",
      "loading": "Retain chosen model headers and row skeletons.",
      "error": "Identify the failed model/source and preserve working columns."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Default to two readable products with a way to replace one. If horizontal overflow is necessary, label the scroll region and preserve table semantics; do not silently discard the third selection."
    },
    "accessibility": [
      "Prefer a real table with caption, th scope=col and th scope=row.",
      "If sections use separate tables, each repeats sufficient product headers.",
      "Keep units and qualification text visible; no color-only winner indicator."
    ],
    "usage": [
      "Compare like with like and distinguish manufacturer specifications from test results.",
      "Display source date and test conditions when figures depend on methodology."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-watch-compare/reference.css",
        "selector": ".section-compare-table .compare-header-row,.section-compare-table .compare-row",
        "line": 1,
        "evidence": "Comparison CSS aligns product columns in a grid; three columns become two at the medium breakpoint."
      },
      {
        "file": "workspace/ptakaro-watch-compare/source.html",
        "selector": "backport-group compare-section",
        "line": 472,
        "evidence": "Source data is grouped into comparison sections and product feature cells."
      }
    ],
    "adaptation": "Use the alignment and sectioning mechanics; the Apple dataset is reference content, not PtaKaro product data."
  },
  {
    "id": "comparison-header",
    "name": "Sticky comparison selector header",
    "category": "Data & Comparison",
    "provenance": "observed-adapted",
    "anatomy": [
      "Model selector per column",
      "Small product image",
      "Linked product name",
      "Remove/replace action",
      "Qualified price if available"
    ],
    "variants": [
      "Full starting header",
      "Compact sticky header"
    ],
    "states": {
      "default": "Selectors align to the same column grid as the feature rows.",
      "sticky": "Use a solid surface and subtle divider/shadow.",
      "selecting": "Keep current content while replacement loads.",
      "focus_visible": "Open options and focused controls remain unobscured.",
      "empty_slot": "Labeled Add a product control."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Keep two selectors readable; reduce image size before text; constrain sticky height so features remain visible."
    },
    "accessibility": [
      "Each selector has a unique label.",
      "Avoid duplicate focusable headers when visually cloning sticky content.",
      "Account for global header offsets and safe areas."
    ],
    "usage": [
      "Use only while inside the comparison region.",
      "Keep shareable model choices stable as the user scrolls."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-watch-compare/reference.css",
        "selector": ".section-compare-table .css-sticky",
        "line": 1,
        "evidence": "Comparison CSS declares a sticky header region."
      },
      {
        "file": "workspace/ptakaro-watch-compare/reference.css",
        "selector": ".template-dropdown .selector-element",
        "line": 1,
        "evidence": "CSS includes dropdown selectors for model choice."
      }
    ],
    "adaptation": "Sticky alignment is observed in CSS; PtaKaro compact heights and loading behavior are proposed."
  },
  {
    "id": "compare-tray",
    "name": "Compare selection tray",
    "category": "Data & Comparison",
    "provenance": "proposed-extension",
    "anatomy": [
      "Selection count",
      "Selected product thumbnails/names",
      "Remove controls",
      "Compare action",
      "Optional collapse control"
    ],
    "variants": [
      "Inline results tray",
      "Sticky bottom tray"
    ],
    "states": {
      "empty": "Hidden or small contextual hint; do not obstruct browsing.",
      "one_selected": "Prompt to add another product with Compare disabled and explained.",
      "ready": "Compare action active for two or more selections.",
      "full": "Explain the limit and offer replacement.",
      "collapsed": "Count and action remain reachable."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Respect bottom safe areas and browser controls; show names in a compact list; reserve body space so content is not covered."
    },
    "accessibility": [
      "Use a labeled region; selection count is a polite status.",
      "Removing an item has a specific accessible label.",
      "Do not move focus to the tray every time a product is added."
    ],
    "usage": [
      "Use when users assemble a comparison from a catalogue.",
      "Set a modest supported limit, recommended three on desktop and a two-column mobile view with retained selections."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-watch-compare/reference.css",
        "selector": ".section-compare-table .compare-header-row,.section-compare-table .compare-row",
        "line": 1,
        "evidence": "Comparison CSS aligns product columns in a grid; three columns become two at the medium breakpoint."
      },
      {
        "file": "workspace/ptakaro-brand-site/dist/brand-tokens.json",
        "selector": "\"colors\"",
        "line": 3,
        "evidence": "Approved PtaKaro palette, fonts, button/card radii, and spacing scale."
      }
    ],
    "adaptation": "Proposed extension connecting catalogue selection to comparison; no tray interaction is observed."
  },
  {
    "id": "specification-row",
    "name": "Specification row",
    "category": "Data & Comparison",
    "provenance": "observed-adapted",
    "anatomy": [
      "Attribute label",
      "Value",
      "Unit",
      "Optional qualification/source link"
    ],
    "variants": [
      "Single-product definition row",
      "Cross-product table row",
      "Grouped technical section"
    ],
    "states": {
      "default": "17 px / 25 px value text and 14 px label; tabular numerals where useful.",
      "unknown": "Use a precise text status rather than a bare dash.",
      "highlighted": "A small label and tint identify a difference, not a decorative star.",
      "expanded": "Optional explanatory note expands in place."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Use stacked label/value rows for single-product detail; preserve column association in comparisons."
    },
    "accessibility": [
      "Use dl/dt/dd for standalone specifications or table headers for comparison.",
      "Read units unambiguously and avoid repeated inaccessible abbreviations.",
      "Links to source notes have meaningful labels."
    ],
    "usage": [
      "Use consistent units and rounding.",
      "Do not label an item best without a published test method and supporting evidence."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-watch-compare/source.html",
        "selector": "compare-rowheader",
        "line": 537,
        "evidence": "Source marks row headings separately from product feature values."
      }
    ],
    "adaptation": "Use source hierarchy while choosing semantic HTML appropriate to the final layout."
  },
  {
    "id": "price-block",
    "name": "Price and freshness block",
    "category": "Data & Comparison",
    "provenance": "observed-adapted",
    "anatomy": [
      "Currency and value or range",
      "Variant/condition/region context",
      "Source name/link",
      "Checked date/time",
      "Disclosure if affiliate/sponsored"
    ],
    "variants": [
      "Single verified listing",
      "Qualified range across sources",
      "Unavailable price"
    ],
    "states": {
      "default": "Ink price with compact slate qualification below.",
      "updated": "Update text without an attention-grabbing flash.",
      "stale": "Say when checked and clearly flag old data.",
      "unavailable": "Price unavailable with a source/retry path if relevant.",
      "loading": "Reserve value width; do not show zero or fake data."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Allow the qualification to wrap; keep currency and primary number together where possible."
    },
    "accessibility": [
      "Do not rely on strike-through alone for a discount.",
      "Supply text for price changes, not only arrows/colors.",
      "Use machine-readable numeric values only when actual data exists."
    ],
    "usage": [
      "Date every mutable price and name its source.",
      "Use from only when the starting configuration and availability are substantiated."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-mac-shop/source.html",
        "selector": "rf-hcard-scrim-price",
        "line": 1091,
        "evidence": "Shopping cards separate the price area from product copy."
      },
      {
        "file": "workspace/ptakaro-brand-site/dist/index.html",
        "selector": "Date prices and name their sources.",
        "line": 10,
        "evidence": "Approved PtaKaro voice explicitly requires dated, sourced prices."
      }
    ],
    "adaptation": "Price anatomy is observed; detailed freshness/error states follow PtaKaro’s existing truthfulness rule."
  },
  {
    "id": "information-ribbon",
    "name": "Product information ribbon",
    "category": "Data & Comparison",
    "provenance": "observed-adapted",
    "anatomy": [
      "Three to six labeled facts",
      "Short value per fact",
      "Optional icon",
      "Quiet separators"
    ],
    "variants": [
      "Product overview facts",
      "App/software metadata",
      "Editorial article facts"
    ],
    "states": {
      "default": "Compact, evenly spaced facts with labels above values.",
      "linked": "Only facts with actual destinations become links.",
      "unknown": "Show an explicit unavailable label or omit a nonessential fact.",
      "hover": "React only for linked facts."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Wrap to a two-column grid for important facts; allow a horizontal rail only when all facts remain discoverable."
    },
    "accessibility": [
      "Use a description list rather than layout-only headings.",
      "Icons have text equivalents.",
      "Do not treat decorative dividers as content."
    ],
    "usage": [
      "Summarize a few decision-relevant attributes.",
      "Do not add fabricated ratings, user counts, review totals, or download numbers."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-app-store/source.html",
        "selector": "id=\"informationRibbon\"",
        "line": 55,
        "evidence": "App detail begins with a ribbon of labeled product badges and values."
      }
    ],
    "adaptation": "Translate the compact metadata rhythm to verified PtaKaro facts."
  },
  {
    "id": "color-swatches",
    "name": "Product finish swatches",
    "category": "Data & Comparison",
    "provenance": "observed-adapted",
    "anatomy": [
      "Color chip",
      "Accessible finish name",
      "Selected outline if interactive",
      "Optional selected-name text"
    ],
    "variants": [
      "Static available-color list",
      "Interactive image/variant picker"
    ],
    "states": {
      "default": "18–24 px visible chip inside a 44 px interactive target when selectable.",
      "hover": "Outer boundary becomes clearer.",
      "selected": "Double boundary/check and selected finish name.",
      "focus_visible": "Focus ring distinct from selection outline.",
      "unavailable": "Text or pattern indicates unavailability."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Keep chips and labels tappable; wrap instead of shrinking."
    },
    "accessibility": [
      "Use a list of names for static availability.",
      "Use radio semantics for exclusive finish selection.",
      "Color alone never communicates selection or stock state."
    ],
    "usage": [
      "Use accurate finish colors with a subtle border on pale finishes.",
      "Do not recolor product photos to invent finishes."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-iphone/source.html",
        "selector": "colorindicator-items",
        "line": 2093,
        "evidence": "Lineup source includes available-color lists with visually hidden color names."
      }
    ],
    "adaptation": "Static color-list semantics are observed; interactive radio behavior is a proposed variant."
  },
  {
    "id": "status-badge",
    "name": "Status badge",
    "category": "Messaging",
    "provenance": "observed-adapted",
    "anatomy": [
      "Short factual status text",
      "Optional icon",
      "Compact background or outline"
    ],
    "variants": [
      "New or Updated",
      "Confirmed / Estimate",
      "Unavailable",
      "Sponsored / Affiliate"
    ],
    "states": {
      "default": "12–14 px readable label; quiet rounded shape.",
      "informational": "Ink text on paper or lime.",
      "warning": "Text and icon accompany amber treatment.",
      "error": "Text and icon accompany red treatment.",
      "interactive": "Only use a button if the badge opens details; then provide a 44 px target."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Wrap with metadata and do not truncate essential disclosure labels."
    },
    "accessibility": [
      "Status meaning is explicit in text.",
      "Most badges are static text, not focusable controls.",
      "Do not use lime alone to imply positive/verified status."
    ],
    "usage": [
      "Use statuses with a defined source and expiry rule.",
      "Distinguish freshness, evidence quality, and commercial disclosure."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-iphone/source.html",
        "selector": "product-tile",
        "line": 2067,
        "evidence": "Lineup cards include small status/positioning labels."
      },
      {
        "file": "workspace/ptakaro-brand-site/dist/brand-tokens.json",
        "selector": "\"colors\"",
        "line": 3,
        "evidence": "Approved PtaKaro palette, fonts, button/card radii, and spacing scale."
      }
    ],
    "adaptation": "Reference labels inspire the hierarchy; confirmation and disclosure statuses are PtaKaro content extensions."
  },
  {
    "id": "rating-summary",
    "name": "Rating summary",
    "category": "Data & Comparison",
    "provenance": "observed-adapted",
    "anatomy": [
      "Numeric score",
      "Scale",
      "Number of contributing reviews/tests",
      "Source/method link",
      "Optional distribution"
    ],
    "variants": [
      "Reader aggregate",
      "Editorial rubric score"
    ],
    "states": {
      "default": "Score, denominator, count, and source remain together.",
      "insufficient_data": "Say Not enough reviews or omit the aggregate.",
      "loading": "Neutral placeholder without sample stars.",
      "error": "Keep content readable and explain unavailable ratings."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Stack the distribution below the score; retain labels for every bar."
    },
    "accessibility": [
      "Provide text such as 4.2 out of 5 from 23 reviews when it is real data.",
      "Hide decorative stars from assistive technology.",
      "Distribution bars require text values, not only length or color."
    ],
    "usage": [
      "Use only with a trustworthy data pipeline and moderation/source policy.",
      "Do not mix editorial scores with reader ratings without labeling the distinction."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-app-store/source.html",
        "selector": "id=\"productRatings\"",
        "line": 145,
        "evidence": "App detail includes an aggregate ratings section preceding review cards."
      }
    ],
    "adaptation": "Layout may be adapted, but Apple’s score/counts never become PtaKaro claims."
  },
  {
    "id": "source-notes",
    "name": "Source notes and qualifications",
    "category": "Editorial Trust",
    "provenance": "observed-adapted",
    "anatomy": [
      "Inline note link",
      "Numbered or named note",
      "Source link",
      "Checked/publication date",
      "Return link where useful"
    ],
    "variants": [
      "Product specification source",
      "Price qualification",
      "Methodology or correction note"
    ],
    "states": {
      "default": "12–14 px readable slate text; links underlined.",
      "targeted": "Anchor target gets a subtle highlight and is not hidden under sticky UI.",
      "updated": "Correction text names what changed and when."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Wrap long URLs behind descriptive titles; use full page gutters and do not shrink legal or source text below readable size."
    },
    "accessibility": [
      "Note references have contextual names.",
      "Footnote navigation can return to the originating reference.",
      "Do not bury material buying conditions only in an inaccessible footnote."
    ],
    "usage": [
      "Cite primary manufacturer specifications and dated merchant prices as appropriate.",
      "Keep estimates and leaks visibly labeled in the main content."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-iphone/source.html",
        "selector": "footnote-number",
        "line": 1130,
        "evidence": "Reference uses linked numbered footnotes."
      },
      {
        "file": "workspace/ptakaro-brand-site/dist/index.html",
        "selector": "Distinguish confirmed specifications",
        "line": 10,
        "evidence": "PtaKaro identity requires separation of confirmed facts, leaks, estimates, and opinions."
      }
    ],
    "adaptation": "Keep the referencing mechanism and make conditions useful to the actual PtaKaro decision."
  },
  {
    "id": "update-history",
    "name": "Update and correction history",
    "category": "Editorial Trust",
    "provenance": "observed-adapted",
    "anatomy": [
      "Date",
      "Version or article revision label",
      "Concise change summary",
      "Optional source"
    ],
    "variants": [
      "Product information updates",
      "Editorial corrections",
      "Software version history"
    ],
    "states": {
      "default": "Latest update first with readable spacing.",
      "collapsed": "Show latest update plus View history when long.",
      "expanded": "Reveal complete chronological entries.",
      "empty": "Omit the history until a meaningful update exists."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Use a simple vertical list; avoid a horizontal timeline."
    },
    "accessibility": [
      "Use time elements and ordinary list structure.",
      "Expanded history has an explicit heading.",
      "Do not communicate severity only through dot colors."
    ],
    "usage": [
      "Record actual changes, not generic activity noise.",
      "Corrections should be explicit and preserve trust."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-app-store/source.html",
        "selector": "id=\"mostRecentVersion\"",
        "line": 151,
        "evidence": "App detail includes a latest-version section and expanded version history."
      }
    ],
    "adaptation": "Use the dated change-log structure for actual PtaKaro content revisions."
  },
  {
    "id": "privacy-disclosure",
    "name": "Policy and data disclosure card",
    "category": "Editorial Trust",
    "provenance": "observed-adapted",
    "anatomy": [
      "Plain-language heading",
      "Short summary",
      "Specific data or policy categories",
      "Read full policy link"
    ],
    "variants": [
      "Privacy summary",
      "Affiliate/editorial disclosure",
      "Source methodology"
    ],
    "states": {
      "default": "White/neutral surface with modest icon and copy.",
      "expanded": "Show detailed categories in a dialog or linked policy page.",
      "unknown": "Do not claim protections that have not been established."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Stack categories and keep the full-policy link visible."
    },
    "accessibility": [
      "Use headings and lists with visible text labels.",
      "Do not rely on lock/shield icons to communicate guarantees.",
      "A linked full policy opens as normal navigation by default."
    ],
    "usage": [
      "Explain actual data handling or editorial practices.",
      "Avoid borrowed privacy claims from Apple or unimplemented feature promises."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-app-store/source.html",
        "selector": "id=\"privacyHeader\"",
        "line": 159,
        "evidence": "App detail has a privacy heading and separate disclosure sections."
      },
      {
        "file": "workspace/ptakaro-app-store/source.html",
        "selector": "privacy-data-types",
        "line": 159,
        "evidence": "Detailed data-use categories are represented as text groups."
      }
    ],
    "adaptation": "Adapt the hierarchy only; PtaKaro’s real practices determine all content."
  },
  {
    "id": "loading-skeleton",
    "name": "Loading skeleton",
    "category": "Feedback & Recovery",
    "provenance": "proposed-extension",
    "anatomy": [
      "Reserved image block",
      "Two or three text bars",
      "Optional action placeholder",
      "Accessible loading status outside decoration"
    ],
    "variants": [
      "Product card skeleton",
      "Comparison row skeleton",
      "Compact result skeleton"
    ],
    "states": {
      "loading": "Match the final component geometry using neutral shades.",
      "complete": "Replace without shifting the surrounding content.",
      "timeout": "Replace indefinite loading with a retryable error.",
      "partial": "Keep loaded content while remaining items load."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Use the same responsive grid and aspect ratios as final content."
    },
    "accessibility": [
      "Skeleton bars are aria-hidden; the containing region exposes aria-busy.",
      "Use one concise polite status rather than announcing every skeleton.",
      "Do not create focusable fake buttons."
    ],
    "usage": [
      "Use when content is expected but not yet available.",
      "No fake product names, ratings, or prices as loading placeholders."
    ],
    "motion": {
      "default": "Static neutral placeholders by default; optional slow opacity pulse only for brief loads.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-brand-site/dist/brand-tokens.json",
        "selector": "\"colors\"",
        "line": 3,
        "evidence": "Approved PtaKaro palette, fonts, button/card radii, and spacing scale."
      },
      {
        "file": "workspace/ptakaro-app-store/source.html",
        "selector": "--placeholder-bg-color",
        "line": 50,
        "evidence": "Reference image markup reserves a placeholder background; a complete skeleton system is not established."
      }
    ],
    "adaptation": "Proposed extension. Prefer a static skeleton; any pulse must be subtle and disabled for reduced motion."
  },
  {
    "id": "empty-state",
    "name": "Empty state",
    "category": "Feedback & Recovery",
    "provenance": "proposed-extension",
    "anatomy": [
      "Small purposeful icon or illustration",
      "Specific heading",
      "One explanatory sentence",
      "One next-step action"
    ],
    "variants": [
      "No search results",
      "No saved items",
      "No items in a collection",
      "No comparison selected"
    ],
    "states": {
      "initial": "Explain the feature and how to begin.",
      "filtered": "State that current filters removed matches and offer Clear filters.",
      "query": "Echo the query safely and offer a correction path.",
      "permission": "Explain needed access without pretending data is empty."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Use a narrow, centered or left-aligned content block with a 44 px action; avoid oversized decorative art."
    },
    "accessibility": [
      "Move focus only after a deliberate navigation, not automatically on every empty result.",
      "Use a polite live update when results change.",
      "Action labels identify the next step."
    ],
    "usage": [
      "Differentiate true empty data from loading, error, and unavailable access.",
      "Keep useful context such as the query or selected filters visible."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-brand-site/dist/brand-tokens.json",
        "selector": "\"colors\"",
        "line": 3,
        "evidence": "Approved PtaKaro palette, fonts, button/card radii, and spacing scale."
      }
    ],
    "adaptation": "Proposed extension; captured marketing pages do not establish operational empty states."
  },
  {
    "id": "error-state",
    "name": "Inline error and recovery panel",
    "category": "Feedback & Recovery",
    "provenance": "proposed-extension",
    "anatomy": [
      "Specific plain-language error",
      "Affected scope",
      "Retry or corrective action",
      "Preserved user input/context"
    ],
    "variants": [
      "Field validation",
      "Section load failure",
      "Page load failure",
      "Offline saved state"
    ],
    "states": {
      "recoverable": "Show what failed and a direct Retry action.",
      "validation": "Explain the exact correction beside the field.",
      "partial": "Keep successful results and isolate the failed section.",
      "offline": "State what is available locally and whether changes are queued.",
      "resolved": "Remove the error only after successful recovery."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Use a compact full-width block; wrap details; do not open a modal for routine network failure."
    },
    "accessibility": [
      "Use role=alert for a newly occurring important error; avoid repeat announcements.",
      "Connect field errors through aria-describedby and aria-invalid.",
      "Never rely on red alone; preserve focus and typed data."
    ],
    "usage": [
      "Give a real recovery path.",
      "Do not claim saved/sent/completed until persistence or server confirmation succeeds."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-brand-site/dist/brand-tokens.json",
        "selector": "\"colors\"",
        "line": 3,
        "evidence": "Approved PtaKaro palette, fonts, button/card radii, and spacing scale."
      }
    ],
    "adaptation": "Proposed extension; error behavior must be implemented against the actual data layer."
  },
  {
    "id": "toast",
    "name": "Toast and reversible-action feedback",
    "category": "Feedback & Recovery",
    "provenance": "observed-adapted",
    "anatomy": [
      "Short status message",
      "Optional Undo action",
      "Optional dismiss button"
    ],
    "variants": [
      "Saved/removed confirmation",
      "Copied-link confirmation",
      "Nonblocking update"
    ],
    "states": {
      "visible": "Ink surface with white text; lime may mark the action.",
      "undoable": "Keep enough time for the user to act and provide a persistent equivalent when needed.",
      "dismissed": "Remove visually without moving focus.",
      "error": "Use a persistent inline error for important failures instead of a disappearing toast."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Place above safe-area insets and any bottom tray; keep 16 px margins and readable wrapping."
    },
    "accessibility": [
      "Use role=status for nonurgent feedback.",
      "Do not steal focus when showing a toast.",
      "Undo and dismiss controls are keyboard reachable; essential information must not depend on a short timer."
    ],
    "usage": [
      "Confirm real completed actions.",
      "A copy success message must reflect successful clipboard access; otherwise offer selectable text."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-brand-site/dist/index.html",
        "selector": "class=\"toast\"",
        "line": 12,
        "evidence": "Existing PtaKaro guide includes a toast used for copied color values."
      }
    ],
    "adaptation": "Existing feedback mechanism is observed; reliable success detection and persistent undo access are recommended improvements."
  },
  {
    "id": "content-grid",
    "name": "Responsive content grid",
    "category": "Layout",
    "provenance": "observed-adapted",
    "anatomy": [
      "Shared container",
      "Consistent columns",
      "16–24 px gaps",
      "Cards with natural height"
    ],
    "variants": [
      "Two-column editorial grid",
      "Three-column catalogue grid",
      "Mixed-width feature grid"
    ],
    "states": {
      "default": "Align card tops and image stages; use auto height for copy.",
      "loading": "Skeletons occupy the final grid footprint.",
      "empty": "Replace the grid with an explicit empty state.",
      "filtered": "Preserve scroll context when the result set changes."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Collapse to one or two readable columns; never force a card below its minimum content width."
    },
    "accessibility": [
      "DOM order matches visual reading order.",
      "Do not use CSS order to create a conflicting keyboard sequence.",
      "Test 200% and 400% zoom and long translated content."
    ],
    "usage": [
      "Use for complete sets where users should scan all items.",
      "Keep editorial importance consistent between desktop and mobile."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-website/apple-homepage-source.html",
        "selector": "tile-wrapper",
        "line": 233,
        "evidence": "Homepage is built from repeated campaign tile wrappers."
      },
      {
        "file": "workspace/ptakaro-brand-site/dist/index.html",
        "selector": "grid-template-columns:repeat(3,1fr)",
        "line": 2,
        "evidence": "Existing identity uses repeated responsive card grids."
      }
    ],
    "adaptation": "The layout mechanic is observed; proposed shared breakpoints and minimum widths belong to the PtaKaro system."
  },
  {
    "id": "brand-logo-slot",
    "name": "Brand logo slot",
    "category": "Identity",
    "provenance": "observed-adapted",
    "anatomy": [
      "Supplied wordmark or separate symbol SVG",
      "Clear space",
      "Optional home link"
    ],
    "variants": [
      "Ink on paper/white/lime",
      "White on ink",
      "Standalone symbol for constrained surfaces"
    ],
    "states": {
      "default": "Preserve SVG proportions, supplied colors, and clear space.",
      "hover": "No stretching, rotation, shadow, recoloring, or animated mark distortion.",
      "focus_visible": "If linked, outline the link area outside the clear space.",
      "small": "Use dedicated favicon below standalone-symbol minimum size."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Keep wordmark at the approved recommended 140 px minimum where possible; use the standalone symbol in a truly constrained app context rather than squeezing the wordmark."
    },
    "accessibility": [
      "Linked logo has an accessible PtaKaro home name.",
      "Avoid duplicated alt text when link text already names the brand.",
      "Decorative repeated logos use empty alt text."
    ],
    "usage": [
      "Wordmark and symbol are separate assets; do not prepend the symbol to the wordmark.",
      "Clear space is at least one quarter of symbol height."
    ],
    "motion": {
      "default": "No logo animation in standard UI.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-brand-site/dist/index.html",
        "selector": "Give it room.",
        "line": 7,
        "evidence": "Approved guide specifies clear space and separate wordmark/symbol usage."
      },
      {
        "file": "workspace/ptakaro-brand-site/dist/index.html",
        "selector": "recommended minimum 140 px",
        "line": 7,
        "evidence": "Approved guide defines minimum digital wordmark and symbol sizes."
      }
    ],
    "adaptation": "This is an existing PtaKaro rule, not an Apple-derived pattern."
  },
  {
    "id": "page-header",
    "name": "Editorial section and page header",
    "category": "Layout",
    "provenance": "observed-adapted",
    "anatomy": [
      "Optional eyebrow",
      "Heading",
      "Short explanatory paragraph",
      "Optional right-aligned action"
    ],
    "variants": [
      "Page introduction",
      "Section heading with See all",
      "Split label and headline"
    ],
    "states": {
      "default": "Ink headline with slate supporting copy; clear vertical hierarchy.",
      "linked": "Optional action receives normal link focus/hover states.",
      "long_copy": "Allow natural wrapping and variable height."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Stack heading and action; keep 16–24 px spacing; reduce display size while preserving comfortable line height."
    },
    "accessibility": [
      "Use correct h1/h2/h3 structure rather than choosing levels by size.",
      "Do not force line breaks that make translations awkward.",
      "Keep supporting copy as a paragraph."
    ],
    "usage": [
      "Explain the decision or content group plainly.",
      "Use one primary idea per heading; avoid unsupported superlatives."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-mac-shop/source.html",
        "selector": "rs-cards-shelf-mainheader",
        "line": 1072,
        "evidence": "Shopping shelves use a strong primary section label plus secondary copy."
      },
      {
        "file": "workspace/ptakaro-brand-site/dist/index.html",
        "selector": "class=\"section-head\"",
        "line": 7,
        "evidence": "Existing PtaKaro guide uses split section introductions."
      }
    ],
    "adaptation": "Retain hierarchy and whitespace. Master product UI uses the system font stack; Plus Jakarta Sans remains the brand-lead face. This product typography split extends the earlier all-Jakarta Latin identity guidance."
  },
  {
    "id": "cta-band",
    "name": "Closing call-to-action band",
    "category": "Layout",
    "provenance": "observed-adapted",
    "anatomy": [
      "One short headline",
      "Optional support line",
      "One primary action",
      "Optional restrained brand symbol"
    ],
    "variants": [
      "Lime band with ink action",
      "Paper band with lime action",
      "Ink band with lime action"
    ],
    "states": {
      "default": "Generous 48–64 px vertical spacing and one clear next step.",
      "hover": "Only action receives button hover behavior.",
      "focus_visible": "Action ring contrasts with both button and band."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Stack content and action; reduce padding to 32–48 px; keep the action at least 44 px high."
    },
    "accessibility": [
      "Use a real section heading.",
      "Decorative brand symbol is not announced.",
      "Do not turn the entire band into a link when it contains a button."
    ],
    "usage": [
      "Use for a useful next step such as Compare your shortlist.",
      "Do not manufacture urgency, scarcity, subscriptions, or service promises."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-brand-site/dist/index.html",
        "selector": "class=\"closing\"",
        "line": 12,
        "evidence": "Existing PtaKaro guide closes with a lime brand band."
      },
      {
        "file": "workspace/ptakaro-website/apple-homepage-source.html",
        "selector": "tile-ctas",
        "line": 240,
        "evidence": "Campaign tiles group primary and secondary CTA links."
      }
    ],
    "adaptation": "Extend the existing closing-band treatment into a functional, honest action block."
  },
  {
    "id": "pagination",
    "name": "Results pagination",
    "category": "Collections & Disclosure",
    "provenance": "proposed-extension",
    "anatomy": [
      "Current page",
      "Previous/next controls",
      "Optional page numbers",
      "Result range/count when known"
    ],
    "variants": [
      "Numbered pagination",
      "Load more with explicit progress"
    ],
    "states": {
      "default": "Current page marked in ink/lime with text state.",
      "first_last": "Unavailable direction is clearly disabled or omitted.",
      "loading": "Keep existing results and show loading on the requesting control.",
      "error": "Retry the failed page without clearing loaded results."
    },
    "responsive": {
      "large": "Use the shared 1440 px maximum content container with 6.25vw page gutters; preserve the stated anatomy and natural content height.",
      "medium": "Use 6.25vw page gutters; reduce columns before reducing readable text size.",
      "small": "Show current page and previous/next rather than many tiny number buttons."
    },
    "accessibility": [
      "Use a labeled pagination nav; current link uses aria-current=page.",
      "After page navigation, move focus predictably to results heading only when needed.",
      "For Load more, announce added items and preserve focus at the control."
    ],
    "usage": [
      "Use for large result sets instead of endless unannounced insertion.",
      "Keep page/filter/query state in the URL when supported."
    ],
    "motion": {
      "default": "Color, border, and opacity transitions use 160–200 ms ease-out. Avoid layout shifts.",
      "reduced_motion": "Use 0 ms motion tokens: no transforms, animated scrolling, pulsing, or transitions; preserve all content and interactions."
    },
    "source_refs": [
      {
        "file": "workspace/ptakaro-app-store/source.html",
        "selector": "shelf-grid-nav__arrow",
        "line": 61,
        "evidence": "The reference has previous/next shelf-page controls; search-results pagination is an extension."
      }
    ],
    "adaptation": "Proposed extension for full catalogue results; the source only establishes local shelf navigation."
  }
]