@import "tachyons.min.css";

/* Current structure of this file
  1. Page layout — using CSS Grid
  2. Utility supplements (supplements to Tachyons), & 'utility-semantic'
  3. Components — things with identity: channel pill, tooltip
  4. Global element styles — form elements
  5. Generated/third-party — flags sprite (probably a separate file honestly)
*/

/* What's happening in this stylesheet
 - goal here has been to make this style sheet exemplify/embody "the unstyled output of the build stage".
 - output of 'no-design'/functional site build phase should be a mobile first functional site,
   containing only functional styling. functionality can't be illustrated for some features
   without some styling choices. but any styling other than that should be avoided.
 - since some unnecessary styling that should really be in the design phase might creep in, there's
   a question whether to audit the styles at the end of the functional build phase, and trim them back.
   In this case, am exploring this, but it might not be needed.
 - speculation whether a live demo for this forum site could have switchable style sheets,
   including this, as 'none'. but switching out *all* styles implies/requires no styles at all
   are inline as utility css, which seems extreme, given the hybrid approach here, where utility css
   is used in functional build, but a partial/full migration to semantic css during design phase is envisaged.
 - a resolution to that may be, once the design phase names things and semanticizes the CSS, perhaps leaving
   some css inline as utility; then that defines the scope of the alternate style sheets.
   An alternate style sheet or skin is simply a copy of your first design, same css classes, just altered settings.
   But note, the semantic CSS you will have at that stage is already highly tweakable.
   The skin is a thin 'alternate set of settings'.
*/


/* 1. Page layout            */
/* these containers are needed even when doing 'no-design' phase with utility css,
   because grid doesn't work with utility css.
   This section contains only grid defs at present.
   Be careful not to add defs that aren't for grid to this section,
   put them in the right section of this stylesheet instead. */
/* ------------------------- */

.forum-layout {
/* The root element containing the grid def for the whole page, including the nav
   - naming things may take time, but it's a requirement to do things properly.
   - if we don't name things, we can't think about them.
   - the best way to name your page elements is on paper,
     a pencil sketch, a figma printout, or a screenshot printout. */
    display: grid;
    grid-template-columns: 1fr 90vw 1fr;   /* a 3 column, single row grid, with flexible side gutters. */
                                           /* scales without media queries.  */
                                           /* but not ideal for typography (line length 45-75),     */
                                           /* if that's what you're presenting in the center column */

                                           /* i'm using a grid, which is a crucial & powerful
                                              design tool, without knowing what i'm doing visually.
                                           To do this properly, need to
                                           - recognise that a grid is a powerful design tool, learn how they work
                                           - build a visual design, picking a grid
                                             from an an informed design point of view
                                           - that means knowing and assessing the needs of the content
                                           - then express the grid you want cleanly & correctly, in css grid. */
    grid-template-areas:
        " . header   . "                  /* <- this is FANTASTIC */
        " . content  . ";                 /* In combo with grid-template, it's a declarative grid */
                                          /* previously had header full width, but only reason for that
                                             was to get a full width nav background, now dispensed with
                                             for 'no design' phase */

    gap: 1rem;                            /* https://grok.com/c/1c3e5b3f-efed-4a81-b0cd-e6e9d7e7befa */
}

.forum-header {                           /* Header area */
    grid-area: header;
    display: flex;
    flex-wrap: wrap;                      /* prevents squished nav bar on mobile, a problem during no-design phase */
    justify-content: space-between;
    align-items: center;                  /* for secondary axis, i.e. vertical */
    padding: 1rem 0rem;                   /* vertical, horiz. rem scales with font size on root html el. */
    gap: 1rem;                            /* consistent gap between all flex items, w/o using margins */
}

.forum-content {                          /* Main content area */
    grid-area: content;
}


/* 2. Utility supplements    */
/* utilities needed that tachyons didn't have.
   notice, h-18 could have been .icon-18, instead, as it was only for that purpose.
   good, you're now seeing/evaluating both options: utility vs semantic naming.     */
/* ------------------------- */

/* fixed pixel heights for font awesome icons */
                          /* these classes are a bit of a mismatch with tachyons. -12, -14 & -16 not used. */
.h-12 { height: 12px; }   /* tachyons heights; h1, h2, use a rem scale. */
.h-14 { height: 14px; }   /* it also has h-25, h-50, h-75, h-100 which are %'s, of parent */
.h-16 { height: 16px; }   /* these are fixed pixel amounts, created when adding fontawesome icons */
.h-18 { height: 18px; }   /* rem would change if base font size changed, might not want that for icons, apparently */
.h-20 { height: 20px; }   /* since the only place they're used is icons, could you call them .icon-18, -20, -24 */
.h-24 { height: 24px; }   /* or, just use semantic css instead... but these may still be useful for building. */


/* Utility-semantic      */
/* -------------------   */
/* action icon & best answer colors — utility semantic:
   named for purpose, single rule each. */
/* note: action-icon includes uses both as a 'thread-action-icon' and 'reply-action-icon',
   so it could be split; but notice, when we start doing that, in advance of
   a full design pass & the semantic naming coming out of that, there's a big
   risk of a. wasted work, b. simply creating confusion if the abstractions aren't right.
   you only abstract (give semantic names) when you're confident your names are right & design is stable.
   Why make these semantic? Why not just leave as .fill-silver, .fill-orange utility classes?
   - notice, again, naming here hinges on the design surface phase & giving names to elements!
     where do names originate? it can sometimes be coding? but more likely, actually - visuals
     semantic names like this that you can instantly understand, and use your design language.
   - what these semantic extractions DO give you: new single levers to change appearance instantly,
     you wouldn't see how to do it otherwise, & you likely wouldn't try.
   - so the change of these classes from .fill-silver .fill-orange here is to illustarte this.
     a design output consisting of screenshots with named elements, and a stable design,
     is a huge asset, when it comes to constructing workable CSS, which can then be greatly refined.
     Projects or sites where visual appearance isn't critical and complex might not merit all this.
*/
.action-icon--inactive { fill: silver; }
.action-icon--active   { fill: orange; }
.best-answer-tick--active     { fill: green;  }

/* Functional color 'utility semantic' for best answer callout
 - this is needed in no-design phase, to show the best answer feature working.
 - the best answer callout consists of two parts: a border, and a background color
 - reply border if 'extra-border?' is true (lower half of the best answer callout)
 - best answer callout header background (upper half of best answer callout)
 - right now, this is a 'semantic utility' class, named for how it is used,
   but only containing one style rule.
 - should spot important uses of colours during no-design phase, & add as utility semantic.
   that forms a beach head to put more style defs under the same semantic name.

 - notice also, the ability to come up with names, like .best-answer-callout-color,
   hinges on having come up with element names, in the design pass,
   to identify the 'design surface', so that's essential.
   we decided to do that by printing screenshots & annotating them.
*/
.best-answer--bg     { background-color: #39CCCC; }
.best-answer--border { border-color: #39CCCC; }

/* Accent colors - none used at present; had some,
   shouldn't have been in no-design phase, removed.

 - suggestion: if you want an accent color, and to _give that a name in your design language_
   do that semantic, separately, as .border-accent, or, whatever it is you're accenting.
   compared to just a utility color, the utility color it gives you no indication of what it's for.
   that wont matter when you're doing it, but when you come back, your work will not be readable.
*/



/* 3. Components - things with identity  */
/* component-like things created during the 'no design phase',
   even though that phase generally won't create components */
/* ------------------------------------- */

/*  Have kept in-line utility styling of buttons, no .btn defs here, because
   - exception: .btn-as-link, exclusively to unstyle logout button to a link
     notice that is actually the reverse: it's not a button at all, it's a link.
   - no buttons looks broken for a functional demo
   - buttons come in many forms, restyled links, restyled submits, sizing needs
   - a line of utility css seems the best way to do it in no-design phase.
   - they can be stripped down in the design pass. just be sure not to fuss with them.
     one line of utility css. that's what you're allowed.  */

.btn-as-link {
    background:none;
    border:none;
    padding:0;
    text-decoration:underline;
    cursor:pointer;
    font:inherit;
}

/* channel pill colours — token maps to border + text colour */
.channel-pill--blue   { border-color: #357edd; color: #357edd; }
.channel-pill--green  { border-color: #19a974; color: #19a974; }
.channel-pill--purple { border-color: #7b5ea7; color: #7b5ea7; }

/* can certainly adjust this tooltip design to be cooler if want; but it's fine for time being */
.tooltip {                              /* see design notes in original app if needed */
    position: relative;
    display: inline-block;
 }

.tooltip .tooltip-text {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    left: 25px;
    top: -10px;
    z-index: 1;  /* to put it on top of fa icon. */
}
.tooltip:hover .tooltip-text {          /* __ transition for hover (enter) __ */
    visibility: visible;
    opacity: 1;
    transition: all 0ms ease-in 600ms;
}
.tooltip:not(:hover) .tooltip-text {    /* __use a different transition for exit__ */
    transition: all 300ms ease-out 0ms;  /* on exit, want a slight fade out, but no delay. */
}


/* 4. Global element styles  */
/* tweaks that actually perhaps needn't have been done
   at all during the no-design phase;
   just delete all these, for a properly slimmed output of no-design phase.
   notice teal & orange are the accent/highlight colors that have been used in no-design phase.  */
/* ------------------------- */

/* Links & Active states (clicks) */
/* restyling link states (colors) may be done in a reset, see comment at foot. */

/* Forms */
/* bare form element defaults — makes e6auth forms usable on mobile
   during no-design phase, without adding classes to e6auth */
/* broader question is, is this normally in a reset, & what kind of reset is
   tachyons already giving; these are deeper questions, not ready to tackle now */
label {
    display: block;
    margin-top: 0.5rem;
}

input[type="email"],
input[type="text"],
input[type="password"] {
    display: block;
    width: 100%;
}

input[type="submit"] {
    display: block;
    margin-top: 1rem;
}


/* 5. Generated/Third party  */
/* ------------------------- */

/* Generated with CSS Flag Sprite generator (https://www.flag-sprites.com/) */
.flag {
    display:inline-block;
    width:16px;
    height:11px;
    background: url(/flags.png) no-repeat;
}
.flag.flag-ad{background-position:-16px 0}.flag.flag-ae{background-position:-32px 0}.flag.flag-af{background-position:-48px 0}.flag.flag-ag{background-position:-64px 0}.flag.flag-ai{background-position:-80px 0}.flag.flag-al{background-position:-96px 0}.flag.flag-am{background-position:-112px 0}.flag.flag-an{background-position:-128px 0}.flag.flag-ao{background-position:-144px 0}.flag.flag-ar{background-position:-160px 0}.flag.flag-as{background-position:-176px 0}.flag.flag-at{background-position:-192px 0}.flag.flag-au{background-position:-208px 0}.flag.flag-aw{background-position:-224px 0}.flag.flag-ax{background-position:-240px 0}.flag.flag-az{background-position:0 -11px}.flag.flag-ba{background-position:-16px -11px}.flag.flag-bb{background-position:-32px -11px}.flag.flag-bd{background-position:-48px -11px}.flag.flag-be{background-position:-64px -11px}.flag.flag-bf{background-position:-80px -11px}.flag.flag-bg{background-position:-96px -11px}.flag.flag-bh{background-position:-112px -11px}.flag.flag-bi{background-position:-128px -11px}.flag.flag-bj{background-position:-144px -11px}.flag.flag-bm{background-position:-160px -11px}.flag.flag-bn{background-position:-176px -11px}.flag.flag-bo{background-position:-192px -11px}.flag.flag-br{background-position:-208px -11px}.flag.flag-bs{background-position:-224px -11px}.flag.flag-bt{background-position:-240px -11px}.flag.flag-bv{background-position:0 -22px}.flag.flag-bw{background-position:-16px -22px}.flag.flag-by{background-position:-32px -22px}.flag.flag-bz{background-position:-48px -22px}.flag.flag-ca{background-position:-64px -22px}.flag.flag-catalonia{background-position:-80px -22px}.flag.flag-cd{background-position:-96px -22px}.flag.flag-cf{background-position:-112px -22px}.flag.flag-cg{background-position:-128px -22px}.flag.flag-ch{background-position:-144px -22px}.flag.flag-ci{background-position:-160px -22px}.flag.flag-ck{background-position:-176px -22px}.flag.flag-cl{background-position:-192px -22px}.flag.flag-cm{background-position:-208px -22px}.flag.flag-cn{background-position:-224px -22px}.flag.flag-co{background-position:-240px -22px}.flag.flag-cr{background-position:0 -33px}.flag.flag-cu{background-position:-16px -33px}.flag.flag-cv{background-position:-32px -33px}.flag.flag-cw{background-position:-48px -33px}.flag.flag-cy{background-position:-64px -33px}.flag.flag-cz{background-position:-80px -33px}.flag.flag-de{background-position:-96px -33px}.flag.flag-dj{background-position:-112px -33px}.flag.flag-dk{background-position:-128px -33px}.flag.flag-dm{background-position:-144px -33px}.flag.flag-do{background-position:-160px -33px}.flag.flag-dz{background-position:-176px -33px}.flag.flag-ec{background-position:-192px -33px}.flag.flag-ee{background-position:-208px -33px}.flag.flag-eg{background-position:-224px -33px}.flag.flag-eh{background-position:-240px -33px}.flag.flag-england{background-position:0 -44px}.flag.flag-er{background-position:-16px -44px}.flag.flag-es{background-position:-32px -44px}.flag.flag-et{background-position:-48px -44px}.flag.flag-eu{background-position:-64px -44px}.flag.flag-fi{background-position:-80px -44px}.flag.flag-fj{background-position:-96px -44px}.flag.flag-fk{background-position:-112px -44px}.flag.flag-fm{background-position:-128px -44px}.flag.flag-fo{background-position:-144px -44px}.flag.flag-fr{background-position:-160px -44px}.flag.flag-ga{background-position:-176px -44px}.flag.flag-gb{background-position:-192px -44px}.flag.flag-gd{background-position:-208px -44px}.flag.flag-ge{background-position:-224px -44px}.flag.flag-gf{background-position:-240px -44px}.flag.flag-gg{background-position:0 -55px}.flag.flag-gh{background-position:-16px -55px}.flag.flag-gi{background-position:-32px -55px}.flag.flag-gl{background-position:-48px -55px}.flag.flag-gm{background-position:-64px -55px}.flag.flag-gn{background-position:-80px -55px}.flag.flag-gp{background-position:-96px -55px}.flag.flag-gq{background-position:-112px -55px}.flag.flag-gr{background-position:-128px -55px}.flag.flag-gs{background-position:-144px -55px}.flag.flag-gt{background-position:-160px -55px}.flag.flag-gu{background-position:-176px -55px}.flag.flag-gw{background-position:-192px -55px}.flag.flag-gy{background-position:-208px -55px}.flag.flag-hk{background-position:-224px -55px}.flag.flag-hm{background-position:-240px -55px}.flag.flag-hn{background-position:0 -66px}.flag.flag-hr{background-position:-16px -66px}.flag.flag-ht{background-position:-32px -66px}.flag.flag-hu{background-position:-48px -66px}.flag.flag-ic{background-position:-64px -66px}.flag.flag-id{background-position:-80px -66px}.flag.flag-ie{background-position:-96px -66px}.flag.flag-il{background-position:-112px -66px}.flag.flag-im{background-position:-128px -66px}.flag.flag-in{background-position:-144px -66px}.flag.flag-io{background-position:-160px -66px}.flag.flag-iq{background-position:-176px -66px}.flag.flag-ir{background-position:-192px -66px}.flag.flag-is{background-position:-208px -66px}.flag.flag-it{background-position:-224px -66px}.flag.flag-je{background-position:-240px -66px}.flag.flag-jm{background-position:0 -77px}.flag.flag-jo{background-position:-16px -77px}.flag.flag-jp{background-position:-32px -77px}.flag.flag-ke{background-position:-48px -77px}.flag.flag-kg{background-position:-64px -77px}.flag.flag-kh{background-position:-80px -77px}.flag.flag-ki{background-position:-96px -77px}.flag.flag-km{background-position:-112px -77px}.flag.flag-kn{background-position:-128px -77px}.flag.flag-kp{background-position:-144px -77px}.flag.flag-kr{background-position:-160px -77px}.flag.flag-kurdistan{background-position:-176px -77px}.flag.flag-kw{background-position:-192px -77px}.flag.flag-ky{background-position:-208px -77px}.flag.flag-kz{background-position:-224px -77px}.flag.flag-la{background-position:-240px -77px}.flag.flag-lb{background-position:0 -88px}.flag.flag-lc{background-position:-16px -88px}.flag.flag-li{background-position:-32px -88px}.flag.flag-lk{background-position:-48px -88px}.flag.flag-lr{background-position:-64px -88px}.flag.flag-ls{background-position:-80px -88px}.flag.flag-lt{background-position:-96px -88px}.flag.flag-lu{background-position:-112px -88px}.flag.flag-lv{background-position:-128px -88px}.flag.flag-ly{background-position:-144px -88px}.flag.flag-ma{background-position:-160px -88px}.flag.flag-mc{background-position:-176px -88px}.flag.flag-md{background-position:-192px -88px}.flag.flag-me{background-position:-208px -88px}.flag.flag-mg{background-position:-224px -88px}.flag.flag-mh{background-position:-240px -88px}.flag.flag-mk{background-position:0 -99px}.flag.flag-ml{background-position:-16px -99px}.flag.flag-mm{background-position:-32px -99px}.flag.flag-mn{background-position:-48px -99px}.flag.flag-mo{background-position:-64px -99px}.flag.flag-mp{background-position:-80px -99px}.flag.flag-mq{background-position:-96px -99px}.flag.flag-mr{background-position:-112px -99px}.flag.flag-ms{background-position:-128px -99px}.flag.flag-mt{background-position:-144px -99px}.flag.flag-mu{background-position:-160px -99px}.flag.flag-mv{background-position:-176px -99px}.flag.flag-mw{background-position:-192px -99px}.flag.flag-mx{background-position:-208px -99px}.flag.flag-my{background-position:-224px -99px}.flag.flag-mz{background-position:-240px -99px}.flag.flag-na{background-position:0 -110px}.flag.flag-nc{background-position:-16px -110px}.flag.flag-ne{background-position:-32px -110px}.flag.flag-nf{background-position:-48px -110px}.flag.flag-ng{background-position:-64px -110px}.flag.flag-ni{background-position:-80px -110px}.flag.flag-nl{background-position:-96px -110px}.flag.flag-no{background-position:-112px -110px}.flag.flag-np{background-position:-128px -110px}.flag.flag-nr{background-position:-144px -110px}.flag.flag-nu{background-position:-160px -110px}.flag.flag-nz{background-position:-176px -110px}.flag.flag-om{background-position:-192px -110px}.flag.flag-pa{background-position:-208px -110px}.flag.flag-pe{background-position:-224px -110px}.flag.flag-pf{background-position:-240px -110px}.flag.flag-pg{background-position:0 -121px}.flag.flag-ph{background-position:-16px -121px}.flag.flag-pk{background-position:-32px -121px}.flag.flag-pl{background-position:-48px -121px}.flag.flag-pm{background-position:-64px -121px}.flag.flag-pn{background-position:-80px -121px}.flag.flag-pr{background-position:-96px -121px}.flag.flag-ps{background-position:-112px -121px}.flag.flag-pt{background-position:-128px -121px}.flag.flag-pw{background-position:-144px -121px}.flag.flag-py{background-position:-160px -121px}.flag.flag-qa{background-position:-176px -121px}.flag.flag-re{background-position:-192px -121px}.flag.flag-ro{background-position:-208px -121px}.flag.flag-rs{background-position:-224px -121px}.flag.flag-ru{background-position:-240px -121px}.flag.flag-rw{background-position:0 -132px}.flag.flag-sa{background-position:-16px -132px}.flag.flag-sb{background-position:-32px -132px}.flag.flag-sc{background-position:-48px -132px}.flag.flag-scotland{background-position:-64px -132px}.flag.flag-sd{background-position:-80px -132px}.flag.flag-se{background-position:-96px -132px}.flag.flag-sg{background-position:-112px -132px}.flag.flag-sh{background-position:-128px -132px}.flag.flag-si{background-position:-144px -132px}.flag.flag-sj{background-position:-160px -132px}.flag.flag-sk{background-position:-176px -132px}.flag.flag-sl{background-position:-192px -132px}.flag.flag-sm{background-position:-208px -132px}.flag.flag-sn{background-position:-224px -132px}.flag.flag-so{background-position:-240px -132px}.flag.flag-somaliland{background-position:0 -143px}.flag.flag-sr{background-position:-16px -143px}.flag.flag-ss{background-position:-32px -143px}.flag.flag-st{background-position:-48px -143px}.flag.flag-sv{background-position:-64px -143px}.flag.flag-sx{background-position:-80px -143px}.flag.flag-sy{background-position:-96px -143px}.flag.flag-sz{background-position:-112px -143px}.flag.flag-tc{background-position:-128px -143px}.flag.flag-td{background-position:-144px -143px}.flag.flag-tf{background-position:-160px -143px}.flag.flag-tg{background-position:-176px -143px}.flag.flag-th{background-position:-192px -143px}.flag.flag-tibet{background-position:-208px -143px}.flag.flag-tj{background-position:-224px -143px}.flag.flag-tk{background-position:-240px -143px}.flag.flag-tl{background-position:0 -154px}.flag.flag-tm{background-position:-16px -154px}.flag.flag-tn{background-position:-32px -154px}.flag.flag-to{background-position:-48px -154px}.flag.flag-tr{background-position:-64px -154px}.flag.flag-tt{background-position:-80px -154px}.flag.flag-tv{background-position:-96px -154px}.flag.flag-tw{background-position:-112px -154px}.flag.flag-tz{background-position:-128px -154px}.flag.flag-ua{background-position:-144px -154px}.flag.flag-ug{background-position:-160px -154px}.flag.flag-um{background-position:-176px -154px}.flag.flag-us{background-position:-192px -154px}.flag.flag-uy{background-position:-208px -154px}.flag.flag-uz{background-position:-224px -154px}.flag.flag-va{background-position:-240px -154px}.flag.flag-vc{background-position:0 -165px}.flag.flag-ve{background-position:-16px -165px}.flag.flag-vg{background-position:-32px -165px}.flag.flag-vi{background-position:-48px -165px}.flag.flag-vn{background-position:-64px -165px}.flag.flag-vu{background-position:-80px -165px}.flag.flag-wales{background-position:-96px -165px}.flag.flag-wf{background-position:-112px -165px}.flag.flag-ws{background-position:-128px -165px}.flag.flag-xk{background-position:-144px -165px}.flag.flag-ye{background-position:-160px -165px}.flag.flag-yt{background-position:-176px -165px}.flag.flag-za{background-position:-192px -165px}.flag.flag-zanzibar{background-position:-208px -165px}.flag.flag-zm{background-position:-224px -165px}.flag.flag-zw{background-position:-240px -165px}


/* List of 'nice things' originally added during functional build,
   which I now know were unnecessary, so removed.
   These could be considered in a true design pass
   To do so, you'd ask claude best way to do it, much faster now.
   - global restyle of browser's input select; ask re. pros/cons & how to do it.
   - change color of placeholder text (using ::placeholder) on form fields, this did very little
   - make links orange when clicked, with a:active {color:orange}. this is a design choice,
     so doesn't belong; it's not needed to show functionality (it was actually quite distinctive...)
     note though, the browser default of red is actually bad, so fixing this is a standard part of
     any design pass.
     note also, have added tachyons 'blue' to all nav links, to avoid browser colors (purple & red)
     that 'blue' wins the specificity battle, so a:active would not affect them while that is there.
     the regular links in the list of threads aren't colored though, so get the browser defaults (purple & red).
     _link states are almost always overriden with a consistent color system, as one of the things done in a reset_
     _todo: establish what else a reset usually does_ (with claude's help)
   -
   */